在前端开发过程中，使用富文本编辑器是非常常见的需求。而在富文本编辑器中，提到某个人或者文章/话题的时候，通常会用到mention插件。而在React中，导入@naytev/draft-js-mention-plugin插件，可以实现很好的mention功能。
安装
在命令行中使用npm安装@naytev/draft-js-mention-plugin：
npm install @naytev/draft-js-mention-plugin --save
使用
引入
在需要使用mention插件的页面中，通过以下代码引入Mention插件：
import createMentionPlugin from '@naytev/draft-js-mention-plugin'; const mentionPlugin = createMentionPlugin();
初始化
在初始化富文本编辑器的时候，需要使用Mention插件：
-- -------------------- ---- ------- ------ - ----------- - ---- ----------- ------ ------ ---- -------------------------- ----- ----------- - -------------------------- ------- ------------------------- ------------------------ ------------------------------ ---
参数设置
在使用Mention插件的时候，还可以设置以下参数：
const mentionPlugin = createMentionPlugin({
entityMutability: 'IMMUTABLE',
theme: mentionStyles,
mentionPrefix: '@',
});其中，参数“entityMutability”表示entity的可变性。可以设置为IMMUTABLE、MUTABLE、SEGMENTED。
参数“theme”用于设置样式。可以根据需求设定。
参数“mentionPrefix”用于设置触发mention的前缀，默认值是“@”。
方法调用
获取选中文本
在使用富文本编辑器的时候，有时候需要获取用户选择的文本。在Mention插件中，可以通过getState方法来获取选中文本。
const { editorState } = this.props;
const selection = editorState.getSelection();
const content = editorState.getCurrentContent();
const text = content.getBlockForKey(selection.getStartKey()).getText();
const selectedText = text.slice(selection.getStartOffset(), selection.getEndOffset());示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- - ---- -----------
------ ------ ---- --------------------------
------ ------------------- ---- ----------------------------------
------ ------------- ---- -----------------------
------ ------- ----- ------------- ------- --------- -
------------------ -
-------------
---------- - -
------------ --------------------------
--
------------------ - ---------------------
----------------- ------------
------ --------------
-------------- ----
---
------------- - ----------- -- -
--------------- ----------- ---
--
-
--------------------- - -- -- -
----- - ----------- - - -----------
----- --------- - ---------------------------
----- ------- - --------------------------------
----- ---- - ----------------------------------------------------------
----- ------------ - -------------------------------------- --------------------------
------------------------------
--
-------- -
----- - ----------- - - -----------
------ -
-----
------- ----------------------------------------------------
-------
-------------------------
------------------------
------------------------------
--
------
--
-
-总结
通过上述步骤，即可快速使用@naytev/draft-js-mention-plugin实现mention功能。同时，在使用过程中，要注意mentionPrefix、entityMutability、theme等参数的设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005582581e8991b448d5515