Vue-Quill-Editor插件插入图片的改进

最近在做一个Vue-Clie小项目，使用到了Vue-Quill-Editor这个基于Vue的富文本编辑器插件。这个插件跟Vue契合良好，使用起来比其他的诸如百度UEditor要方便很多，但是存在一个小问题就是Vue-Quill-Editor对于图片上传的处理，它是把图片转换为Base64格式然后上传到后台服务器的，这样做存在的问题就是当图片达到一定大小时，后台存储会有麻烦，理论上使用MySQL数据库存储的话一个字段长度限制在65535左右，最多也不能超过100K，这对于图片上传来说显然是不够用的，所以就需要改进Vue-Quill-Editor。

改进方法是将图片的处理方式修改，不再转换为Base64格式上传，而是先上传到服务器然后再返回图片的Url，让文本编辑器引用这个Url来显示图片。

如何修改Vue-Quill-Editor的按钮面板以及默认处理函数，参考了这位老哥的文章，文章意思大致就是可以通过在 quill-editor 标签中插入标签，利用slot插槽修改默认面板（注意定义面板的div的id设置为“toolbar”了，根据这个id在配置中要指定面板）。通过插入slot的标签修改默认面板之后，还需要在option中修改配置：

data(){
      return {
        length: '',
        editor: {},
        editorOption: { //这个对象用于绑定到options属性
          modules: {
          //  imageImport: true,
          //  imageResize: {
          //    displaySize: true
         //   },
            toolbar: '#toolbar',//配置面板！！！
          }
        },
      }
  }

这一部分参考了另一位老哥的文章,这位老哥主要是讲解了在修改了面板之后的工作：如何定义处理函数，如何把最终的图片插入到文本编辑器中。

这里使用了一个虚拟的file类型的input嵌在一个隐藏的Form表单中上传文件，将其隐藏，通过click()函数触发点击事件。由于需要获取文件上传之后返回来的UUID（通过PHP的uniqid()函数生成），所以不能使用表单上传，必须通过Ajax，这样在成功回调中才可以将图片插入到文本编辑器（如果不这样做，无法保证插入图片之前文件上传已经完成，可能会导致404错误）。但是使用Ajax无法获取form表单的enctype等属性，这样上传到后台之后也会出现错误。解决方案就是使用FormData对象上传，给FormData对象传入form表单DOM就可以了。后台获取文件的方式与表单上传无异。

 

具体如何将图片插入到编辑器中，参考的是这篇文章。

var range = this.$refs.myTextEditor.quillEditor.getSelection();
var length = range.index;
this.$refs.myTextEditor.quillEditor.insertEmbed(length, 'image', imageUrl);

需要修改的是getSelection()函数需要传递一个Boolean类型参数，参数传递为true才能正确获取到range。

转载于:https://www.cnblogs.com/DM428/p/7388162.html