目前接触到的编辑器有三种
1、tinymce-editor
2、@wangeditor/editor-for-vue
3、vue-quill-editor

现在主要介绍一下这三种编辑器的用法

tinymce-editor

@wangeditor/editor-for-vue

编辑器样式，这个样式还是比较好看的，功能也比较好用

image.png

1、首先下载插件

yarn add  @wangeditor/editor  // 下载版本是^5.1.23
yarn add  @wangeditor/editor-for-vue   //下载版本是 1.0.2
yarn add  @wangeditor/plugin-upload-attachment // 上传附件插件 ^1.1.0

2、封装使用

//封装富文本编辑器
<template>
  <div :class="{ 'border-line': border }">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      :style="{ height }"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>
<script>
import Vue from "vue";
import { Boot } from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import axios from "axios ";

Boot.registerModule(attachmentModule);

export default {
  components: { Editor, Toolbar },
  props: {
    //border
    border: {
      type: Boolean,
      default: false,
    },
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    // 高度
    height: {
      type: String,
      default: () => "500px",
    },
  },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["fullScreen"],
        insertKeys: {
          index: 24,
          keys: ["uploadAttachment"],
        },
      },
      editorConfig: {
        placeholder: "请输入内容...",
        scroll: false,
        MENU_CONF: {
          uploadImage: {
            // 自定义上传图片 方法
            customUpload: this.uploadImg,
            // 上传接口设置文件名
            fieldName: "file",
            meta: {
              token: localStorage.getItem("token"),
            },
          },
          uploadVideo: {
            customUpload: this.uploadVideo,
            fieldName: "file",
            meta: {
              token: localStorage.getItem("token"),
            },
          },
          uploadAttachment: {
            customUpload: this.uploadFile,
            fieldName: "file",
            meta: {
              token: localStorage.getItem("token"),
            },
          },
        },
        hoverbarKeys: {
          attachment: {
            menuKeys: ["downloadAttachment"],
          },
        },
      },

      mode: "default", //default or 'simple'
    };
  },
  watch: {
    value: {
      handler(val) {
        this.html = val;
      },
      immediate: true,
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onChange(editor) {
      this.$emit("input", this.html);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    uploadImg(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      commonAxios({
        url: `/fileUpload`,
        data: imgData,
        method: "post",
        headers: {
          Authorization:  localStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.success) {
          insertFn(`图片url`);
        } else {
          this.$message.warning(res.errorMessage);
        }
      });
    },
    uploadVideo(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      commonAxios({
        url: `/fileUpload`,
        data: imgData,
        method: "post",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.success) {
          insertFn(`视频url`);
        } else {
          this.$message.warning(res.errorMessage);
        }
      });
    },
    uploadFile(file, insertFn) {
      let imgData = new FormData();
      imgData.append("file", file);
      commonAxios({
        url: `/fileUpload`,
        data: imgData,
        method: "post",
        headers: {
          Authorization:  localStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.success) {
          insertFn(
            `附件:${res.resultData.elementName}`,`下载url`);
        } else {
          this.$message.warning(res.errorMessage);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.border-line {
  border: 1px solid #d6d6d6;
}
/deep/.w-e-scroll > div:first-child {
  height: 100%;
  overflow-y: auto;
}
</style>

<template>
<editor v-model="content" height="300px" :border="true" />
</template>
<script>
import editor from "./components/editor.vue";
export default{
  components: {
    editor,
  },
  data(){
    content:''
  }
}
</script>

这样一个双向绑定的富文本编辑器就可以使用了！

vue-quill-editor

这个富文本内容没有上一个多，其中图片和视频也是要自己写上传逻辑

image.png

1、下载插件

yarn add vue-quill-editor
yarn add quill-image-resize-module //调整大小组件
yarn add quill-image-drop-module //拖动加载图片组件

2、封装

<template>
  <w-spin :spinning="loading" tip="上传中...">
    <quill-editor
      ref="myQuillEditor"
      v-model="editorContent"
      :options="editorOption"
      @change="onEditorChange($event)"
      @click.native="handleEditAblequestion"
    />
  </w-spin>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
// 富文本图片大小
import imageResize from "quill-image-resize-module"; // 调整大小组件。
import { ImageDrop } from "quill-image-drop-module"; // 拖动加载图片组件。
Quill.register("modules/imageResize", imageResize);
Quill.register("modules/imageDrop", ImageDrop);

export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      loading: false,
      editorContent: "",
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
              [{ list: "ordered" }, { list: "bullet" }], //列表
              [{ script: "sub" }, { script: "super" }], // 上下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              // [{ size: ["small", false, "large", "huge"] }], // 字体大小
              // [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
              [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
              // [{ font: [] }], //字体
              [{ align: [] }], //对齐方式
              // ["clean"], //清除字体样式
              ["image", "video"], //上传图片、上传视频
            ],
            handlers: {
              video: () => {
                this.openFileDialog("video");
              },
            },
          },
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
        placeholder: "输入内容...",
      },
    };
  },
  watch: {
    value: {
      handler(newValue) {
        this.editorContent = newValue === null ? "" : newValue;
      },
      deep: true,
      immediate: true,
    },
    editorContent(newValue) {
      this.$emit("input", newValue);
    },
  },
  mounted() {
    this.resetFocus();
  },
  methods: {
    resetFocus() {
      this.$refs.myQuillEditor?.quill?.enable(false);
      // this.$nextTick(() => {
      //   document.querySelector(".content-b").scrollTop = 0;
      // });
    },
    onEditorChange() {
      // console.log(e);
    },
    handleEditAblequestion() {
      this.$refs.myQuillEditor.quill.enable(true);
      this.$refs.myQuillEditor.quill.focus();
    },
    openFileDialog(type) {
      var input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("accept", type === "image" ? "image/*" : "video/*");
      input.click();
      let that = this;
      input.onchange = async function () {
        var file = input.files[0];
        const formData = new FormData();
        formData.append("file", file);
        try {
          that.loading = true;
          let res = await that.$axios.post(`上传接口`, formData, {
            headers: {
              "content-type": "multipart/form-data",
            },
          });
          let url = `返回的url`;
          that.$refs.myQuillEditor.quill.insertEmbed(that.$refs.myQuillEditor.quill.getSelection().index, "video", url);
        } catch (err) {
          console.log(err);
        } finally {
          that.loading = false;
        }

        // // 这里可以添加上传逻辑，例如使用 FormData 上传到服务器
        // // 但是请注意，直接上传到服务器的代码不在这里展示

        // // 如果只是要在编辑器中插入视频，可以直接使用 file URL
        // if (URL && URL.createObjectURL && type === "video") {
        //   console.log(URL.createObjectURL(file));
        //   console.log(that.$refs);
        //   that.$refs.myQuillEditor.quill.insertEmbed(
        //     that.$refs.myQuillEditor.quill.getSelection().index,
        //     "video",
        //     URL.createObjectURL(file)
        //   );
        // }
      };
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ql-editor {
  height: 100px;
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

/deep/.ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

/deep/.ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>

3、使用

<template>
  <Editor v-model="content" />
</template>
<script>
import Editor from "@/components/Editor";
export default {
  components: {  Editor },
  data(){
      content:''
  }
}
</script>

参考文档

https://www.wangeditor.com/
https://blog.csdn.net/m0_57442975/article/details/134261247
https://www.jianshu.com/p/9d0aba0ff8ae