如何在 React Quill Editor 中创建自定义工具提示？

Question

我正在集成一个具有链接操作的自定义工具栏

当用户想要添加指向特定文本的链接时，我想从默认 UI 覆盖 Quill 编辑器的工具提示行为

像这样的用户界面

我一直在寻找解决方案，发现这只能通过创建一个新主题来完成，但我没有在 React Quill 中找到自定义这部分的文档。

任何帮助/想法表示赞赏。

Answer 1

您可以为每个工具栏组件定义自定义处理程序，例如：

 <ReactQuill
    modules={{
      toolbar: {
        handlers: {
          link: linkHandler,
        },
      },
    }}
  />

然后实施 linkHandler，在您的情况下，显示模态可能是一个不错的方法？

const linkHandler = () => {
    // show UI you provided above
    showURLEditorModal();
}

当用户从您的模式中单击“提交”按钮时，您需要使用以下方法将 URL 添加到 react-quill 编辑器中：

const insertLinkToEditor = (url: string) => {
  // get your react-quill by react ref 
  const editor = getQuillEditor();

  if (editor && url) {
    // where the link should be inserted
    const range = editor.getSelection() || { index: 0 };

    editor.insertText(range.index, url);
    editor.setSelection(range.index, url.length);
    editor.format('link', url);
  }
};