【vue】 vue-quill-editor 使用方便的富文本插件，结合elementui的使用图片路径上传

不知不觉这么快就到了七月末，记录一下这个月印象比较深的学到用到的一个插件吧，坚持每个月写个一篇，感觉起码没白过。
一开始并不清楚这个富文本组件的相关使用，网上也没有很详细的一些使用介绍说明。迷迷糊糊看了好多别人的文章，之后结合自己实践进行总结一下。

vue-quill-editor 安装、相关配置和属性（觉得真的很详细很清晰）：https://www.cnblogs.com/ZaraNet/p/10209226.html

vue-quill-editor 结合element-ui上传图片：https://github.com/NextBoy/skill/issues/2

开发过程中遇到的问题：

1. 工具栏设置

一开始迷茫的是当我根据网上的文档引入 quill-editor 组件之后，工具栏 modules 为什么要这样设置，modules是要放在哪里，根据什么设置？

	
	

	editorOption: {
          modules: {
            toolbar:[
                ['bold', 'italic', 'underline'],
			    ['blockquote', 'code-block'],
			    [{ 'header': 1 }, { 'header': 2 }],
			    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
			    ['link', 'image']
          ]},
          handlers: {},
          placeholder: "一开始提示文本"
	}

查看了一下 vue-quill-editor 插件的代码，发现设置菜单选项其实是在 node_modules/vue-quill-editor/src/options.js

option.js 代码其实是设置主题、菜单、默认提示文字和主题等

export default {
  theme: 'snow',		//主题
  boundary: document.body, 
  modules: {
    toolbar: [			//菜单
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean'],
      ['link', 'image', 'video']
    ]
  },
  placeholder: 'Insert text here ...',		//默认提示文字
  readOnly: false 		//是否只读
}

在同级的 editor.vue 文件可以看到工具栏有插槽（后面会用上），而且引入了option文件，设置默认值初始化。其实在 editor.vue文件内新建了quill实例，而且调用了一些方法，但是没有细看，vue-quill-editor 也是基于 quill，所以有空还是要多了解一下。

大致知道菜单是怎么来的了，菜单项就是需要什么就写上去，像我这个，它原本菜单项很多，但是我的项目不需要那么多个菜单，所以直接将需要的菜单确定好，直接写个toolbar 覆盖掉。

2. 图片路径上传，在富文本中不已base64显示图片，而是以图片链接方式显示
这个的话，主要参考：
vue-quill-editor 结合element-ui上传图片：https://github.com/NextBoy/skill/issues/2

原理是这样的：
1）quill.formats('image', false) 禁用quill内部上传图片方法
2）一开始将菜单栏中 “image”菜单 绑定事件，进行触发 el-upload 里的el-button点击事件
3）设置 el-upload 文件监听方法，on-change="handleChange"，将获取的文件或者图片进行上传到后台
4）上传成功后，将图片路径插入到富文本内容，将文件存到附件文件列表里。

3. 如何添加菜单？
这个真的是困扰我很久，然后看到这篇文章，发现还挺简单的，其实就是利用之前在 editor.vue 文件看到的工具栏插槽：
请注意，你的全部工具栏都是要重写。

这篇文章里面插入是svg格式的图片，但是我对svg不怎么熟，就直接插入一个icon图片，但是有个问题就是，但我点击的的时候这个图片会出现边框，唉，但是一直都改不了，有可能是用的图片格式问题吧。

不过自己新加工具栏有个好处，就是可以在 button 上面直接设置点击事件，直接触发 el-upload button 的点击事件。

4. 相关代码

	

		
		
		
		
		
		
		
		
		
		 
		
		//自定义上传附件工具
		
       		
            
		
	

因为使用插槽重写工具栏，这样在 modules 里，toolbar 指向工具栏dom就好了 quill.formats('image', false);

   editorOption: {
      modules: {
        toolbar:"#toolbar",
      },
      handlers: {
        'image': function (value) {
          if (value) {
            alert(1)
          } else {
            this.quill.formats('image', false);		// 禁止图片事件
          }
        }
      },
      placeholder: “请输入...”
   },

在 mounted 为图片ICON绑定事件 getModule 为编辑器的内部属性 addHandler('image', that.imgHandler)

	mounted () {
      let that = this;
      that.$refs.myQuillEditor.$refs.editor.id="myQuillEditor";
      that.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', that.imgHandler);
    },

element-ui 图片上传组件，id="imgInput" :on-change="handleChange"

点击图片ICON触发上传事件，获取el-button，添加点击事件

   	imgHandler(state) {
        this.addRange = this.$refs.myQuillEditor.quill.getSelection();
        if (state) {
          let fileInput = document.getElementById('imgInput');
          fileInput.click(); // 加一个触发事件
        }
        this.uploadType = 'image';
      },

文件监听，触发文件上传事件，imgList是保存上传的文件

handleChange(file, fileList) {
    let that = this;
    that.imgList.push(file);
    that.saveUpload();
  },

文件上传事件element里面很详细，就略过了，就是将图片传到后端，后端再返回图片路径
将图片路径插入到富文本，因为有文件上传，所以这个方法会判断文件的后缀名进行处理，处理结果是图片路径插入到富文本中，而文件则保存到数组中。

	finish(d){
        let that = this;
        //获取文件后缀名
        let type = d[0].filePath.substring(d[0].filePath.lastIndexOf("."),d[0].filePath.length);
        if(type==".jpeg"||type==".png"||type==".jpg"){
          let range = that.$refs.myQuillEditor.quill.getSelection();
          //定位光标位置 进行插入
          that.$refs.myQuillEditor.quill.insertEmbed(range!==null?range.index:0, 'image', d[0].filePath);
          that.$refs['myupload'].clearFiles();
          //插入后 要将光标位置往前移一格
          that.$refs.myQuillEditor.quill.setSelection(range.index+1);
        }else{
          that.lstFile.push(d);
          that.$refs['myupload'].clearFiles();
        }
        that.imgList = [];
      },

好了，到这里就结束了，其实还是有好多不清不楚的，现在只是会用，还是要多多思考，如果有什么地方错了，欢迎指出来，如果有更通透的理解，欢迎分享，谢谢！