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);
    }
}

Answer 2

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

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

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

Answer 3

适用于希望从鹅毛笔工具提示而不是提示中获取 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>