| 富文本编辑器, 杂谈

富文本那些事儿

最近项目开发中有大量遇到使用富文本编辑器的场景，很少接触富文本编辑器，上NPM搜了下，主要推荐有以下两种vue插件：

  • wangEditor
  • quilljs
    考虑到项目时间紧，没有很多时间去研究这个富文本，于是便选择了国人开发的有中文文档的wangEditor

用了一圈wangEditor，发现了几个坑= =
首先是明显感觉wangEditor3相比wangEditor2反而有那么一丢丢退步了，大家用的时候推荐装wangEditor2
比如：

  • 菜单栏不支持换行了，作者说强制换行很丑= =，所以如果需要换行只能自己改CSS了
  • 2.0版本的编辑代码功能和全屏编辑功能也取消了，我觉得这两个功能真的挺好的，不知道作者为什么要取消。如果3.0还想用这两个功能就只能自己实现了。

  • 还有不知道作者是不是图方便，把所有元素的z-index属性都设为了100001，还是行内样式。所以第一次用时，发现我项目的弹窗确认框啥的全被它盖住了

    最后是图片上传那里，一定要仔细看文档

    我在使用图片上传时，起初图片上传成功后也会弹出上传失败，后来发现作者规定了返回参数，只有返回参数是如下这种格式

    1
    {errno:0, data: [...]}

    才能识别上传成功与否，你才能使用他提供的success,error这些钩子。如果你的后端小哥哥并没有给你这种格式的返回数据(比如我这边的后端小哥哥= =),你只能使用自定义配置，作者提供了一个自定义配置的钩子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    customInsert: function (insertImg, result, editor) {
           // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
           // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
           // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
           var url = result.url
           insertImg(url)
           // result 必须是一个 JSON 格式字符串！！！否则报错
       }

看到这里我才恍然大悟，终于解决了图片上传的问题ORZ，所以还是得老实细心看文档啊= =

最后还要感谢wangEditor作者