记录一下第一次使用v4版本wangEditor

1.引用edit.css，edit.js ，

额外的样式

 #editor—wrapper {

            border: 1px solid #808080;

            z-index: 100;/* 按需定义 */

}

#toolbar-container {

            border-bottom: 1px solid #808080;

}

#editor-container {

            height: 600px;

}

2.设置展示容器

  <div id="editor—wrapper">

        <div id="toolbar-container"><!-- 工具栏 --></div>

        <div id="editor-container"><!-- 编辑器 --></div>

    </div>

3.js主要工作的代码

    const { createEditor, createToolbar,E } = window.wangEditor

    const editorConfig = {

       // placeholder: '输入文字....', 

        onChange(editor) {

            const html = editor.getHtml()

        }

    }

    const editor = createEditor({

        selector: '#editor-container',

        html: '<p>这是需要填充的数据</p>', //默认填充数据

        config: editorConfig,

        mode: 'simple', // or 'default' 有右击弹出修改工具栏

    })

   

    const toolbarConfig = {

　　//删除工具集上的某一项

        excludeKeys: ['group-more-style','bulletedList','numberedList','todo','insertLink','group-image','group-video','insertTable','codeBlock','divider','emotion']

    }

    const toolbar = createToolbar({

        editor,

        selector: '#toolbar-container',

        config: toolbarConfig,

        mode: 'default', // or 'simple'

    })

后面其他参数用到在补充