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

0、官网

wangEditor multi editor

1、引入文件

javascript 复制代码
<!--【富文本】第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、页面

javascript 复制代码
 <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、初始化

javascript 复制代码
<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、默认值回显

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

5、效果

相关推荐
hemoo24 分钟前
如何让echart的lengend在指定位置换行
javascript·echarts
哟哟耶耶27 分钟前
Starting again company 03
前端·javascript·vue.js
Chloe_lll35 分钟前
threejs(七)PBR材质
开发语言·javascript·材质
敲敲了个代码1 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
开发语言·前端·javascript·学习·uni-app
傅科摆 _ py2 小时前
Vscode 如何配置远程环境的 ssh 连接
ide·vscode·编辑器·1024程序员节
不一样的少年_3 小时前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__3 小时前
el-table默认排序设置
前端·javascript·vue.js
Aevget4 小时前
DevExpress WinForms v25.1亮点 - 电子表格组件、富文档编辑器全新升级
c#·编辑器·界面控件·devexpress·ui开发·winforms
郑板桥304 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo4 小时前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm