vue3 wangeditor V5 不用VUE3组件

<template>
 <div style="border: 1px solid #ccc">
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
      </div>
</template>
 
import {
    createEditor,
    createToolbar,
} from "@wangeditor/editor";
    
   
  ...省略...

let editor = null;
let toolbar;
onMounted(() => {
    nextTick(() => {
        console.log("props.info", props.info);
        cEditor([]);
    });
});
function cEditor(value) {
    // 创建编辑器

    editorConfig.placeholder = "请输入内容";
    editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时,即触发

        if (editor == null) return;
        let html = editor.getHtml();
        let content = JSON.stringify(editor.children);
        console.log("content", content, html);
        context.emit("change", {
            html,
            content,
        });
    };
    editor = createEditor({
        selector: "#editor-container",
        config: editorConfig,
        content: value, // 默认内容,下文有解释
        mode: "default", // 或者 'simple' ,下文有解释
    });
    // 创建工具栏
    toolbar = createToolbar({
        editor,
        selector: "#toolbar-container",
        mode: "default", // 或者 'simple' ,下文有解释
    });
}
 
 
 
原文地址:https://www.cnblogs.com/zhaoyun4122/p/15813755.html