Quill - 添加图像 URL 而不是上传它

Question

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

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

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

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

原文由 HF_ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的。我也不明白这怎么可能再简单不过了。不幸的是，Quill 仍然是 1.x 版本。遇到这样的情况是正常的。不过别担心。关于您的问题，我认为这可以帮助您：

https://github.com/loagit/Quill-Examples-and-FAQ#quill-project-004—customizable-tooltip

为了更深入地了解这个主题，我建议您查看整个存储库。我希望它能帮助你。那里有很多信息。

原文由 Loa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

即使我来晚了，我也会发布答案，因为它可能会帮助访问这里的人。

您可以为 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);
    }
}

原文由 aimme 发布，翻译遵循 CC BY-SA 4.0 许可协议