手把手教你学vue - 17 - 富文本

高志小鹏鹏
514 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

富文本编辑器作为直接与用户交互的内容输入生产工具，是管理后台一个核心的功能，对大家的项目来说非常重要。面对众多的富文本编辑器，如何挑选适合自己需求的编辑器才是最重要的，下面就跟着小鹏鹏一起体验一番吧

TinyMCE

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。

TinyMCE的优势：

  • 开源可商用，基于LGPL2.1
  • 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
  • 接口丰富，可扩展性强，有能力可以无限拓展功能
  • 界面好看，符合现代审美
  • 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
  • 对标准支持优秀（自v5开始）
  • 多语言支持，官网可下载几十种语言。

Github：github.com/tinymce

功能强大，支持拓展性，多语言平台的首选

Tinymce

核心代码

vue-element-admin已经封装好组件，可以直接使用

tinymce.init({
    selector: '#tinydemo', //容器，可使用css选择器
    language:'zh_CN', //调用放在langs文件夹内的语言包
    toolbar: false, //隐藏工具栏
    menubar: false, //隐藏菜单栏
    inline: true, //开启内联模式
    plugins: [ 'quickbars','link','table' ], //选择需加载的插件
    //选中时出现的快捷工具，与插件有依赖关系
    quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
});

效果图

image.png

tinymce-vue

tinymce 官方也在之前发布了 vue 版本的tinymce-vue，帮你封装好了很多东西，但同时也相对的减少了灵活性，有兴趣的可以自行研究一下。

Quill

Quill是一个跨平台、代码高亮好用的轻量级富文本编辑器

Quill的优势：

  • 由于其 API 驱动的设计，无需像在其他文本编辑器中那样解析 HTML 或不同的 DOM 树；
  • 跨平台和浏览器支持，快速轻便；
  • 通过其模块和富有表现力的 API 完全可定制；
  • 可以将内容表示为 JSON，更易于处理和转换为其他格式；
  • 提供两个主题以快速轻松地更改编辑器的外观。

GitHub：github.com/quilljs/qui…

优缺点十分明显，代码高亮功能简直爽到爆，缺点是功能太少

核心代码

RuoYi已经封装好组件，可以直接使用

 const editor = this.$refs.editor
  this.Quill = new Quill(editor, this.options)
  // 如果设置了上传地址则自定义图片上传事件
  if (this.type === 'url') {
    let toolbar = this.Quill.getModule('toolbar')
    toolbar.addHandler('image', (value) => {
      this.uploadType = 'image'
      if (value) {
        this.$refs.uploadImgRef.dialogVisible = true
      } else {
        this.quill.format('image', false)
      }
    })
  }
  this.Quill.pasteHTML(this.currentValue)

效果图

image.png

wangEditor

wangEditor是一个开箱即用，配置简单，开源的富文本编辑器

wangEditor的优势

  • 开源
  • 轻量简洁
  • 中文文档齐全
  • 不需要二次开发
  • 支持vue和react组件

GitHub：github.com/wangeditor-…

核心代码

eladmin已经封装好组件，可以直接使用

const _this = this
var editor = new E(this.$refs.editor)
// 自定义菜单配置
editor.customConfig.zIndex = 10
// 文件上传
editor.customConfig.customUploadImg = function (files, insert) {
  // files 是 input 中选中的文件列表
  // insert 是获取图片 url 后，插入到编辑器的方法
  files.forEach(image => {
    upload(_this.imagesUploadApi, image).then(res => {
      const data = res.data
      const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
      insert(url)
    })
  })
}
editor.customConfig.onchange = (html) => {
  this.editorContent = html
}
editor.create()
// 初始化数据
editor.txt.html(this.editorContent)

效果图

image.png

Tiptap

Tiptap 是一个基于 Vue 的无渲染的富文本编辑器，它基于 Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件

GitHub：github.com/ueberdosis/…

多人协作的利器

总结

  1. 配置多语言功能首选TinyMCE
  2. 文档要求细腻，专业，首选TinyMCE
  3. 多平台同时使用首选Quill
  4. 适用于不同的技术栈，又不想二次开发，并且支持多功能，选择wangEditor
  5. 多人协作使用Tiptap
avatar
文章
阅读
粉丝