wangEditor的基本使用及踩坑记录

前言

最近写项目用到了富文本编辑器，在同事的建议下，采用了wangEditor3，在此记录下使用wangEditor3的基本步骤以及遇到的一些问题

 

基本使用

基本使用步骤原作者已讲的非常详细，如有需要，移步----->wangEditor3使用手册

下载

• 直接下载：https://github.com/wangfupeng1988/wangEditor/releases
• 使用npm下载：npm install wangeditor（注意wangeditor全部是小写字母）
• 使用bower下载：bower install wangeditor（前提保证电脑已安装了bower）
• 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

使用

    
    


    

        
欢迎使用 wangEditor 富文本编辑器
    

    
    
    

基本效果

踩坑记录

坑1：我的项目需求是点击编辑按钮切换当前box内的子div，以显示编辑器（editor）or普通页面内容（content），此处使用hogan语法，当用户点击编辑按钮改变isEditor（bool类型）的值，然后页面根据isEditor的值来决定显示编辑器or普通页面内容。但是按照上面的创建wangEditor的步骤，老是报错，错误信息如下：

addRange(): The given range isn't in document.

如下是我的HTML结构：

    
    {{#isEditor}}
    

        {{{content}}}
    
    {{/isEditor}}
    {{^isEditor}}
    

        {{{content}}}
    
    {{/isEditor}}

解决：报这个错误的根本是editor这个节点尚未渲染，就会报range错误。根据网上的提示说将代码放在window.onload = function (){}中，试过没有起作用，仍然报错。不过这倒是给了我一点启发，既然创建wangEditor时DOM尚不存在，那么将创建编辑器的代码放在异步队列里，等到执行时DOM总该渲染完毕了吧？于是乎，我把代码放在了setTimeout定时器函数中，OK，效果实现了，编辑器也出来了。

// 页面渲染完成之后再加载wangEditor
setTimeout(function(){
    var editor = new wangEditor(".box .editor")
    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'undo',  // 撤销
        'redo'  // 重复
    ]
    editor.create()
    that.option.editor = editor
},0)

坑2：当用户编辑完当前内容时，需要将编辑器内此时的内容发送给后台服务器以处理并保存，之后在通过请求将编辑后的内容回填到box下的content div中。但此时观察浏览器控制台中elements节点会发现，节点树上div.content的子元素中很可能多了一些内容为空的空标记，如

。

出现这种现象的原因是，当用户在编辑器里删除了原先存在的段落，从编辑器和页面上呈现出的效果来看是没有任何问题的，此时应注意被删除的段落文字是没有了，但包含其文字内容的标记仍然存在，未被删除掉。

不知道这种情况是我的使用步骤出了问题，还是编辑器本身的一个小bug，如有了解的，望告知，3Q~

!tips：使用如下语句获取编辑器内容

editor.txt.html()

解决：因为获取到的编辑器内容是字符串形式，故在获取到内容后，采用正则表达式去掉字符串中的"空标记"。

content.replace(/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig,"")

亲测有效，不过要是有更好的解决办法，欢迎讨论~

上述正则表达式参考链接：js 如何正则匹配没有内容的空标签并移除掉?

补充（20190822）：

后续在使用时遇到一个很头疼的问题：从后台服务器接收存入的html时，使用hogan渲染到页面，老是会把父元素的兄弟元素莫名其妙包进去，即本来的文档结构应该如下：

    

        {{{content}}}
    


    

但实际上渲染出来可能就变成：

    

        {{{content}}}
        

            

        
    

仔细检查了一下，并不是content内部标签没闭合的问题，但经过我的实践，在原{{{content}}}的位置放上一个空的div，然后再用js/jq将content内容添加到这个div节点上去（也就是不要通过hogan渲染上去）即可解决。

HTML：

JQ：

$(".parent1 div").html(content)