富文本编辑器

官网：https://www.wangeditor.com/v5/getting-started.html
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      ref="toolbar"
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="editorStyle"
      style="height: 400px; overflow-y: hidden"
      ref="wangeditor"
      :value="modelValue"
      :disable="disable"
      :defaultContent="defaultContent"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onChange="onChange"
      @onCreated="onCreated"
    />
  </div>
</template>
    
    <script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Message } from "element-ui";

export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      mode: "default",
      editor: null,
      wangEditorInfo: null,
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
        // excludeKeys:['fullScreen']
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,
        menus: [
          // 其他菜单配置...
          "fontSize", // 字号菜单
        ],
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 图片上传
          uploadImage: {
            server: process.env.VUE_APP_BASE_API + "/system/file/upload",
            fieldName: "file",
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ["image/*"],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
              // file:''
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers: {
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 10 * 1000, //10 秒

            // 上传前
            onBeforeUpload(files) {
              Message({
                message: "图片正在上传中,请耐心等待",
                duration: 0,
                customClass: "uploadTip",
                iconClass: "el-icon-loading",
                showClose: true,
              });
              return files;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              Message.closeAll();
              if (res.code === 1) {
                Message.success({
                  message: `图片上传成功`,
                });
              } else {
                Message.error({
                  message: `图片上传失败，请重新尝试`,
                });
              }
              insertFn(res.data.url, res.data.name, res.data.path);
            },

            // 单个文件上传成功之后
            onSuccess(file, res) {},

            // 单个文件上传失败
            onFailed(file, res) {},

            // 上传进度的回调函数
            onProgress(progress) {
              // progress 是 0-100 的数字
            },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
            },
          },
          // 视频上传
          uploadVideo: {
            fieldName: "file",
            server: process.env.VUE_APP_BASE_API + "/system/file/upload",

            // 单个文件的最大体积限制，默认为 10M
            maxFileSize: 100 * 1024 * 1024, // 100M

            // 最多可上传几个文件，默认为 5
            maxNumberOfFiles: 3,
            // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ["video/*"],

            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
            },

            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers: {
              // Accept: 'text/x-json',
              // otherKey: 'xxx'
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 30 秒
            timeout: 1000 * 1000, // 1000 秒,
            // 上传之前触发
            onBeforeUpload(file) {
              Message({
                message: "视频正在上传中,请耐心等待",
                duration: 0,
                customClass: "uploadTip",
                iconClass: "el-icon-loading",
                showClose: true,
              });
              return file;
            },
            // 自定义插入视频
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              Message.closeAll();
              if (res.code === 1) {
                Message.success({
                  message: `视频上传成功`,
                });
              } else {
                Message.error({
                  message: `视频上传失败，请重新尝试`,
                });
              }
              insertFn(res.data.url, res.data.path);
            },
            // 上传进度的回调函数
            onProgress(progress) {
              // progress 是 0-100 的数字
            },

            // // 单个文件上传成功之后
            // onSuccess(file, res) {
            //   console.log(`${file.name} 上传成功`, res);
            //   this.successMsg(file);
            // },
            //
            // // 单个文件上传失败
            // onFailed(file, res) {
            //   console.log(`${file.name} 上传失败`, res);
            //   this.errorMsg(file);
            // },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
              Notification.error({
                title: "错误",
                message: `${file.name} 上传失败，请重新尝试`,
              });
            },
          },
          //字体设置
          fontSize: {
            fontSizeList: ["12px", "13px","14px","15px","16px", "18px", "19px","21px", "24px","29px","32px","40px","48px"],
            // defaultFontSize: "21px", // 默认字号为 21px
          },
          lineHeight: {
            lineHeightList: ["1", "1.5", "2", "2.5"],
          },
          fontFamily: {
            fontFamilyList: [
              "黑体",
              "楷体",
              "仿宋",
              "Arial",
              "Tahoma",
              "Verdana",
              "FZ FangSong GBK",
            ],
          },
        },
      },
        //更改默认字体
      defaultContent: [
        {
          children: [
            {text:'',fontFamily:'FZ FangSong GBK',fontSize:'21px'}
          ]
        }
      ]
    };
  },
  model: {
    prop: "modelValue",
    event: "change",
  },
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    isClear: {
      type: Boolean,
      default: false,
    },
    hideToolBar: {
      type: Boolean,
      default: false,
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.wangEditor.txt.clear();
        this.wangEditorInfo = null;
      }
    },
    // modelValue: {
    //   handler(newVal){
    //     console.log(newVal,'传递的数据')
    //   }
    // }
  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错     
     // @wangeditor/editor-for-vue如何获取配置工具信息
      console.log(editor.getConfig());
      console.log(config);
    },
    onChange(editor) {
      if (this.disable) {
        this.editor.disable();
      }
      this.$emit("change", editor.getHtml()); // 将内容同步到父组件中
      // console.log("change", this.wangEditorInfo); // onChange 时获取编辑器最新内容
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;

      console.log(editor.getText()); // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;

      console.log(editor.getHtml()); // 执行 editor API
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>
    
    <style src="@wangeditor/editor/dist/css/style.css"></style>