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

最新推荐文章于 2024-05-29 20:59:50 发布

转载最新推荐文章于 2024-05-29 20:59:50 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/pokdars/blog/1839878

文章标签：

#javascript #php #python #ViewUI

本文介绍如何在Quill编辑器中实现图片上传功能，并提供了一个基于jQuery的示例代码，该方法允许用户将图片上传至指定服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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', "<?php echo $url?>" + data.data);
                                                }
                                            });
                                        }
                                    });
                                    this.container.appendChild(fileInput);
                                }
                                fileInput.click();
                            }
                        }
                    },
                },
                placeholder: 'Compose an epic...',
                theme: 'snow'  // or 'bubble'
            });

配置上自己的上传地址，同时"<?php echo $url?>" 根据时间做相应替换。

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