wangEditor富文本轻量使用及多个编辑器

0、官网

wangEditor multi editor

1、引入文件

<!--【富文本】第1步，引入-->
<link rel="stylesheet" href="/wangeditor/style.css"/>
<script charset="utf-8" src="/wangeditor/index.js"></script>
<script charset="utf-8" src="/wangeditor/mammoth.browser.min.js"></script>

2、页面

 <div class="edit-item"><label class="title">描述：</label><textarea name="desc" id="modelDesc"maxlength="5000" placeholder="请输入描述" style="visibility:hidden; width: 1px;"></textarea><!-【富文本】第2步，页面-1--><div id="editor—wrapper-1" style="border: 1px solid #ccc;"><div id="toolbar-container-1"><!-- 工具栏 --></div><div id="editor-container-1" style="height: 200px;"><!-- 编辑器 --></div></div>
</div>

3、初始化

<script>/*-----【富文本】第3步,初始化 开始----*/const E = window.wangEditor;const toolbarConfig = {excludeKeys:['group-image','insertLink','insertImage','insertVideo','insertTable','codeBlock','fullScreen','todo']}/* 第一个编辑器 */const editor1 = E.createEditor({selector: '#editor-container-1',html: '<p><br></p>',config: {placeholder: '在此处输入...',autoFocus: false,onChange(editor) {const html = editor.getHtml()console.log('editor content', html)// 也可以同步到 <textarea>$('#modelDesc').val(html)},},mode: 'simple',});const toolbar1 = E.createToolbar({editor: editor1,selector: '#toolbar-container-1',config: toolbarConfig,mode: 'simple',});/* 第二个编辑器 */const editor2 = E.createEditor({selector: '#editor-container-2',html: '<p><br></p>',config: {placeholder: '在此处输入...',autoFocus: false,onChange(editor) {const html = editor.getHtml()console.log('editor content', html)// 也可以同步到 <textarea>$('#modelRemark').val(html)},},mode: 'simple',});const toolbar2 = E.createToolbar({editor: editor2,selector: '#toolbar-container-2',config: toolbarConfig,mode: 'simple',});/*-----【富文本】第3步,初始化 结束----*/</script>

4、默认值回显

  /*** 回显值* @param desc* @param remark*/function showWangEditValue(desc, remark){/*  【富文本】第4步，回显 */editor1.setHtml(desc);editor2.setHtml(remark);}

5、效果