QilinKaitify组件

QilinKaitify组件，基于kaitify-vue封装的富文本编辑器组件。

注意：

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

2、更多功能各位大佬亦可直接去参考官方文档(https://www.so-better.cn/docs/kaitify-vue/guide/introduction)。

基本使用

1、自定义粘贴图片&自定义上传图片

<template>
    <QilinKaitify :kaitifyConfig="kaitifyConfig" v-model="content"></QilinKaitify>
</template>

<script setup>
    import {reactive,ref,onMounted} from "vue";
    let content = ref("");
    const kaitifyConfig = reactive({
        placeholder:"请输入内容...",
        allowPasteHtml:true,
        formatRules:[
            ({ node }) => {
                if (node.hasStyles()) {
                    const styles = {}
                    Object.keys(node.styles).forEach(item => {
                        //消除wps粘贴的pt样式带来的影响
                        if (!node.styles[item].toString().endsWith('pt')) {
                            styles[item] = node.styles[item]
                        }
                    })
                    node.styles = styles
                }
            }
        ],
        menuPopoverProps:{
            zIndex:5000
        },
        menuImageProps:{
            customUpload:(ref,file)=>{
                console.log(file,111);
                let formData = new FormData();
                formData.append("file",file);
                fetch("http://36.134.22.190:8061/common/upload",{
                    headers:{
                        Authorization:"***"},
                    method:"post",
                    body:formData
                }).then((response)=>{
                    // console.log(response);
                    return response.json();
                }).then((res)=>{
                    // console.log(res);
                    ref.state.editor.commands.setImage({
                        src:res.data.url,
                        width:"300px",
                        alt:"图片加载失败"
                    });
                });
            }
        },
        onPasteImage:(ref,file)=>{
            console.log(file,111);
            let formData = new FormData();
            formData.append("file",file);
            fetch("http://36.134.22.190:8061/common/upload",{
                headers:{
                    Authorization:"***"},
                method:"post",
                body:formData
            }).then((response)=>{
                // console.log(response);
                return response.json();
            }).then((res)=>{
                // console.log(res);
                ref.state.editor.commands.setImage({
                    src:res.data.url,
                    width:"300px",
                    alt:"图片加载失败"
                });
            });
        }
    });
</script>

Props参数

kaitifyConfig object

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

属性名	类型	说明	可选值	默认值
disabled	boolean	是否禁用	-	false
locale	string	语言	zh-CN/en-US	zh-CN
hideBubbleOnMousedown	boolean	鼠标在编辑器内按下时是否隐藏气泡栏，默认false，若设为true，则即使bubbleProps的visible为true，也不显示气泡栏	-	false
autofocus	boolean	编辑器渲染后是否自动聚焦	-	true
placeholder	string	占位符	-	请输入内容...
dark	boolean	是否使用暗黑模式	-	false
style	object/string	自定义样式	-	-
allowCopy	boolean	是否允许复制	-	true
allowPaste	boolean	是否允许粘贴	-	true
allowCut	boolean	是否允许剪切	-	true
allowPasteHtml	boolean	是否允许粘贴html，即粘贴内容是否携带样式	-	true
bubbleProps	object	编辑器气泡栏相关属性配置，详见bubbleProps	-	-
menuPopoverProps	object	菜单组件的浮层属性配置，详见menuPopoverProps	-	-
menuImageProps	object	菜单组件图片属性配置，详见menuImageProps	-	-
onPasteImage	function	编辑器粘贴图片时触发，返回true表示使用默认逻辑，返回false表示进行自定义处理	(editor,file)=>{}	-
onPasteVideo	function	编辑器粘贴视频时触发，返回true表示使用默认逻辑，返回false表示进行自定义处理，这边默认封装的是自定义处理	(editor,file)=>{}	-
onPasteFile	function	编辑器粘贴除了图片和视频以外的文件时触发，需要自定义处理	(editor,file)=>{}	-

bubbleProps object

编辑器气泡栏相关属性配置。

属性名	类型	说明	可选值	默认值
visible	boolean	是否显示气泡栏	-	false
zIndex	number	气泡栏的层级	-	5

menuPopoverProps object

菜单组件的浮层属性配置。

属性名	类型	说明	可选值	默认值
arrow	boolean	浮层是否显示三角形	-	true
zIndex	number	浮层层级	-	10

menuImageProps object

菜单组件图片属性配置。

属性名	类型	说明	可选值	默认值
customUpload	function	自定义本地图片上传的方法，该方法返回一个字符串值，表示上传后的图片文件地址，回调参数为 File 文件，如果不设置该方法，图片默认以 base64 字符串的形式插入编辑器中	(file) => {}	-

Events

组件的暴露事件。

事件名	类型	参数	说明
success	function	value	富文本编辑器失去焦点后触发的事件，得到编辑器内容

Exposes

组件的暴露方法。

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