vue-quill-editor富文本编辑器结合elementui上传图片格式base64转成图片路径

我们在使用vue-quill-editor富文本编辑器的时候，上传的图片返回的都是很长的base64的格式，往往都需要转换成图片的url存在数据库里面。

解决思路为在页面上设置一个elementui的文件上传的隐藏域，重写富文本编辑器的图片的点击事件，在点击事件中触发文件上传组件的点击事件，上传图片成功后，追加到富文本编辑器的内容中！

那么如何实现呢？请看以下详细步骤！！

1、安装vue-quill-editor

使用命令：npm install vue-quill-editor -S

在package.json中出现以下版本信息说明安装成功！

2、在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);//富文本

3、使用

1. 在需要使用富文本编辑器的.vue文件中定义需要用到哪些富文本的toolbar

代码：

const toolbarOptions = [
	[‘bold’, ‘italic’, ‘underline’, ‘strike’], // toggled buttons
	[‘blockquote’, ‘code-block’],
	[{‘header’: 1}, {‘header’: 2}], // custom button values
	[{‘list’: ‘ordered’}, {‘list’: ‘bullet’}],
	[{‘script’: ‘sub’}, {‘script’: ‘super’}], // superscript/subscript
	[{‘indent’: ‘-1’}, {‘indent’: ‘+1’}], // outdent/indent
	[{‘align’: []}],
	[‘link’, ‘image’],
	[‘clean’] // remove formatting button
];

2. 在data中配置，并重写image的点击事件

代码：

editorOption: {
	placeholder: ‘’,
	theme: ‘snow’, // or ‘bubble’
	modules: {
	toolbar: {
		container: toolbarOptions, // 工具栏
		handlers: {
			‘image’: function (value) {
				if (value) {
					// 触发input框选择图片文件
					document.querySelector(’.avatar-uploader2 input’).click()
				} else {
					this.quill.format(‘image’, false);
					}
				}
			}
		}
	}
},

3.页面上定义一个elementui的上传组件以及一个富文本编辑器

富文本:

文件上传:

4.上传成功的方法

代码：

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

4、完结，撒花！！！