项目中需要使用到wangeditor，这里封装一个自定义组件，便于后期使用。

首先，官方文档：

https://www.wangeditor.com/

1：安装

npm i wangeditor --save

2：组件代码

Wangeditor.vue

<template>
    <div ref=\'editor\' ></div>
    <!-- <button @click=\'syncHTML\'>同步内容</button>
    <div :innerHTML=\'content.html\'></div> -->
</template>
 
<script>
  // 引入js文件
  import Wangeditor from "/@/assets/js/components/pc/Wangeditor";
 
  // 使用js对象
  export default {
    ...Wangeditor,
  };
</script>

Wangeditor.ts

import { onMounted, onBeforeUnmount, ref, watch } from \'vue\';
// 引入wangeditor组件
import WangEditor from \'wangeditor\';
// 引入代码高亮组件
import hljs from \'highlight.js\'
// 公共状态文件
import {  webScoketObject } from "/@/hooks/common";
 
// 官方文档：https://doc.wangeditor.com/
export default {
  name: \'Wangeditor\',
  setup(props: any, content: any) {
    // 获取编辑器实例html
    const editor = ref();
    // 编辑器实例对象
    let instance: any = \'\';
    /**
     * @name: 监听公共状态栏值变化(控制抽屉显示)
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @date: 2021-01-10 
     */
    watch(
      () => webScoketObject.is_click_send,
      () => {
        if (webScoketObject.is_click_send)
        {
          instance.txt.clear();
          webScoketObject.is_click_send = false;
        }
      }
    );
    /**
     * @name: 生命周期函数-----挂载完成
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @date: 2021-01-19 
     */
    onMounted(() => {
      // 编辑器实例对象
      instance = new WangEditor(editor.value);
      //插入代码语言配置
      instance.config.languageType = [
        \'Bash\',
        \'C\',
        \'C#\',
        \'C++\',
        \'CSS\',
        \'Java\',
        \'JavaScript\',
        \'JSON\',
        \'TypeScript\',
        \'Plain text\',
        \'Html\',
        \'XML\',
        \'SQL\',
        \'Go\',
        \'Kotlin\',
        \'Lua\',
        \'Markdown\',
        \'PHP\',
        \'Python\',
        \'Shell Session\',
        \'Ruby\',
        \'typescript\'
      ]
      // 自定义菜单
      instance.config.menus = [
        // \'head\',
        // \'bold\', //字体加粗
        // \'fontSize\',//字号
        // \'fontName\',//字体
        // \'italic\',
        // \'underline\',//下划线
        // \'strikeThrough\',//删除线
        // \'indent\',
        // \'lineHeight\',
        \'foreColor\',
        // \'backColor\',
        \'link\',
        // \'list\',//列表
        // \'todo\',
        // \'justify\',//对其
        // \'quote\',// 引用
        \'emoticon\',
        \'image\',
        // \'video\',//视频
        // \'table\',//表格
        \'code\',
        // \'splitLine\',
        // \'undo\',//撤销
        // \'redo\',//恢复
      ];
      // 代码高亮
      instance.highlight = hljs;
      // 开启本地上传图片(这是后端上传链接)
      instance.config.uploadImgServer = \'/upload-img\';
      // 限制上传图片格式
      instance.config.uploadImgAccept = [\'jpg\', \'jpeg\', \'png\', \'gif\', \'bmp\'];
      // 开启本地上传视频(这是后端上传链接)
      instance.config.uploadVideoServer = \'/api/upload-video\';
      // 设置编辑器高度
      instance.config.height = 150;
      // 设置编辑器页面层级
      instance.config.zIndex = 10;
      // 设置编辑器placeholder
      instance.config.placeholder = \'请输入您的文字！\';
      // 配置编辑器显示颜色
      instance.config.colors = [
        \'#000000\',
        \'#eeece0\',
        \'#1c487f\',
        \'#4d80bf\'
      ];
      // 忽略粘贴内容中的图片
      instance.config.pasteIgnoreImg = true;
 
      Object.assign(instance.config, {
        // wangeditor 值发生变化的时候
        onchange() {
          // 将值传递至父组件
          content.emit(\'getWangEditorValue\', instance.txt.html());
        },
        // 上传网络图片回调
        linkImgCallback(src:string){
          console.log(\'图片 src \', src)
        },
        // 上传网络视频回调
        onlineVideoCallback(video:string) {
          // 自定义回调内容，内容成功插入后会执行该函数
          console.log(\'插入视频内容\', video)
        }
      });
      instance.create();
    });
 
    /**
     * @name: 生命周期函数-----页面卸载之前
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @date: 2021-01-19 
     */
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    return {
      editor,
    };
  },
};

3：调用实例：

<template>
<Wangeditor v-on:getWangEditorValue=getWangEditorValue ></Wangeditor>
</template>
<script lang="ts">
  import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    provide,
    inject,
    onBeforeMount,// 在组件挂载之前执行的函数
    onMounted,
    onBeforeUpdate,// 在组件修改之前执行的函数
    onUpdated,
    onBeforeUnmount,// 在组件卸载之前执行的函数
    onUnmounted,
    nextTick
} from "vue";
 
//导入代码高亮文件
import hljs from \'highlight.js\' 
 
// 引入axios钩子
import axios from "/@/hooks/axios.ts";
 
import { useRouter, useRoute } from "vue-router";
import Wangeditor from "/@/components/pc/Wangeditor.vue";
 
// api 接口文件
import { putComment, getArticleDetail } from "/@/api/pc/articleDetail.ts";
export default {
    name: "articleDetail",
    components: {
        Wangeditor,
    },
    // VUE3 语法 第一个执行的钩子函数
    // setup官方文档
    // https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数
    setup(props: any, content: any) {
        // 实例化路由
        var router = useRouter();
        // 路由参数
        var route = useRoute();
        /**
         * @name: 声明data
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-18
         */
        const data = reactive({
            // 评论内容
            comment_content: \'\',
        });
        
        /**
         * @name: 获取wangeditor数据
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-19 
         */
        const getWangEditorValue = (str:string) => {
            data.comment_content = str;
        } 
        /**
         * @name: 将data绑定值dataRef
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-10
         */
        const dataRef = toRefs(data);
        return {
getWangEditorValue,  
            ...dataRef
        }
    },
    methods: {
 
    }
};
</script>

4：最终效果

有好的建议，请在下方输入您的建议。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序：