前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载导读本文围绕 CKEditor 4 Emoji 插件在 4.20.0 版本引入的emoji_followingSpace配置项展开以官方手动测试用例 followingspace.md 为主线结合 Autocomplete 插件源码与自动化测试讲清在编辑器中通过:bug这类别名触发自动补全、按回车确认插入表情后编辑器如何自动在表情符号后面补一个空格这一行为的前因后果。读完本文你将掌握该配置的启用方式、默认行为、底层实现原理、防重复空格机制以及与之配套的emoji_minChars、匹配规则等相邻配置。一、功能背景为什么要在表情后面自动补空格在 CKEditor 4 的 Emoji 插件中用户可以在可编辑区域直接输入形如:bug的短别名来触发自动补全建议框并按回车Enter确认将选中的表情符号如 插入到光标处。这在带来便捷的同时也引入了一个体验问题插入表情后光标紧贴表情符号^用户若想继续输入文字必须先手动敲一个空格否则后续文字会与表情粘连表情属于宽字符部分系统下渲染宽度接近两个 ASCII 字符粘连排版极易造成视觉混乱。为此CKEditor 4 在 4.20.0 版本对应 issue #2008为 Emoji 与 Mentions 两个基于 Autocomplete 的插件同时引入了插入后自动补空格的开关。CHANGES.md 中对本次功能扩展有明确记录config.emoji_followingSpace选项用于 Emoji 插件configDefinition.followingSpace选项用于 Mentions 插件。该开关默认关闭即默认情况下沿用旧行为^开启后则变为 ^。二、官方手动测试用例解析关联文档 tests/plugins/emoji/manual/followingspace.md 是一个标准的 Bender 手动测试用例用于人工验证上述功能。其测试前置条件由文档头部的 Bender 标签声明bender-tags: 4.20.0, feature, 2008 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, autocomplete, textmatch, emoji测试步骤非常简洁共三步将光标置于编辑器可编辑区域Place cursor on the editable输入:bug此时应弹出包含 的自动补全建议框按回车键确认插入Press enter。期望结果Expected插入后表情符号后面自动补了一个空格 ^Space has been added after the insertion。注意这里的空格在数据层面是不换行空格nbsp;而非普通半角空格。非期望结果Unexpected插入后表情符号后面没有空格^Space has not been added after the insertion。与它配套的测试页面 tests/plugins/emoji/manual/followingspace.html 揭示了该用例的启用前提——在替换编辑器时显式打开配置div ideditor/div script bender.tools.ignoreUnsupportedEnvironment( emoji ); CKEDITOR.replace( editor, { emoji_followingSpace: true } ); /script也就是说只有当emoji_followingSpace: true被显式设置时才会得到期望结果在默认配置下同样的三步操作会得到非期望结果即旧行为这正是该开关存在的意义。三、配置项详解与启用方式emoji_followingSpace是 Emoji 插件暴露给CKEDITOR.config的公开配置项其官方文档注释位于 plugins/emoji/plugin.js/** * Indicates if a following space should be added after inserted match into an editor. * * since 4.20.0 * cfg {Boolean} [emoji_followingSpacefalse] * member CKEDITOR.config */ CKEDITOR.config.emoji_followingSpace false;要点汇总属性值配置名emoji_followingSpace类型Boolean默认值false不自动补空格引入版本4.20.0作用对象通过输入别名触发自动补全并回车确认的插入场景在页面中启用方式即如上文测试页面所示在CKEDITOR.replace的配置对象中加入该选项即可CKEDITOR.replace( editor, { emoji_followingSpace: true } );相邻配置emoji_minChars 与匹配规则理解该开关前需要先明确 emoji 自动补全的触发条件。Emoji 插件在初始化时会读取两个关键配置见 plugins/emoji/plugin.jsemoji_emojiListUrl表情数据 JSON 的地址默认指向plugins/emoji/emoji.json通过CKEDITOR.ajax.load异步加载emoji_minChars触发建议框所需的别名最少字符数不含前置的:冒号默认值为 2。在插件源码中匹配回调使用如下正则来识别输入别名plugins/emoji/plugin.jsmatch left.match( new RegExp( (?:\\s|^)(:\\S{ charactersToStart }\\S*)$ ) );其中charactersToStart即emoji_minChars。该正则要求别名前必须是空白符空格或换行或行首因此输入:bug前通常需要一个前置空格或直接位于段落开头这与 tests/plugins/emoji/manual/spacerequired.md 手动用例所验证的行为一致。触发后dataCallback会对加载的表情列表按id做大小写不敏感的子串匹配并排序plugins/emoji/plugin.js例如:bug会命中 id 为:bug:、符号为 的条目。四、源码实现原理空格是如何被插入的emoji_followingSpace本身并不在 Emoji 插件中直接做插入逻辑而是被透传给底层 Autocomplete 插件的实例配置。在 plugins/emoji/plugin.js 中function initPlugin() { editor._.emoji.autocomplete new CKEDITOR.plugins.autocomplete( editor, { textTestCallback: getTextTestCallback(), dataCallback: dataCallback, itemTemplate: li>/** * Indicates if a following space should be added after inserted match into an editor. * * since 4.20.0 * readonly * property {Boolean} [followingSpace] */ this.followingSpace config.followingSpace;commit 提交流程当用户按回车或其他提交快捷键确认建议项时Autocomplete 的commit方法负责把选中的表情写入编辑器plugins/autocomplete/plugin.js核心代码如下var item this.model.getItemById( itemId ), editor this.editor, html this.getHtmlToInsert( item ); // Insert space after accepting match (#2008). html this.followingSpace ? nbsp; : ; editor.fire( saveSnapshot ); editor.getSelection().selectRanges( [ this.model.range ] ); editor.insertHtml( html, text ); if ( this.followingSpace ) { removeLeadingSpace( editor ); } editor.fire( saveSnapshot );整个流程可拆解为生成插入 HTMLgetHtmlToInsert依据outputTemplateemoji 插件为{symbol}生成要插入的内容追加空格若followingSpace为真则在 HTML 末尾拼接nbsp;不换行空格这就是手动用例中 ^里那个空格的数据形态快照与插入先触发saveSnapshot供撤销栈使用再把选区定位到查询词所在范围用editor.insertHtml( html, text )完成别名 → 表情 空格的替换防重复清理若followingSpace为真调用removeLeadingSpace( editor )见下再次保存快照保证一次提交在撤销历史中可整体回退。removeLeadingSpace防止空格重复如果用户输入:bug时别名前本来就带了空格插入的表情尾部又自动补了空格就可能出现两个连续空格。removeLeadingSpace正是为消除这种重复而设计的plugins/autocomplete/plugin.jsfunction removeLeadingSpace( editor ) { var selection editor.getSelection(), nextNode selection.getRanges()[ 0 ].getNextNode( function( node ) { return Boolean( node.type CKEDITOR.NODE_TEXT node.getText() ); } ); if ( nextNode nextNode.getText().match( /^\s/ ) ) { var range editor.createRange(); range.setStart( nextNode, 0 ); range.setEnd( nextNode, 1 ); range.deleteContents(); } }其逻辑是插入完成后查找选区之后的下一个文本节点若该文本节点以空白字符开头则用 Range 删除这段前导空白。由于表情之后的nbsp;已经由 commit 插入原来的前导空格被清除后不会造成空格缺失从而实现不多不少恰好一个空格。同生态对照Mentions 插件的 followingSpace相同的机制同样被 Mentions 插件复用。在 plugins/mentions/plugin.js 中Mentions 的配置定义声明了同名的followingSpace属性并在构造内部 Autocomplete 实例时透传this.followingSpace config.followingSpace; // ... this._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 } );因此凡是基于 Autocomplete 插件构建的自动补全功能emoji、mentions乃至自定义 autocomplete 场景都可以通过这一开关统一获得提交后自动补空格的能力。五、自动化测试验证行为被测试用例锁死除了手动用例该功能在 Autocomplete 插件还有一组自动化断言位于 tests/plugins/autocomplete/autocomplete.js均以// (#2008)标注对应 issue1. 空格被正确插入test following space is inserted after accepting match创建带followingSpace: true的 Autocomplete 实例在空内容中触发并回车提交后断言assert.areEqual( pitem1nbsp;/p, editor.getData() );2. 空格不会被重复test following space is not doubled光标前预置^nbsp;foo即别名前已有空格提交后断言恰好一个空格assert.areEqual( pitem1nbsp;foo/p, editor.getData() );3/4. 输出模板场景outputTemplate 相关两条使用strong{name}/strong作为输出模板分别验证原有空格与无空格两种前置条件下提交结果均为assert.beautified.html( pstrongitem1/strongnbsp;foo/p, editable.getData() );这四条用例从正反两个方向锁定了补空格与不重复补空格两个行为并覆盖了自定义输出模板的情况。需要留意的是这些用例在 IE 11 以下版本会被跳过// Ignore test due to IE issue (#2077).这与 Emoji 插件本身的环境支持策略一致——isSupportedEnvironment要求非 IE 或 IE 11见 plugins/emoji/plugin.js。此外Autocomplete 插件也提供了对应的手动用例 tests/plugins/autocomplete/manual/followingspace.html其脚本中同样以followingSpace: true初始化实例以及 tests/plugins/autocomplete/manual/existingspace.html、tests/plugins/autocomplete/manual/outputtemplatespace.html分别验证既有空格与输出模板下的空格行为与 emoji 的手动用例相互印证。六、实践建议与验证方法何时开启如果你的业务场景中用户习惯输入别名 → 回车插入 → 立即继续打字建议开启emoji_followingSpace: true避免表情与后续文字粘连如果表情通常作为独立元素或句子末尾使用可保持默认关闭。与前置空格的关系由于匹配正则要求别名前有空格或换行plugins/emoji/plugin.js配合followingSpace开启后最终效果是前置空格被清除、表情后补一个nbsp;整体排版仍保持表情前后各一个分隔空隙removeLeadingSpace保证了不会出现双空格。如何验证可参照 tests/plugins/emoji/manual/followingspace.md 的步骤在配置了emoji_followingSpace: true的编辑器实例中依次执行定位光标 → 输入:bug→ 按回车观察插入结果是否为 ^再在同一实例下对比关闭该配置时的^行为差异。环境注意该功能要求 Emoji 插件的受支持环境IE 11 及以上或非 IE 浏览器在旧版 IE 中相关测试会被忽略配置项不会生效。总而言之emoji_followingSpace是一个小而精的体验优化开关它由 Emoji 插件对外暴露配置由 Autocomplete 插件在提交流程中统一实现通过nbsp;追加与removeLeadingSpace去重两个动作最终保证了插入表情后自动补一个且仅一个空格并被手动用例与自动化测试双重覆盖。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Autocomplete followingSpace 配置实战在自动补全匹配项后自动插入空格CKEditor 4 Autocomplete followingSpace 配置实战在自动补全匹配项后自动插入空格 导读 本篇文章围绕 CKEditor 4前端UI组件CKEditor 5 Emoji 表情功能实战安装配置、: 自动补全与表情仓库加载机制详解CKEditor 5 Emoji 表情功能实战安装配置、 : 自动补全与表情仓库加载机制详解 本文以 CKEditor 5 仓库中 emoji 功能官方文档前端富文本UI组件CKEditor 4与表情符号集成Emoji插件开发与使用终极指南CKEditor 4与表情符号集成Emoji插件开发与使用终极指南 在现代化的富文本编辑体验中表情符号已成为不可或缺的沟通元素。CKEditor 4作为企业前端UI组件上一篇OneMore重新定义OneNote体验的生产力加速器下一篇5个专业级步骤显卡驱动深度清理从故障排查到系统优化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考