javascript - Quill - 添加图片 URL 而不是上传

Question

我不是 JS 专业人士，我正在使用 Quill Rich Text Editor对于我们的一个项目。它运行良好，但是当我使用 getContents() 时获取其内容的方法(使用 Delta 格式)，它显示图像，如下所示:

{
  "insert": {
    "image": "data:image/png;base64,iVBORw0KGgoAA...=="
  }
}, ...

我想在添加图片时为编辑器提供图片的 URL，而不是上传图片。我的意思是，我希望它在添加图像时显示 URL 输入框，而不是打开文件对话框来选择图像。就像我添加视频时所做的那样:



我怎样才能做到这一点？ 我应该编辑 quill.js代码？

Answer 1

即使我在这里迟到了，我也会发布答案，因为它可能会对访问这里的人有所帮助。
您可以为 image 定义自定义处理程序选项。这样的事情会做。

//add the toolbar options
var myToolbar= [
    ['bold', 'italic', 'underline', 'strike'],       
    ['blockquote', 'code-block'],

    [{ 'color': [] }, { 'background': [] }],         
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],                                        
    ['image'] //add image here
];


var quill = new Quill('#quill-container', {
    theme: 'snow',
    modules: {
        toolbar: {
            container: myToolbar,
            handlers: {
                image: imageHandler
            }
        }
    },
});


function imageHandler() {
    var range = this.quill.getSelection();
    var value = prompt('please copy paste the image url here.');
    if(value){
        this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
    }
}