时间戳

首页 > 解决方案 > Quill - 提及未在 Quill JS 编辑器内容中插入提及值（使用 React Quill）

javascript - Quill - 提及未在 Quill JS 编辑器内容中插入提及值（使用 React Quill）

问题描述

我正在使用React Quill在Quill JS中实现Quill-Mention ，但在单击列表中的项目时我无法更新编辑器内容。

单击正确的符号时，我可以正确呈现列表，并相应地显示数据。但是，当我单击它时，它会消失，并且项目值不会添加到编辑器内容中。

这是我测试它的方式：

const suggestPeople = searchTerm => {
  const allPeople = [
    {

      id: 1,
      value: "Fredrik Sundqvist"
    },
    {
      id: 2,
      value: "Patrik Sjölin"
    }
  ];
  return allPeople.filter(person => person.value.includes(searchTerm));
};

  /* Mention module config
  ====================== */

  const mentionModule = {
    allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
    mentionDenotationChars: ["·"],
    source: async function(searchTerm, renderList) {
      const matchedPeople = await suggestPeople(searchTerm);
      renderList(matchedPeople);
    }
  };

  Quill.register("modules/mentions", QuillMention);

 const modules = {
    syntax: true,
    clipboard: {
      matchVisual: false
    },
    toolbar: {
      container: "#toolbar",
    },
    mention: mentionModule
  };

显示 Quill 提及下拉列表工作的屏幕截图

谢谢！

标签： javascriptreactjsquillreact-quill

解决方案

我解决了。

我需要在配置对象中添加 onSelect 方法，并添加“提及”作为格式数组的元素。

无论哪种方式都谢谢你:)

推荐阅读