Quill Mention: 高级文本编辑器的提及功能插件

最新推荐文章于 2024-08-10 08:45:52 发布

汤璞亚Heath

最新推荐文章于 2024-08-10 08:45:52 发布

阅读量360

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00903/article/details/141079812

版权

Quill Mention: 高级文本编辑器的提及功能插件

quill-mention💬 @mentions for the Quill rich text editor项目地址:https://gitcode.com/gh_mirrors/qu/quill-mention

项目介绍

Quill Mention 是一个专为 Quill 富文本编辑器设计的模块，旨在提供 @mentions 或 #hashtags 的强大功能。它不仅支持简单的提及和话题标签，还具备异步数据检索、禁用项（例如组头）、加载消息、程序方法调用以及自定义渲染等高级特性。

该模块由 TypeScript 编写，遵循 MIT 开源许可协议发布，有着稳定的贡献者社区和支持。通过将社交网络风格的提及功能整合到你的 Quill 编辑器中，可以极大地提升用户交互体验和协作效率。

项目快速启动

安装

首先，你可以选择以下任何一种方式来安装 Quill Mention：

使用 NPM:
```
npm install quill-mention --save
```
使用 Yarn:
```
yarn add quill-mention
```

引入并配置

在你的项目中引入 Quill Mention 并进行必要的配置。

自动注册

为了简化操作，你可以采用自动注册的方式：

import 'quill-mention/autoregister';
const quill = new Quill('#editor', {
  modules: {
    mention: {
      // 可以在这里设置允许的字符集、提及符号等参数
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ['@', '#'],
      // 设置数据源函数，在搜索时会被调用
      source: function(searchTerm, renderList, mentionChar) {
        // 这里是你的逻辑，如从数据库获取匹配的用户或话题
      },
    },
  }
});

手动导入模块

如果你更喜欢手动控制，也可以这样操作：

import { Quill } from 'quill';
import { Mention, MentionBlot } from 'quill-mention';

// 注册模块
Quill.register({
  'blots/mention': MentionBlot,
  'modules/mention': Mention,
});

const quill = new Quill('#editor', {
  modules: {
    mention: {},
  },
});