Quill Mention — 富文本编辑器的提及与标签功能

Quill Mention — 富文本编辑器的提及与标签功能

在富文本编辑中实现类似Twitter或Facebook的@提及和#标签功能已成为一种必备特性。Quill Mention 是针对流行富文本编辑器Quill量身定制的一个插件，它轻松地将这种功能整合到你的Web应用中。

动态演示

你可以访问Quill Mention官网亲身体验这一功能的便捷性，并查看实时交互的动态效果：

开始使用

安装Quill Mention非常简单，通过npm或Yarn即可完成：

# 使用npm
npm install quill-mention --save

# 或者使用Yarn
yarn add quill-mention

导入完成后，只需将配置项传给Quill实例即可启用这一模块。以下是基本示例代码：

import "quill-mention";

const atValues = [
  { id: 1, value: "Fredrik Sundqvist" },
  { id: 2, value: "Patrik Sjölin" }
];
const hashValues = [
  { id: 3, value: "Fredrik Sundqvist 2" },
  { id: 4, value: "Patrik Sjölin 2" }
];

const quill = new Quill("#editor", {
  modules: {
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ["@", "#"],
      source: function(searchTerm, renderList, mentionChar) {
        // 你的数据源处理逻辑
      }
    }
  }
});

同时，提供mention-hovered和mention-clicked事件监听，以便于处理悬停和点击事件：

window.addEventListener('mention-hovered', (event) => {console.log('hovered: ', event)}, false);
window.addEventListener('mention-clicked', (event) => {console.log('hovered: ', event)}, false);

对于异步数据源的支持，可以利用async/await，如下所示：

async function suggestPeople(searchTerm) {
  // 异步获取匹配的数据
}

const quill = new Quill("#editor", {
  modules: {
    mention: {
      source: async function(searchTerm, renderList) {
        const matchedPeople = await suggestPeople(searchTerm);
        renderList(matchedPeople);
      }
    }
  }
});

注意：如果对Quill的格式进行白名单设置，别忘了添加“mention”到允许的格式列表中，否则Quill Mention可能无法工作。

const quill = new Quill("#editor", {
  formats: ["bold", "italic", "mention"], // 添加"mention"到格式列表
  modules: {
    mention: {/* ... */}
  }
});

配置选项

Quill Mention提供了多样的配置选项以满足不同需求：

• source: 必需的回调函数，用于连接搜索词和数据源。
• renderItem: 自定义匹配项显示方式。
• allowedChars: 允许触发搜索的字符正则表达式。
• minChars/maxChars: 触发搜索的最少/最多字符数。
• mentionDenotationChars: 指定用于触发提及功能的字符。
• 更多详细设置请参考项目文档。

应用场景

Quill Mention适用于任何需要在文本编辑器中实现@提及和#标签功能的应用，如社交媒体平台、协作工具、评论系统等。借助其强大的自定义能力和异步支持，开发者能够灵活地构建适应各种业务场景的功能。

特点概览

• 支持@提及和#标签两种模式。
• 可自定义匹配项的展示样式，包括高亮搜索关键词。
• 支持异步数据加载，适用于从服务器获取提及数据。
• 灵活的配置选项，可调整字符限制、菜单位置等。
• 提供事件监听，方便集成用户交互反馈。

立即尝试Quill Mention，为你的富文本编辑体验增添新色彩！