简介
在前端开发中，CKEditor是非常常用的富文本编辑器。而@ckeditor/ckeditor5-mention是CKEditor5的选择模块之一，也是CKEditor5提供的较为强大和实用的模块之一。@ckeditor/ckeditor5-mention，顾名思义，是一个提供“提及”功能的模块，通过该模块，我们可以在富文本中，轻松地实现类似于微信、QQ中的“@”功能，让用户输入“@”符号后，显示搜索建议列表，用户可以在建议列表中选择对应的选项，替换“@”符号。
本文档主要介绍@ckeditor/ckeditor5-mention的使用方法，对于新手来说，可以快速掌握该npm包的使用方法，对于有经验的开发人员，本文档也提供一些深度学习以及指导意义。
安装
在项目中安装@ckeditor/ckeditor5-mention非常简单。通过npm命令安装即可：
npm install --save @ckeditor/ckeditor5-mention
安装完成后，可以列出项目中已安装的npm包，看@ckeditor/ckeditor5-mention是否成功安装：
npm ls | grep @ckeditor/ckeditor5-mention
使用
安装完成后，我们需要配置ckeditor，使其支持mention模块。下面是一份最基础的ckeditor配置示例：
ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ Mention ], toolbar: [ 'mention', 'bold', 'italic', 'link' ] }) .catch( error => { console.error( error ); });
可以看到，我们通过向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
