vue-quill-editor 自定义工具栏和自定义图片上传路径

 

背景：

1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现，需要删除部分功能。

2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区，这会导致content字符长度太长，不一定可以传到后台保存（其实即使可以保存也不推荐这种方案）。所以我们需要将方案修改为将图片上传到服务器，然后通过URL的 方式访问到图片回显及使用。

vue-quill-editor工具栏改造及自定义图片上传（这里使用的是element-ui的上传组件）：

引入插件（vue引入vue-quill-editor自行问度娘）

vue html

vue js 

editorOption: {
    placeholder: 'Please enter it here...',
    modules:{
        toolbar:{
		    container: [
			    ['bold', 'italic', 'underline', 'strike'],// 加粗，斜体，下划线，删除线
				['blockquote'],// 引用
				[{ 'header': 1 }, { 'header': 2 }],// 标题，键值对的形式；1、2表示字体大小
				[{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表
				[{ 'indent': '-1'}, { 'indent': '+1' }],// 缩进
				[{ 'direction': 'rtl' }],// 文本方向
				[{ 'size': ['small', false, 'large', 'huge'] }],// 字体大小
				[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//几级标题
				[{ 'color': [] }, { 'background': [] }],// 字体颜色，字体背景颜色
				[{ 'font': [] }],//字体
				[{ 'align': [] }],//对齐方式
				['clean'],//清除字体样式
				['image']//上传图片、上传视频
			],
			handlers: {
				'image': function(val){
				    if(val){
				        document.querySelector('.quill-img input').click()
				    }else{
					    this.quill.format('image', false);
				    }
			    }
		    }
	    }
    }
}

自定义上传回显

        // 富文本编辑框图片上传
		quillImgSuccess(res, file) {
			// 获取富文本组件实例
			let quill = this.$refs.myTextEditor.quill;
			// 如果上传成功
			if (res.code == '00001') {
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片  res.data为服务器返回的图片地址
				quill.insertEmbed(length, 'image', '/static-resource/' + res.body);// 这里的url是图片的访问路径不是真实物理路径
				// 调整光标到最后
				quill.setSelection(length + 1)
			} else {
				this.$message.error('图片插入失败')
			}
		}

校验图片格式

       quillImgBefore(file){
			let fileType = file.type;
			if(fileType === 'image/jpeg' || fileType === 'image/png'){
				return true;
			}else {
				this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
				return false;
			}
		},

至此大功告成。这里面只记录了关键步骤，不清楚的地方评论吧

！！！！注意：

在自定义上传图片的改造过程中如果存在多个富文本框同时存在一个页面时需要保证每个富文本及对应的upload的ref不一样