首頁猿問 vue-quill-editor如...

vue-quill-editor如何處理富文本里面添加的圖片

Java JavaScript Vue.js

千里① 2017-07-13 17:03:02

想要實(shí)現(xiàn)的效果是，當(dāng)我在富文本框里面添加了有文字有圖片的內(nèi)容時(shí)，我想在添加圖片的時(shí)候?qū)D片保存到自己的服務(wù)器上，并返回一個(gè)圖片的地址，然后用這個(gè)地址替換掉我添加的圖片的路徑（編輯器添加圖片后自動(dòng)生成的base64路徑）

查看完整描述

2 回答

薄穆

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超2個(gè)贊

//重寫編輯器的圖片預(yù)覽方法
var?toolbar?=?quill.getModule('toolbar');
toolbar.addHandler('image',function(){
????var?fileInput?=?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)?{
????????????????var?formData?=?new?FormData();
????????????????formData.append('file',?fileInput.files[0]);
????????????????$.ajax({
????????????????????url:?'/upload',
????????????????????type:?'POST',
????????????????????cache:?false,
????????????????????data:?formData,
????????????????????processData:?false,
????????????????????contentType:?false
????????????????}).done(function(res)?{
???????????????????var?range=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();

});

2 反對(duì) 回復(fù) 2018-01-19