vue3+wangeditor

版本

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

html中

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

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

export default defineComponent({
  components: { Editor, Toolbar },
  setup() {
       /*---------------富文本编辑器-----------*/
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    // 内容 HTML
    const valueHtml = ref("");
    const toolbarConfig = {};
    const editorConfig = { placeholder: "请输入内容..." };
    const handleCreated = (editor: any) => {
      editorRef.value = editor;
    };
     onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
  }
     return {
      /*富文本*/
      editorRef,
      valueHtml,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
     }
  })