vue-quill-editor如何处理富文本里面添加的图片
|
想要实现的效果是，当我在富文本框里面添加了有文字有图片的内容时，我想在添加图片的时候将图片保存到自己的服务器上，并返回一个图片的地址，然后用这个地址替换掉我添加的图片的路径（编辑器添加图片后自动生成的base64路径） |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
|
//重写编辑器的图片预览方法vartoolbar=quill.getModule('toolbar');toolbar.addHandler('image',function(){varfileInput=this.container.querySelector('input.ql-image[type=file]');if(fileInput==null){fileInput=document.createElement('input');fileInput.setAttribute('type','file');fileInput.setAttribute('accept','image/png,image/gif,image/jpeg,image/bmp,image/x-icon');fileInput.classList.add('ql-image');fileInput.addEventListener('change',function(){if(fileInput.files!=null&&fileInput.files[0]!=null){varformData=newFormData();formData.append('file',fileInput.files[0]);$.ajax({url:'/upload',type:'POST',cache:false,data:formData,processData:false,contentType:false}).done(function(res){varrange=quill.getSelection(true);quill.insertEmbed(range.index,'image',"/public/upload/"+res.url);quill.setSelection(range.index+1);}).fail(function(res){});}});this.container.appendChild(fileInput);}fileInput.click();}); |
|
|
|
|
|
|
|
|
天盟APP下载
