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

Question

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

Answer 1

//重写编辑器的图片预览方法
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();

});