前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本指南围绕 CKEditor 4 Mentions 插件的下拉候选列表渲染模板itemTemplate展开通过 viewTemplate 手动测试用例 及其配套页面 viewTemplate.html你将掌握如何让 提及下拉中的候选名称以粗体、带自定义前缀等富文本形式呈现并理解从输入到下拉渲染的完整底层链路以及它与outputTemplate插入内容模板的分工。读完本文你可以直接复制示例配置到自己的编辑器项目中落地。一、测试用例解读viewTemplate 在验证什么仓库中的 viewTemplate.md 是 Bender 测试框架下的一个手动manual测试用例用于人工验证 Mentions 插件的一项核心能力——自定义下拉候选项的视图模板。其测试指令非常简洁聚焦编辑器Focus the editor。输入字符。对应的预期结果Expected下拉框Dropdown中的候选名称以粗体显示bolded names。所有候选项前面都带有item: 字符串前缀。而不符合预期的表现Unexpected则是下拉框中的名称是纯文本plain text没有粗体。名称没有item: 前缀。也就是说这个用例验证的正是itemTemplate配置是否真正生效——候选列表的每一项是否按自定义模板渲染而不是使用默认的纯文本li。文件头部的三行注释是 Bender 手动测试的元数据声明含义如下bender-tags: mentions, feature, 4.10.0, 1987 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, mentionsbender-tags标注该用例所属插件mentions、类型feature、引入版本4.10.0以及关联的 GitHub Issue 编号1987正是 itemTemplate/outputTemplate 功能对应的工单。bender-ui: collapsed运行手动测试时折叠 UI 面板。bender-ckeditor-plugins声明测试页面加载的插件列表其中mentions依赖的wysiwygarea、toolbar、basicstyles均已包含。真正可运行的页面在配套的 viewTemplate.html我们下一节详细拆解它的配置。二、itemTemplate定制下拉候选的渲染模板2.1 配置项定义与默认行为itemTemplate并不是 Mentions 插件独有的新概念而是直接继承自底层 Autocomplete 插件的配置定义。在 plugins/mentions/plugin.js 中可以找到声明/** * inheritdoc CKEDITOR.plugins.autocomplete.configDefinition#itemTemplate * property {String} [itemTemplate] */也就是说它沿用了 plugins/autocomplete/plugin.js 中CKEDITOR.plugins.autocomplete.view的itemTemplate语义。在 plugins/autocomplete/plugin.js 中可以看到该视图类的默认模板this.itemTemplate new CKEDITOR.template( li>var name mentions.marker item.name; return CKEDITOR.tools.object.merge( item, { name: name } );因此如果后端数据源返回{ id: 1, name: anna, fullName: Anna Doe, iconSrc: ... }这类对象模板里就可以自由使用{fullName}、{iconSrc}等字段。例如 mentions.html 中的#回调 feed 示例template: li>div ideditor/div script var editor CKEDITOR.replace( editor, { width: 600, mentions: [ { feed: [ Anna, John, Thomas ], itemTemplate: li>test feed with custom view template: function() { this.editorBot.setHtmlWithSelection( pAn^/p ); testView( this.createMentionsInstance( { feed: feedData, itemTemplate: li>var editor CKEDITOR.replace( editor, { width: 600, mentions: [ { feed: [ Anna, John, Thomas ], outputTemplate: strong{name}/strong, minChars: 0 } ] } );其预期是输入后按下回车插入到正文中的名称是粗体Anna以strongAnna/strong形式写入而不是纯文本。对应的自动化断言在 tests/plugins/mentions/mentions.jsassert.areEqual( pstrongAnna/strong/p, editable.getData() );从实现上看两者被分别传入 Autocomplete 的不同环节plugins/mentions/plugin.jsthis._autocomplete new CKEDITOR.plugins.autocomplete( editor, { textTestCallback: getTextTestCallback( this.marker, this.minChars, this.pattern ), dataCallback: getDataCallback( feed, this ), itemTemplate: config.itemTemplate, outputTemplate: config.outputTemplate, throttle: this.throttle, itemsLimit: config.itemsLimit, followingSpace: this.followingSpace } );其中itemTemplate由 Autocomplete 的 View 类消费渲染候选条目而outputTemplate由getHtmlToInsert消费plugins/autocomplete/plugin.jsgetHtmlToInsert: function( item ) { var encodedItem encodeItem( item ); return this.outputTemplate ? this.outputTemplate.output( encodedItem ) : encodedItem.name; }若未配置outputTemplate默认插入的就是候选的name文本。两者可以同时配置下拉里用itemTemplate展示富样式插入正文时用outputTemplate生成带链接、加粗或其他结构的 HTML。五、底层机制从输入到下拉渲染的完整链路理解了配置再看一眼 Mentions 插件是如何把一次键盘输入变成渲染好的下拉列表的。这一整条链路都封装在 plugins/mentions/plugin.js 与底层插件中插件注册与实例化CKEDITOR.plugins.add( mentions, { requires: autocomplete,textmatch,ajax, ... } )plugins/mentions/plugin.js。编辑器instanceReady后遍历editor.config.mentions数组为每个配置项创建一个Mentions实例plugins/mentions/plugin.js因此一个编辑器可以同时拥有多个不同 marker 的 Mentions 实例。文本匹配Text MatchMentions构造函数会基于marker、minChars和pattern生成textTestCallbackplugins/mentions/plugin.js内部调用CKEDITOR.plugins.textMatch.match在 DOM 文本节点中定位以 marker 开头、一直延伸到光标的候选文本片段。默认的正则模式由 createPattern 生成形如\[_a-zA-Z0-9À-ž]{2,}$——注意它额外支持了下划线与变音字符对应 Issue #2491见 diacritic.html 手动测试输入trąba_应匹配trąba_bomba。匹配逻辑还会拒绝marker 位于单词中间的情况plugins/mentions/plugin.js。文本监视Text WatcherAutocomplete 通过textWatcher监听输入变化命中时触发matched事件并把查询文本与 range 交给 model见 plugins/autocomplete/plugin.js 的onTextMatched。数据获取Data CallbackgetDataCallback根据feed的类型分三条路径取数plugins/mentions/plugin.js数组同步本地过滤默认忽略大小写可用caseSensitive关闭URL 字符串异步把{encodedQuery}占位符替换为 URL 编码后的查询词通过CKEDITOR.ajax.load请求 JSON 列表响应默认缓存cache: true且缓存全局共享函数异步每次输入都调用feed( { query, marker }, callback )自由度最高。视图渲染Viewmodel 拿到数据后触发change-dataAutocomplete 用itemTemplate逐条生成li并追加到面板plugins/autocomplete/plugin.js 的updateItems随后open()打开面板、selectFirst()选中首项、updatePosition把面板定位到光标附近。提交插入Commit用户按Tab或Enter默认提交键为[ 9, 13 ]可全局配置config.autocomplete_commitKeystrokes见 plugins/autocomplete/plugin.jscommit用outputTemplate生成最终 HTML 替换查询文本。正是这条链路保证了同一个数据源可以只改模板就得到完全不同的下拉观感而无需改动任何取数或匹配逻辑。六、viewTemplate 之外同一功能族的更多定制维度Mentions 的配置项远不止模板。与 viewTemplate 同目录的手动测试构成了一个完整的验证矩阵可作为你定制 Mentions 时的参考清单手动测试页面验证主题关键配置mentions.html三种 feed 并存数组、$URL、#回调多个 mentions 配置项、不同 markercasesensitive.html大小写敏感匹配caseSensitive: true、minChars: 1cache.htmlURL feed 响应缓存、请求去重cache: true、{encodedQuery}diacritic.html变音字符如波兰语匹配数组 feed 变音名称outputTemplate.html插入内容模板outputTemplateviewTemplate.html下拉视图模板本文主题itemTemplate其中 casesensitive.html 展示了大小写敏感的实际体验caseSensitive: true时输入小写a不弹窗输入大写A才弹出Anna、Annabelle。而 cache.html 则用页面上方的请求历史日志直观展示缓存效果重复输入相同查询时日志中不出现重复请求。其余常用配置项汇总默认值均取自 plugins/mentions/plugin.js 源码注释marker触发字符默认可设置为$、#、##等多字符 markerminCharsmarker 后需要的最少字符数默认2设为0表示输入 marker 即触发pattern自定义匹配正则覆盖默认模式例如//^a\w*$/只匹配以a开头的词caseSensitive数组 feed 是否区分大小写默认falsecacheURL feed 响应是否缓存默认truethrottle输入防抖间隔默认200毫秒itemsLimit下拉最多渲染条目数默认不限followingSpace4.20.0提交后是否自动追加空格需配合commitKeystrokes使用。七、如何在本地运行与验证本仓库使用 Bender 作为测试运行器手动测试页面可直接在浏览器中人工验收安装依赖并启动测试服务仓库根目录下执行npm install随后参照 bender.js 与 bender-runner.config.json 启动 Bender 服务./node_modules/.bin/bender server run或仓库配置的等效命令。在浏览器中打开手动测试列表选择mentions → viewTemplate用例页面即 tests/plugins/mentions/manual/viewTemplate.html。按用例步骤操作聚焦编辑器 → 输入→ 观察下拉。符合粗体 item:前缀即为通过否则按 Unexpected 描述定位问题通常是itemTemplate未生效或模板缺少data-id属性。自动化层面npm test体系会执行 tests/plugins/mentions/mentions.js 中的单元测试其中包含视图模板、输出模板、大小写、URL 编码、缓存去重、并发竞态test URL has no race condition等 20 余个用例可在无人工干预下回归验证模板相关行为。结语viewTemplate 用例虽然只有短短几行却精准覆盖了 Mentions 插件下拉候选展示这一核心体验面。把握三个要点即可举一反三itemTemplate控制下拉外观、outputTemplate控制插入正文的 HTML、模板必须保留data-id{id}的li结构。配合 plugins/mentions/plugin.js 中的配置项文档与 tests/plugins/mentions/manual 下的全套手动测试你可以把 提及功能定制成完全贴合业务形态的交互组件。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Mentions 插件 outputTemplate 深度解析自定义 提及插入内容的模板化实现与测试验证CKEditor 4 Mentions 插件 outputTemplate 深度解析自定义 提及插入内容的模板化实现与测试验证 导读 outputTempl前端UI组件Ant Design Blazor Select 组件 ItemTemplate 自定义选项模板实战指南Ant Design Blazor Select 组件 ItemTemplate 自定义选项模板实战指南 本指南围绕 ant design blazor 中 S前端UI组件设计系统CKEditor 4 Mentions 插件全解析三种数据源与自动补全机制的实战指南CKEditor 4 Mentions 插件全解析三种数据源与自动补全机制的实战指南 导读 Mentions 是 CKEditor 4 内置的智能自动补全插件前端UI组件上一篇GTA5线上模式库存资产任务进度一键查免费开源GTA5线上小助手下一篇如何从视频提取PPT成PDFextract-video-ppt 安装、跑通与调参实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考