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

最新推荐文章于 2024-08-09 07:21:53 发布

AwesomeCPA

最新推荐文章于 2024-08-09 07:21:53 发布

阅读量915

点赞数

分类专栏：前端文章标签： markdown javascript vue.js

本文链接：https://blog.csdn.net/cpa0701/article/details/104770553

版权

前端专栏收录该内容

79 篇文章 4 订阅

订阅专栏

目前各项目中的文档编辑功能都用到了文本编辑器，目前使用的为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编辑器。
自定义功能：

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

const list = Object.values(emojiJson).map(v => {
        return `<li class="emoji-icon">&#x${v[0].substring(2)};</li>`
      })

添加点击事件：

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 = `<div class="emoji">
                        <i class="icon"></i>
                        <ul class="emoji-list">
                          ${list.join('')}
                        </ul>
                      </div>`
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 = `<button class="fullscreen">full</button>`
      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: `<viewer :options="{toolbar: false, title: false, navbar: false}" :images="[image]"  ><img :src="image" class="viewer-image"></viewer>`
          }).$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的人不多，开发起来时间和人力成本较高