vue3中使用wangeditor

前言

看了wangeditor 的官方文档，觉得很多的配置项很难找，对刚刚想用wangeditor的小伙伴不友好，于是站在开发使用的角度上来写写稍微详细一点点的使用说明，本案例只对我项目上需要的一些功能进行讲解，至于其他的api还需要自行研究官方文档才行，先来看看最终效果

实现流程

1.参考官网安装方法

yarn add @wangeditor/editor

yarn add @wangeditor/editor-for-vue@next

2.编写vue代码

onchange是我们需要用到的函数，我们在这个函数里返回html内容给外部

mode:工具栏的模式，这里我使用的是simple，也就是简洁模式

toolbarConfig:这里主要是配置工具栏哪些按钮功能需要排除的

3.编写样式

样式很简单，没什么可以说的

4.编写js

1.引入wangeditor库

2.定义props、emits

3.定义常量

4.onMounted中回显父组件传过来的html内容，有值就显示，没值设置为""

5.设置工具栏和编辑器的配置项

excludeKeys: 指定哪些功能按钮是我们不需要的

如果不知道有哪些key，我们可以通过如下方法获取

这里打印出来的key集合如下

uploadImage:上传图片的配置向，此处我们不上传图片到服务器，这里使用的是file转base64,能自己解决的绝不麻烦后台人员，哈哈

file转base64方法很多，网上一搜一大堆，我使用的是下面的这个

insertFn：这个是wangeditor提供的内置api，就是将我们处理后的图片路径传入，wangeditor会将它插入到编辑器中

5.定义handleCreated函数，用于记录editor实例

6.组件卸载时从内存中销毁

完整代码如下

<template>
    <div class="editor">
        <Toolbar
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onChange="contentChange"
            @onCreated="handleCreated"
        />
    </div>
</template>

<script setup name='WangEditor' lang='ts'>

    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { DomEditor } from "@wangeditor/editor";

    
    const props = defineProps<{
        text?:string //text:用于做数据回显功能
    }>()

    const emits = defineEmits<{
        (e:"change",data:any):void //主要用于父组件接收wangeditor实时编辑的内容
    }>()

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('')

    // 工具栏模式  
    const mode = ref("simple") //简洁

    onMounted(() => {
        setTimeout(() => {  
            valueHtml.value = props.text??"" //回显数据
            // const toolbar = DomEditor.getToolbar(editorRef.value) as any;
            // const curToolbarConfig = toolbar.getConfig();
            // console.log(curToolbarConfig.toolbarKeys);  //这里会打印出所有的key
        }, 200)
    })


    /**
     * file 转Base64 DataURL
     * @param {File} file
     * @returns
     */
    const fileToBase64Async = (file:File)=> {
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (e:any) => {
                resolve(e.target.result);
            };
        });
    }
    // [
    //     "blockquote",
    //     "header1",
    //     "header2",
    //     "header3",
    //     "|",
    //     "bold",
    //     "underline",
    //     "italic",
    //     "through",
    //     "color",
    //     "bgColor",
    //     "clearStyle",
    //     "|",
    //     "bulletedList",
    //     "numberedList",
    //     "todo",
    //     "justifyLeft",
    //     "justifyRight",
    //     "justifyCenter",
    //     "|",
    //     "insertLink",
    //     {
    //         "key": "group-image",
    //         "title": "图片",
    //         "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
    //         "menuKeys": [
    //             "insertImage",
    //             "uploadImage"
    //         ]
    //     },
    //     "insertVideo",
    //     "insertTable",
    //     "codeBlock",
    //     "|",
    //     "undo",
    //     "redo",
    //     "|",
    //     "fullScreen"
    // ]

    // 工具栏配置项
    const toolbarConfig = {
        excludeKeys: ["insertLink", "viewImageLink", "insertVideo", "emotion", "fullScreen","codeBlock","todo"] //排除不需要的菜单
    }

    // 编辑器配置项
    const editorConfig = { 
        placeholder: '请输入内容...',
        MENU_CONF:{
            uploadImage:{
                async customUpload(file:File, insertFn:any) {
                    const fileBase64 = fileToBase64Async(file)
                    insertFn(fileBase64) // 最后插入图片 insertFn(url, alt, href)，alt：描述，href:链接，后面非必填
                    console.log(fileBase64)
                },
            },
        }
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        if (editorRef.value == null) return
        editorRef.value.destroy()
    })

    const handleCreated = (editor:any) => {
        editorRef.value = editor // 记录 editor 实例，重要！
    }

    const contentChange = (editor:any)=>{
        emits("change",editor.getHtml())
    }


</script>

<style lang="scss">

    .editor{
        width: 100%;
        //修改工具栏的背景色
        .w-e-bar{
            background: var(--w-e-bar-bg-color);
        }
    }

    // 去除内置样式
    .w-e-text-container blockquote, .w-e-text-container li, 
    .w-e-text-container p, 
    .w-e-text-container td, 
    .w-e-text-container th, 
    .w-e-toolbar *{
        line-height: unset !important;
    }
</style>

到此，简单的wangeditor组件大功告成！