关于文本编辑器的选型与参考

目前各项目中的文档编辑功能都用到了文本编辑器，目前使用的为mavon-editor,普遍反映不好使用，所以近期对文本编辑器做了一些简单的调研，后续还将继续补充完善

一.markdown类型文本编辑器选型

1.mavon-editor

mavon-editor是一款基于vue的markdown编辑器，比较适合博客系统。（demo地址）（文档地址）
优点：
a. 与vue很好进行匹配，写起来没有语言障碍，开发速度快
b. 功能齐全，包括全屏，背景色等辅助功能也有，无需做太多二次开发
c. 已经有插件支持集成emoji
缺点：
a. 图片的添加需要自行写上传处理的代码
b. 没有所见即所得模式，对于不熟悉markdown语法的开发人员不友好
c. 没有直接展示markdown语法的功能，需要借助其他插件进行展示

2.tui.editor

Markdown所见即所得编辑器-高效且可扩展（demo地址）（文档地址）
优点：
a. 所见即所得的编辑模式，非开发人员也能轻松编写文档
b. 插入图片课转换成base64，无需二次开发
c. 可选editor和viewer两种模式，一个组件包括了编辑和展示两个功能
缺点：
a. 功能没有mavon-editor多，仅能满足基本常用功能
b. emoji等功能需要自行开发

目前暂时使用的是基于此插件做的markdown编辑器。
自定义功能：

1. 增加emoji：
   遍历emojiJSON列表转成文本格式：

const list = Object.values(emojiJson).map(v => {
     
        return `
&#x${
       v[0].substring(2)};
`
      })

添加点击事件：

const $root = this.editor.getUI().$el
$root.on('click', '.emoji-icon', (e) => {
     
        this.editor.insertText(e.target.innerHTML)
      })

将emoji按钮加入toolbar:

const toolbar = this.editor.getUI().getToolbar()
const emoji = `

                        
                        

                          ${
       list.join('')}
                        
                      
`
toolbar.addItem({
     
  type: 'button',
  options: {
     
    name: 'customize',
    $el: $(emoji)
  }
})

设置样式：

.emoji {
     
        position: relative;
        z-index: 1;
        width: 22px;
        height: 22px;
        display: inline-block;
        border-radius: 0;
        margin: 5px 3px;
        padding: 3px;
        border: 1px solid #fff;
        cursor: pointer;

        &:hover {
     
          .emoji-list {
     
            display: block;
          }
        }

        .icon {
     
          display: inline-block;
          width: 100%;
          height: 100%;
          background-image: url(./images/emoji.png);
          background-repeat: no-repeat;
          background-size: 110%;
          background-position: center;
        }

        .emoji-list {
     
          position: absolute;
          top: 22px;
          right: 0;
          overflow: auto;
          display: none;
          margin-left: -150px;
          padding: 5px;
          width: 300px;
          height: 260px;
          background: #fff;
          box-shadow: 0 0 10px 0 @lineNormal;
          border: 1px solid @lineNormal;

          li {
     
            float: left;
            width: 20px;
            height: 20px;
            overflow: hidden;
            text-align: center;

            &:hover {
     
              border: 1px solid #aaa;
            }
          }
        }
      }

2. 增加全屏功能
添加点击事件：

const $root = this.editor.getUI().$el
$root.on('click', '.fullscreen', function() {
     
        $(this).addClass('exit-fullscreen')
        toggle.requestFullScreen($root[0])
      })
$root.on('click', '.exit-fullscreen', function() {
     
   toggle.exitFullScreen($root[0])
   $(this).removeClass('exit-fullscreen')
 })

将全屏按钮加入toolbar:

const fullscreen = `full`
      toolbar.addItem({
     
        type: 'button',
        options: {
     
          name: 'fullscreen',
          tooltip: '全屏/非全屏',
          $el: $(fullscreen)
        }
      })

设置样式：

.fullscreen {
     
        background-image: url(./images/fs.png);
        background-repeat: no-repeat;
        background-size: 14px 14px;
        background-position: center;

        &.exit-fullscreen {
     
          background-image: url(./images/exit-fs.png);
        }
      }

3. 增加图片查看器：
目前采用的思路是在初始化或添加图片至dom后对已有的图片html进行带viewer组件的jquery替换

parseImg() {
     
      setTimeout(() => {
     
        $('.tui-editor-contents').find('img:not(.viewer-image)').each((i, v) => {
     
          const markedVue = new Vue({
     
            components: {
     
              Viewer
            },
            data() {
     
              return {
     
                image: v.src
              }
            },
            template: ``
          }).$mount()
          $(v).replaceWith(markedVue.$el)
        })
      }, 500)
    }

在配置hooks中的图片处理回调中添加处理方法

hooks: {
     
          addImageBlobHook: (file, callback) => {
     
            const myFormData = new FormData() // 根据获取到的form节点创建formdata对象
            myFormData.append('file', file) // 后台即可根据此name捕获到前台发送的数据或文件
            axiosFile.post(API_USER.saveFile, myFormData).then(res => {
     
              const data = res.data
              if (data.code === 200) {
     
                callback(data.data, file.name)
                this.parseImg()
              } else {
     
                this.$Message.error('上传失败，请稍后重试')
              }
            })
          }
        }

3.simplemde-markdown-editor
与tui.editor功能相似，但很久没有维护和更新（demo地址）（文档地址）
4.Markdeep
Markdeep是一种用于编写纯文本文档的技术，无论在本地还是远程的web浏览器中都可以使用它（demo地址）（文档地址）
优点：
a. 无需任何组件或插件安装
b. 可以离线操作
缺点：
a. 只能用markdown语法编写
b. 每次显示需要生成一个.md.html文件嵌套在项目中
5.Marked
类似于marvon-editor，但是编译速度更快，更加轻量级（demo地址）（文档地址）
6.editor.md
Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。（demo地址）（文档地址）

二.富文本

1.slate

Slate 是一个完全可定制的富文本编辑框架，语雀现在有的编辑器是基于此自主研发的，但未开源（demo地址）（文档地址）
优点：
a. 支持深度定制化
b. 可输出html和markdown两种语言
c. 可以写作编辑
缺点：
a. Slate官方和React基本是集成在一起的和语雀技术栈也比较一致，所以要对react有一定熟练程度，不然无法做到自定义开发
b. 目前团队内掌握react的人不多，开发起来时间和人力成本较高

2.UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，允许自由使用和修改代码（demo地址）（文档地址）

3.wangEditor

基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费（demo地址）（文档地址）

4.bootstrap-wysiwyg

bootstrap-wysiwyg 为Bootstrap定制的微型所见即所得富文本编辑器（文档地址）

5.CKEditor

具有协作编辑功能的所见即所得编辑器组件
（demo地址）（emoji地址）（文档地址）