vue富文本编辑器

vue富文本编辑器

Vue-Quill-Editor

主流富文本编辑器对比

前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。

1. wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。

2. UEditor（百度）优势：插件多，基本曼度各种需求，由百度web前端研发部开发。缺点：插件提交较大，网页加载速度相对就慢了些。使用复杂。属于前后端不分离插件。在使用时需要配置后端的一些东西，使用不便。

1. Kindeditor （） 优势：文档齐全，为中文，阅读方便。缺点：图片上传存在问题，上传历史过多，会全部加载，导致浏览器卡顿。

2. 补充：Tinymce也是一款不错的富文本编辑器，种植，各有优势和劣势，关键是选择一款最适合的就好。因为笔者在开发vue，所以直接使用vue-quill-editor较为方便些。具体看情况使用。

vue-quill-editor基本配置

npm install vue-quill-editor -s

main.js中引入

  import VueQuillEditor from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  Vue.use(VueQuillEditor);

使用

 需要注意的是toolbar的配置

 

  1. 只需要填写功能名的    

 加粗 - bold；

     斜体 - italic

     下划线 - underline

     删除线 - strike

     引用- blockquote

     代码块 - code-block

     公式 - formula

     图片 - image

     视频 - video

     清除字体样式- clean

     这一类的引用 直接['name','name']这种格式就好了

  2. 需要有默认值的

 标题 - header 

  [{ 'header': 1 }, { 'header': 2 }] 值字体大小
 
  列表 - list
  [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
 
  上标/下标 - script
  [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super
 
  缩进 - indent
  [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
 
  文本方向 - direction
  [{'direction':'rtl'}]

结构 

汉化

汉化只需要更改toolbar工具栏中的样式即可实现

实现以上配置后就可以看到效果如图：

以上就是vue-quill-editor的基本配置了。

 

图片上传的配置

因为图片这块，大多情况下，我们都不需要base64格式的，所以我们需要将图片通过OSS换取网络路径然后发送给后端和回显

更换quill-editor的点击事件为自定义事件

这里借助element-ui的图片功能，因为其功能齐全，图片上传前，上传后，都有交互效果的处理，所以可以选择性使用

 editorOption: {
      modules: {
          toolbar: {
              handlers: {
                  image: function(value) {
                      if (value) {
                          // 触发input框选择图片文件
                          document.querySelector(".avatar-uploader input").click();//自定义元素的点击事件
                      } else {
                          this.quill.format("image", false);
                      }
                  },
                      // link: function(value) {
                      //   if (value) {
                      //     var href = prompt('请输入url');
                      //     this.quill.format("link", href);
                      //   } else {
                      //     this.quill.format("link", false);
                      //   }
                      // },
              }
          }
      }
  },

而后在自定义的元素上写入点击事件，然后将该元素隐藏掉。点击quill-editor的图片上传时，实际点击了自定义的图片上传，而后在返回网络路径后将图片插入富文本编辑器即可。

插入返回的网络图片路径(这里借助的是element-ui)

uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code == 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, "image", res.url);
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
      },

以上就是主要思路及代码，如果还是不懂就看下面vue组件的源码（也可直接使用，前提是下载了element-ui）

组件封装源码及引用

  
 
  
引入：
  
  
  

 

VUE组件封装