官网其实写的很清楚，入门非常快 wangeditor官网地址
项目是基于vue3+TS，所以用的是wangEditor 5的版本，主要是设置了上传图片&视频

安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

引入

import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IEditorConfig } from '@wangeditor/editor';

HTML

<div style="border: 1px solid #ccc">
  <Toolbar
    style="border-bottom: 1px solid #ccc"
    :editor="editorRef"
    :defaultConfig="toolbarConfig"
     mode="default"
  />
  <Editor
    style="height: 500px; overflow-y: hidden;"
    v-model="valueHtml"
    :defaultConfig="editorConfig"
    mode="default"  // 或 'simple'
    @onCreated="handleCreated"
  />
</div>

上传图片用的是自定义上传，若你接口的返回格式不是严格按照它的要求，都是用不了它自带的上传图片

1682664629475.jpg

script

<script>
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IEditorConfig } from '@wangeditor/editor';
import { onBeforeUnmount, ref, shallowRef, defineComponent } from 'vue'
// 声明类型
type InsertFnType = (url: string, alt: string, href: string) => void;
type InsertFnVideoType = (url: string, poster: string) => void

export default defineComponent{
  components: {
    Editor,
    Toolbar,
  },
  setup() {
    const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
    const valueHtml = ref('<p>hello</p>'); // 内容 HTML
    const toolbarConfig = {};
    const editorConfig: Partial<IEditorConfig> = {
      placeholder: '请输入内容...',
      MENU_CONF: {},
    };
    // 上传图片，修改 uploadImage 菜单配置
    // editorConfig.MENU_CONF['uploadImage'] = { // 官网是这样写的
    editorConfig.MENU_CONF!.uploadImage = { // 项目设置了eslint，所以我是这种写法
      // 自定义上传
      async customUpload(file: File, insertFn: InsertFnType) {
        // file 即选中的文件
        const formData = new FormData();
        formData.append('file', file);
        // 自己实现上传，并得到图片 url alt href
        const res = await getUploadFile(formData); // 自己的接口
        if (res.status === 200) {
          // 最后插入图片
          // insertFn(url, alt, href);// 图片 src (必须)，图片描述文字，图片的链接
          insertFn(res.data[0].filePath, res.data[0].fileName, res.data[0].filePath);
        }
      },
    };

    // 视频
    editorConfig.MENU_CONF!.uploadVideo = {
      // 自定义上传
      async customUpload(file: File, insertFn: InsertFnVideoType) {
        // file 即选中的文件
        const formData = new FormData();
        formData.append('file', file);
        // 自己实现上传，并得到视频 url poster；
        const res = await getUploadFile(formData); // 自己的接口
        // 最后插入视频
        if (res.status === 200) {
          // insertFn(url, poster); url(视频 src,必须) poster(视频封面图片 url,可选)；
          insertFn(res.data[0].filePath, '');
        }
      },
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    });
    const handleCreated = (editor: any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    };

    return {
      editorRef,
      valueHtml,
      toolbarConfig,
      editorConfig,
      handleCreated
    };
  }
}
</script>  

设置禁用

// 富文本编辑器-禁用
const editor = editorRef.value;
if (editor == null) return;
editor.disable();