据库类型改成

拦截富文本编辑器上传图片功能即点击按钮将事件绑定到input或upload的上传图片上将图片上传到自己服务器并返回url地址将url地址存到数据库显示的时候直接映射

第一步安装

vueup/vue-quill/dist/vue-quill.snow.css;

import

{container,QuillWatch,ImageExtend}

from

Quill.register(modules/ImageExtend,

ImageExtend)const

引入input是借助input的图片上传请求来回显到富文本编辑器里按钮是隐藏的。

templateQuillEditorv-model:contentform.productParaImgscontentTypehtml***mesnowrefproductParaImgsForm:optionsproductParaImgsEditorOptionchangeonEditorChange($event)styleheight:200px/QuillEditorinputtypefileaccept.png,.jpg,.jpegchangeproductParaImgsChangeidproductParaImgsUploadstyledisplay:

none;border:

为一个函数用来获取服务器返回的具体图片地址不用response:

(res)

请求头携带tokenxhr.setRequestHeader(token,

window.sessionStorage.getItem(token))},},//

核心步骤在富文本点击图片按钮的一刻判断走input的change事件即-将图片上传到服务器再返回url地址用来保存。

toolbar:

{container:

container为工具栏此次引入了全部工具栏也可自行配置handlers:

{image:

productParaImgsUpload为input的iddocument.querySelector(#productParaImgsUpload).click();}

else

固定写法可自行打印查看formData.append(file,

file);//

requestUitl.post(/sys/product/uploadImage,

formData);if

productParaImgsForm.value.getQuill()//

vue2用

this.$ref.productParaImgsForm.quilllet

quill

productParaImgsForm.value.getQuill()

length

是后端返回的urlquill.insertEmbed(length,

image,

调整光标内容后面quill.setSelection(length

1);

{resolve(response);}).catch(error

export