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

Question

我不是 JS 专家，我正在为我们的一个项目使用Quill 富文本编辑器。它运行良好，但是当我使用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);
    }
}

Answer 2

对于任何希望从羽毛笔工具提示而不是提示中获取 URL 的人。

基于biz-quill评论的 React 自定义 URL 图像处理程序

function imageHandler() {
  const tooltip = this.quill.theme.tooltip;
  const originalSave = tooltip.save;
  const originalHide = tooltip.hide;

  tooltip.save = function () {
    const range = this.quill.getSelection(true);
    const value = this.textbox.value;
    if (value) {
      this.quill.insertEmbed(range.index, 'image', value, 'user');
    }
  };
  // Called on hide and save.
  tooltip.hide = function () {
    tooltip.save = originalSave;
    tooltip.hide = originalHide;
    tooltip.hide();
  };
  tooltip.edit('image');
  tooltip.textbox.placeholder = 'Embed URL';
}

在你的 Quill 模块中添加如下内容：

export const modules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      undo: undoChange,
      redo: redoChange,
      imageHandler: imageHandler, //Add it here
    },
  },
  history: {
    delay: 500,
    maxStack: 100,
    userOnly: true,
  },
};

您可以从 svg 创建自定义按钮图标，如下所示：

const CustomImageFromLink = () => (
  <svg class="svg-icon" viewBox="0 0 20 20">
    <path d="M18.555,15.354V4.592c0-0.248-0.202-0.451-0.45-0.451H1.888c-0.248,0-0.451,0.203-0.451,0.451v10.808c0,0.559,0.751,0.451,0.451,0.451h16.217h0.005C18.793,15.851,18.478,14.814,18.555,15.354 M2.8,14.949l4.944-6.464l4.144,5.419c0.003,0.003,0.003,0.003,0.003,0.005l0.797,1.04H2.8z M13.822,14.949l-1.006-1.317l1.689-2.218l2.688,3.535H13.822z M17.654,14.064l-2.791-3.666c-0.181-0.237-0.535-0.237-0.716,0l-1.899,2.493l-4.146-5.42c-0.18-0.237-0.536-0.237-0.716,0l-5.047,6.598V5.042h15.316V14.064z M12.474,6.393c-0.869,0-1.577,0.707-1.577,1.576s0.708,1.576,1.577,1.576s1.577-0.707,1.577-1.576S13.343,6.393,12.474,6.393 M12.474,8.645c-0.371,0-0.676-0.304-0.676-0.676s0.305-0.676,0.676-0.676c0.372,0,0.676,0.304,0.676,0.676S12.846,8.645,12.474,8.645"></path>
  </svg>
);

然后将其添加到您的工具栏，如下所示：

  <button className="ql-imageHandler"> //class is ql-yourHandlerName
    <CustomImageFromLink /> //Your Icon Component
  </button>

Answer 3

是的。我也不明白这怎么可能更容易。不幸的是 Quill 仍处于 1.x 版本。遇到这样的情况可能很正常。不过别担心。关于你的问题，我认为以下内容可以帮助你：

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

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