Quill富文本编辑器添加图片由base64改为上传

2019独角兽企业重金招聘Python工程师标准>>>

Quill是一款非常好用的编辑器，不过默认的图片是base64后插入到文本中的，如果要上传到服务器,CDN等，需要重写image控件的handler，如果使用的是vue百度也有一堆解决方案，这里贴上基本的jquery的处理方法： 

var quill = new Quill('#editor', {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function (value) {
                                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/*');
                                    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: '/news/upload',
                                                type: 'POST',
                                                data: formData,
                                                processData: false,
                                                contentType: false,
                                                success: function (data) {
                                                    var data = eval("(" + data + ")");
                                                    var range = quill.getSelection();
                                                    quill.insertEmbed(range.index, 'image', "" + data.data);
                                                }
                                            });
                                        }
                                    });
                                    this.container.appendChild(fileInput);
                                }
                                fileInput.click();
                            }
                        }
                    },
                },
                placeholder: 'Compose an epic...',
                theme: 'snow'  // or 'bubble'
            });

配置上自己的上传地址，同时"" 根据时间做相应替换。

转载于:https://my.oschina.net/pokdars/blog/1839878