简介
在前端开发中，CKEditor是非常常用的富文本编辑器。而@ckeditor/ckeditor5-mention是CKEditor5的选择模块之一，也是CKEditor5提供的较为强大和实用的模块之一。@ckeditor/ckeditor5-mention，顾名思义，是一个提供“提及”功能的模块，通过该模块，我们可以在富文本中，轻松地实现类似于微信、QQ中的“@”功能，让用户输入“@”符号后，显示搜索建议列表，用户可以在建议列表中选择对应的选项，替换“@”符号。
本文档主要介绍@ckeditor/ckeditor5-mention的使用方法，对于新手来说，可以快速掌握该npm包的使用方法，对于有经验的开发人员，本文档也提供一些深度学习以及指导意义。
安装
在项目中安装@ckeditor/ckeditor5-mention非常简单。通过npm命令安装即可：
--- ------- ------ ---------------------------
安装完成后，可以列出项目中已安装的npm包，看@ckeditor/ckeditor5-mention是否成功安装：
--- -- - ---- ---------------------------
使用
安装完成后，我们需要配置ckeditor，使其支持mention模块。下面是一份最基础的ckeditor配置示例：
-------------
-------- ----------------------- --------- -- -
-------- - ------- --
-------- - ---------- ------- --------- ------ -
--
------- ----- -- -
-------------- ----- --
---可以看到，我们通过向plugins配置项提供Mention插件，使该CKEditor实例支持mention模块。我们还可以在工具栏中，使用“mention”按钮，来开启mention模块。
在使用的时候，我们也可以自定义mention模块的属性，实现更多的效果。下面是一个完整的mention模块示例：
------ ------- ---- ------------------------------------------
-------------
-------- ----------------------- --------- -- -
-------- - ------- --
-------- -
------ -
-
------- ----
----- -
- --- -- ------------ ----- --
- --- -- ------------ ------ --
- --- -- ------------ ------ -
-
--
-
------- ----
----- -
- --- --- ------------ ---------- --
- --- --- ------------ --------- --
- --- --- ------------ -------- -
-
-
-
--
-------- - ---------- ------- --------- ------ -
--
------- ----- -- -
-------------- ----- --
---可以看到，我们配置了feeds，feeds是一个feeds数组，它包含不少于一个项，一项包括一个“marker”和一个“feed”列表。下面是feeds项具体的含义：
- marker：在文本中要引入提及的字符。 如上例中的“@”和“#”。
- feed：提供可用于提及建议的对象。 应该包含 object 与 ID 键。
总结
@ckeditor/ckeditor5-mention是一个非常实用的npm包，只需要简单的配置即可在我们的文本编辑器中，添加类似于微信、QQ中提及“@”的功能，并且可以灵活自定义属性。无论是新手还是有经验的开发人员，都可以很快上手使用该npm包，目前已有40多万下载，具备很好的实战经验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f69539ca9b7065299ccb7e9