对Quill富文本插件上传图片修改,调整部分功能

对Quill富文本插件上传图片修改,调整部分功能

因为之前项目中有用到富文本的功能,所以就去研究了一下,富文本插件也挺多 比较推荐的就是quill 和ckeditor ,貌似ckeditor功能更为全面也更大, 但是quill有适配vue的quill-vue版本,而且项目上需要的功能也不是特别复杂所以就选了quill,下面说一些对quill的适配修改吧 ,可能对第一次用人来说会比较蒙蔽.还有一种说法富文本是所有前端组件最复杂最坑的一个,复杂度很高,所以要找到一个稳定靠谱的富文本工具也很难,所以尽量找一些比较靠谱坑少的富文本插件

 import {
   quillEditor, Quill} from 'vue-quill-editor' //引入插件
  const sizeStyle = Quill.import("attributors/style/size") 
  sizeStyle.whitelist = ["12px", "16px", "20px", "24px", "36px", "48px", "60px", "80px"] 
  Quill.register(sizeStyle, true) //配置更多字体大小选项
  const Font = Quill.import('formats/font');
  Font.whitelist = ['Arial', 'serif', 'sans-serif', 'SimSum', 'SimHei', 'YaHei', 'KaiTi', 'FangSong', 'YouYuan']; //引入更多字体
  Quill.register(Font, true);
  
  //由于quill的图片用的是base64的形式嵌入到文章中 ,这样不太符合我们的需求 ,所以对他进行了改造,通过绑定插件的图片上传点击事件来实现真正的图片上传 这里结合了element的上传图片组建 也可以自己写个上传组件
  
   // 图片上传成功回调   插入到编辑器中
      upScuccess(e, file, fileList) {
   
        this.saving = false
        this.fullscreenLoading = false
        let vm = this
        let url = ''
        if (this.uploadType === 'image') {
    // 获得文件上传后的URL地址
          url = this.ur + 'download/' + e.body[0]
        } else if (this.uploadType === 'video') {
   
          url = this.ur + 'download/' + e.body[0]
        }
        if (url != null && url.length > 0) {
    // 将文件上传后的URL地址插入到编辑器文本中
          let value = url
          // API: https://segmentfault.com/q/1010000008951906
          // this.$refs.myTextEditor.quillEditor.getSelection();
          // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
          vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
          value = value.indexOf('http') !== -1 ? value : 'http:' + value
          vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !=