QilinWangEditor组件

QilinWangEditor组件基于wangEditor封装的富文本编辑器组件。

注意：

1、因为本人项目的原因，涉及到的富文本编辑器功能比较浅，因为针对该编辑器只是封装了对应图片的粘贴和上传图片的功能，若有需求亦可留言作者，后续会研究加上定制化功能。

2、更多功能各位大佬亦可直接去参考wangEditor官方文档(https://www.wangeditor.com/)。

基本使用

<template>
    <QilinWangEditor v-model:wangEditorConfig="wangEditorConfig"
        content="我才是初始化的内容"
        @uploadImage="uploadImage"
    ></QilinWangEditor>
</template>

<script setup>
    import {reactive,ref} from "vue";
    const uploadImage=(file,insertFn)=>{
        console.log(file,insertFn);
        insertFn("http://47.122.16.23:8081/profile/upload/2024/04/18/20221123-mp-certified-banner_20240418100434A012.png",file.name,"");
    };

    const wangEditorConfig=reactive({
        value:"我是初始化的内容~",
        editorConfig:{
            placeholder:"请输入内容"
        }
    });
</script>

Props参数

wangEditorConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
value	string	显示的内容，优先级低于content传参，content传参一般用于回显内容	-	-
styles	object	自定义样式，详见styles	-	-
mode	string	编辑器的模式	simple/default	default
toolbarConfig	object	工具栏的配置项	-	{}
editorConfig	object	编辑器的配置项，详见editorConfig	-	{}

styles object

自定义样式。

属性名	类型	说明	可选值	默认值
toolbarStyle	string	工具栏的自定义样式	-	border-bottom:1px solid #ccc;
editorStyle	string	编辑器的自定义样式	-	height:320px;overflow-y:hidden;

editorConfig object

编辑器的配置项。

属性名	类型	说明	可选值	默认值
placeholder	string	占位符	-	-
readOnly	boolean	是否只读	-	false
autoFocus	boolean	是否自动聚焦	-	true

content string

显示的内容，优先级高于wangEditorConfig.value参数，content传参一般用于回显内容。

Events

组件的暴露事件。

事件名	类型	参数	说明
success	function	value	富文本编辑器失去焦点后触发的事件，得到编辑器的内容
uploadImage	function	file,insertFn	点击富文本编辑器中的上传图片或者自定义粘贴图片触发的事件，insertFn为插入图片的函数，file为粘贴的图片文件

Exposes

组件的暴露方法。

方法名	类型	参数	说明
handleBlur	function	-	富文本编辑器失去焦点后触发