zoukankan      html  css  js  c++  java
  • 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' ,下文有解释
        });
    }
     
     
     
  • 相关阅读:
    ssm框架搭建
    属性注入
    布隆过滤器
    浅谈动态规划
    双指针技巧汇总
    详解二分查找算法
    java内存模型的实现
    JVM内存结构、Java内存模型和Java对象模型
    浅谈动态规划以及相关的股票问题
    了解重构
  • 原文地址:https://www.cnblogs.com/zhaoyun4122/p/15813755.html
Copyright © 2011-2022 走看看