猿问

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

想要实现的效果是,当我在富文本框里面添加了有文字有图片的内容时,我想在添加图片的时候将图片保存到自己的服务器上,并返回一个图片的地址,然后用这个地址替换掉我添加的图片的路径(编辑器添加图片后自动生成的base64路径)

千里①
浏览 15804回答 2
2回答

薄穆

//重写编辑器的图片预览方法 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(); });
随时随地看视频慕课网APP
我要回答