1. 简介
kaneoh-draft-js-mention-plugin 是一款基于 Draft.js 编辑器的 Mention 插件，能够帮助用户在输入过程中快速添加 @ 提及功能，并支持自定义数据源和渲染方式。
本文将详细介绍如何在前端项目中使用该插件，并提供示例代码。
2. 安装
使用 npm 安装：
npm install kaneoh-draft-js-mention-plugin
3. 使用
初始化
在创建 Draft.js 编辑器实例时，需将 kaneoh-draft-js-mention-plugin 插件实例化，并传入相应的参数：
-- -------------------- ---- -------
------ ------------- ---- ---------------------------------
------ - ----------- - ---- -----------
----- ------------- - --- ---------------
-- ---
------------ --
----- ---------
------- ---------------------------------
--- ---
-- -
----- ------
------- ---------------------------------
--- ---
---
-- -------
----------------- -- ------- -- -- -
------ -
---- --------------------
---- -------------------- --------------------- ----- --
----- ----------------------------------------------
------
--
-
---
----- ----------- - --------------------------
----- ------- - ----------------说明：
mentionData：Mention 的数据源，数组中每个元素需要包含name、avatar和id三个字段，分别表示名称、头像地址和唯一标识；mentionComponent：自定义渲染方式，需传入一个 callback 方法，返回一个 React 组件。
渲染 Mention
在渲染 Draft.js 编辑器时，需将插件包裹在 MentionSuggestions 组件中，该组件将处理输入框中 @ 符号的展示和数据源的查询：
-- -------------------- ---- -------
------ - ------ - ---- ----------------------
------ - ------------------ - ---- ---------------------------------
------ ---------------------------------------------------
----- -------- - -- -- -
----- ------------- --------------- - ------------------------------------
------ -
-----
-------
-------------------------
------------------------------------
-----------------
--
-------------------
------------------ -- ---
-----------------------------------------
---------------- -- ---
--
------
--
--说明：
onSearchChange：查询 Mention 数据源的回调方法；suggestions：Mention 数据源；onAddMention：选中 Mention 项的回调方法，需在其中更新编辑器的状态。
获取 Mention 文本
在保存编辑器内容时，需将 @ 提及展开成原始文本并进行保存。可以通过插件提供的 getPlainText 和 getMentions 方法实现：
const [editorState, setEditorState] = useState(EditorState.createEmpty()); const editorContent = editorState.getCurrentContent(); const plainText = mentionPlugin.getPlainText(editorContent); const mentions = mentionPlugin.getMentions(editorContent);
其中，getPlainText 方法返回展开后的纯文本，getMentions 方法返回包含 start, end 和 mention 字段的对象数组，分别表示当前 Mention 的起始和结束位置以及对应的数据源。
4. 示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- ---------------------------------
------ - ----------- - ---- -----------
------ - ------ - ---- ----------------------
------ - ------------------ - ---- ---------------------------------
------ ---------------------------------------------------
----- ------------- - --- ---------------
------------ --
----- ---------
------- ---------------------------------
--- ---
-- -
----- ------
------- ---------------------------------
--- ---
---
----------------- -- ------- -- -- -
------ -
---- --------------------
---- -------------------- --------------------- ----- --
----- ----------------------------------------------
------
--
-
---
----- -------- - -- -- -
----- ------------- --------------- - ------------------------------------
----- ------------- - --------------------------------
----- --------- - ------------------------------------------
----- -------- - -----------------------------------------
----- ------------ - --------- -- -
----- ------------------ - --------------------------------------- ---------
-----------------------------------
--
----- -------------- - -- ----- -- -- -
------------------------------------
--
------ -
-----
-------
-------------------------
------------------------------------
-------------------------
--
-------------------
-------------------------------
--------------------------------------------
---------------------------
--
------
--
--5. 总结
kaneoh-draft-js-mention-plugin 是一款功能强大的 Mention 插件，适用于多种场景。本文介绍了该插件的安装、初始化、渲染 Mention 和获取 Mention 文本的方法，并提供了示例代码。希望本文能够帮助读者更好地了解和使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602181e8991b448de4dc