vue3中使用WangEditor 富文本编辑器

附官网：https://www.wangeditor.com/

1.安装 + 引入

npm install @wangeditor/editor --save

// 组件中

import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

2.组件template模板中 

 <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
          />
          <Editor
            style="height: 300px; overflow-y: hidden"
            v-model="newsParameterList.news_content"
            @onCreated="handleCreated"
            :defaultConfig="editorConfig"
          />
</div>

// newsParameterList.news_content  为富文本内容绑定

3.具体配置

import {  shallowRef } from "vue";
//编辑器实例，必须用 shallowRef
let editorRef = shallowRef();
let handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 菜单配置项    删除没有太大用途的菜单项
let toolbarConfig = {
  excludeKeys: [
    "insertVideo", // 删除视频
    "uploadVideo",
    "group-video",
    "insertImage", // 删除网络图片上传
    "insertLink", // 删除链接
    "insertTable", // 删除表格
    "codeBlock", // 删除代码块
    "blockquote",
    "todo",
    "emotion",
    "fontSize",
    "fontFamily",
    "lineHeight",
    "group-more-style",
    "color",
    "bgColor",
  ],
};

//编辑器实例，必须用 shallowRef
let editorRef = shallowRef();
let handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const editorConfig = {
  MENU_CONF: {
    uploadImage: {
      server: "/api/upload",
      allowedFileTypes: ["image/*"],
      fieldName: "your-fileName",
      base64LimitSize: 3 * 1024 * 1024,
      // 单个文件的最大体积限制，为 3M
      maxFileSize: 3 * 1024 * 1024,
      maxNumberOfFiles: 1,
      onError(file: any) {
        proxy.$message.warning("当前选择的图片过大！请选择3M以内");
      },
    },
  },
};

4.编辑回显时

//编辑器实例，必须用 shallowRef
let editorRef = shallowRef();
let handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  newsDetails().then(() => {
    if (newEditsList.value.news_content) {
        //回显
      editor.setHtml(newEditsList.value.news_content);
    }
  });
};