使用该插件在laravel8+laravel-admin1.8.x后台上传图片示例

[beautycss]

修改方法：

1. 在vendor/jxlwqq/quill/src/Editor.php文件找到JS代码部分；

var options = {$options};
var quill = new Quill("#{$this->id}", options);

3. 在以上代码上方和下方增加JS代码，修改如下；

function imageHandler() {
    let IMGUR_API_URL = '/admin/upload-image';
    let 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', () => {
            const files = fileInput.files;
            const range = quill.getSelection(true);

            if (!files || !files.length) {
                console.log('No files selected');
                return;
            }

            const formData = new FormData();
            formData.append('file', files[0]);
            formData.append('_token', LA.token);
        
            quill.enable(false);
            
            var xhr = new XMLHttpRequest();
            if (!xhr) {
                alert("Giving up :( Cannot create an XMLHTTP instance");
                return false;
            }
            xhr.open('POST', IMGUR_API_URL, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    var response = JSON.parse(xhr.responseText);
                    console.log('response', response);
                    if (response.success) {
                        quill.enable(true);
                        quill.editor.insertEmbed(range.index, 'image', response.url);
                        quill.setSelection(range.index + 1, Quill.sources.SILENT);
                        fileInput.value = '';
                    } else {
                        console.log('quill image upload failed');
                        quill.enable(true);
                    }
                }
            }
            xhr.send(formData);
        });
        this.container.appendChild(fileInput);
    }
    fileInput.click();
}
var options = {$options};
var quill = new Quill("#{$this->id}", options);
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', imageHandler);

... ...

说明：

1. 我安装的该编辑器插件版本是1.0.2，此插件版本使用的quill是1.3.6版本；
2. 以上图片上传示例代码仅支持quill1.3.x版本，不适用qiill2及以上版本；
3. 以上图片上传示例代码参考了How to insert images by uploading to the server instead of Base64 encoding the images?里面提供的方案，并把里面的axios上传改为了原生JS上传。