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模板中


 "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"
          />

// 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);
    }
  });
};