前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载本文以 CKEditor 4 仓库中的手动测试用例 entitiesprocessnumericalforce.md 为核心完整还原该用例验证的场景——将 entities 插件配置entities_processNumerical设为force后命名 HTML 实体被强制转换为数字实体nbsp;→#160;的行为。结合 plugins/entities/plugin.js 的源码实现、CHANGES.md 中 #4941 修复记录与 tests/plugins/entities/entities.js 的自动化断言你将掌握该配置的完整生效链路、全部配置项取值以及如何在仓库内运行并验证这一行为。一、手动测试用例它在验证什么tests/plugins/entities/manual/entitiesprocessnumericalforce.md 是一个 Bender 手动测试manual test的描述文件全文如下含元信息bender-tags: bug, 4.20.0, 4941 bender-ui: collapsed bender-ckeditor-plugins: wysiwygarea, toolbar, entities, sourcearea 1. Open the source mode. **Expected** Named entities was converted to a numerical HTML entities: #160; #62; #60; #38; #34;. **Unexpected** Entities was not converted: nbsp; gt; lt; amp; quot;.三行元信息各有含义bender-tags: bug, 4.20.0, 4941标注该用例属于 bug 回归测试对应问题编号 #4941修复发布于 CKEditor 4.20.0bender-ui: collapsed测试页面以折叠最小化方式呈现编辑器bender-ckeditor-plugins实例化时加载wysiwygarea、toolbar、entities、sourcearea插件——其中sourcearea提供 “Source”源码模式按钮正是本用例的操作入口。用例的操作步骤只有一条打开源码模式。预期结果是被测内容中的命名实体全部转换为数字实体源码中的命名实体预期输出数字实体对应 Unicodenbsp;#160;NO-BREAK SPACEgt;#62;lt;#60;amp;#38;quot;#34;若输出仍为nbsp; gt; lt; amp; quot;则判定为 Unexpectedbug 复现。与.md配对的页面是 entitiesprocessnumericalforce.html它定义了被测的初始内容与编辑器配置div ideditor pnbsp; gt; lt; amp; quot;/p /div script CKEDITOR.replace( editor, { entities_processNumerical: force, lang: en } ); /script关键配置就是entities_processNumerical: force。测试组与运行环境方面从 bender.js 的结构看Plugins测试组指向tests/plugins/**bender.js而 Bender 的配置说明中提供了manualBrowsers接受手动测试的浏览器列表与manualTestTimeout手动测试超时bender.js两个配置项即.md描述的 manual 用例由测试人员按步骤人工执行仓库 package.json 中声明了benderjs ^0.4.6作为测试框架bender-runner.config.json 约定了 bender 服务端口 9001、测试服务端口 9002。二、源码实现force 是如何让实体变成数字形式的实体编码的全部逻辑位于 plugins/entities/plugin.js。下面按数据流顺序拆解。2.1 核心分支getEntity 中的 force 判断插件在afterInit阶段注册文本过滤规则其中决定输出形态的函数是plugin.jsfunction getEntity( character ) { return config.entities_processNumerical force || !entitiesTable[ character ] ? # getCodePoint( character ) ; : entitiesTable[ character ]; } // (#4941) function getCodePoint( character ) { return CKEDITOR.env.ie ? character.charCodeAt( 0 ) : character.codePointAt( 0 ); }分支语义是entities_processNumerical force无条件返回# 码点 ;即命名实体表entitiesTable被完全旁路——这就是手动测试中nbsp;不会输出为nbsp;而是#160;的直接原因非 force 但字符不在命名实体表中同样退化为数字实体否则输出命名实体如eacute;。值得注意的是getCodePoint非 IE 环境使用String.prototype.codePointAt(0)而非charCodeAt(0)。这个区别对 Unicode 平面之外BMP 之外的字符至关重要——例如 的码点是 128077若按 UTF-16 码元逐个取charCodeAt会得到代理对的两个半值 55357 与 56397输出错误的#55357;#56397;。这正是 #4941 的另一半症状CHANGES.md 记录了该修复#4941: Fixed: Some entities got wrongly encoded when usingentities_processNumerical trueconfiguration option.同目录的姊妹用例 encodeentities.md同样标注4.20.0, 4941验证的就是这一点entities_processNumerical: true下输入预期源码中只出现一个实体#128077;而不是拆成#55357;#56397;两个实体。2.2 两张映射表编码表与“反向解码”表实体表由buildTable构建plugin.js。它有一个特殊处理对象specialTableplugin.js// Entities that the browsers DOM does not automatically transform to the // final character. var specialTable { nbsp: \u00A0, // IE | FF shy: \u00AD, // IE gt: \u003E, // IE | FF | -- | Opera lt: \u003C, // IE | FF | Safari | Opera amp: \u0026, // ALL apos: \u0027, // IE quot: \u0022 // IE };从注释看这些实体在部分浏览器的 DOM 解析中不一定会自动折叠为字符例如某些浏览器里文本中的nbsp;可能仍以字面字符串存在。为此插件构造了两张表正向表entitiesTable由basicEntitiesnbsp,gt,lt,amp、拉丁实体、希腊实体与entities_additional拼合而成plugin.js把“字符 → 实体字符串”反向表baseEntitiesTablebuildTable( [ htmlbase, shy ].join( , ), true )plugin.js把字面实体字符串nbsp;、gt;、lt;、amp;、shy;还原为字符注释明确其用途是 “Decode entities that the browsers has transformed at first place”——先把 DOM 没有折叠干净的实体字符串统一解码成字符。2.3 双层正则与 htmlFilter 文本规则编码动作最终通过htmlFilter.addRules注册的text规则完成plugin.jshtmlFilter.addRules( { text: function( text ) { return text.replace( baseEntitiesRegex, getChar ).replace( entitiesRegex, getEntity ); } }, { applyToAll: true, excludeNestedEditable: true } );流程是两步替换baseEntitiesRegex先把残留的字面实体字符串解码为真实字符nbsp;→ U00A0entitiesRegex再把命中的字符按getEntity编码。entitiesRegex的拼装规则在plugin.jsvar entitiesRegex entitiesTable.regex ? [ entitiesTable.regex ] : a^; delete entitiesTable.regex; if ( config.entities config.entities_processNumerical ) { entitiesRegex [^ -~]| entitiesRegex; } // IE does not support unicode option in the Regex constructor (#4941). entitiesRegex new RegExp( entitiesRegex, CKEDITOR.env.ie ? g : gu );两个与 #4941 直接相关的细节都在这里仅当entities entities_processNumerical时才前置[^ -~]非 ASCII 可打印字符把中文、emoji、希腊字母等 BMP 外/非 ASCII 字符也纳入编码范围正则使用u标志Unicode 模式——在u模式下[^ -~]匹配的是“码点”而非“码元”emoji 这类代理对才能作为一个整体匹配IE 不支持u标志故回退为g并配合charCodeAt这也是为什么 #4941 相关测试在 IE 下assert.ignore()见 entities.js 与 encodeentities.html 中的bender.ignore()。此外规则注册前有一个前提检查plugin.js若editor.dataProcessor.htmlFilter不存在则直接return即整个实体编码功能依附于 htmlFilter。这一点有自动化测试佐证entities.js 中把htmlFilter置空为{}后force模式下输入lt;gt;amp;原样保留、不做任何转换。2.4 用源码串一遍手动测试的完整数据流以entitiesprocessnumericalforce.html的初始内容pnbsp; gt; lt; amp; quot;/p为例配置entities_processNumerical: force内容经 DOM 解析后nbsp;、gt;、lt;、amp;、quot;折叠为字符NBSP、、、、文本节点用户点击 SourcegetData走dataProcessor.toDataFormat文本节点命中 htmlFilter 的text规则第一步baseEntitiesRegex替换文本中没有字面实体字符串无变化第二步entitiesRegex替换由于启用了entities entities_processNumerical正则含[^ -~]分支五个字符全部命中getEntity因 force走# getCodePoint() ;分支依次输出#160;、#62;、#60;、#38;、#34;源码区最终显示p#160; #62; #60; #38; #34;/p与.md中的Expected完全一致。三、entities 插件配置项全景plugin.js 通过 JSDoc 与默认赋值声明了 6 个配置项汇总如下配置项类型默认值作用源码位置basicEntitiesBooleantrue是否转义基本 HTML 实体nbsp、gt、lt、amp文档注明仅在输出 BBCode 等非 HTML 格式时才考虑关闭plugin.jsentitiesBooleantrue是否在编辑器输出中使用 HTML 实体plugin.jsentities_latinBooleantrue是否把 Latin-1ISO 8859-1字母转为实体plugin.jsentities_greekBooleantrue是否把符号、数学符号与希腊字母转为实体对输入希腊文的用户尤其相关plugin.jsentities_processNumericalBoolean/Stringfalse把 ASCII 表之外的字符转为十进制数字实体设为force时把所有实体含命名实体强制转为数字形式如nbsp;→#160;plugin.jsentities_additionalString#39逗号分隔的补充实体名单写法不含前缀与;后缀支持实体名或数字如#1049添加西里尔字母 Йplugin.js官方 JSDoc 给出的两个典型用法plugin.jsconfig.entities_processNumerical true; config.entities_processNumerical force; // Converts from nbsp; into #160;;true与force的行为差异可由 entities.js 中的自动化断言精确定界配置组合输入期望输出结论断言位置force其余默认nbsp; gt; lt; amp; quot;#160; #62; #60; #38; #34;命名实体全部数字化与手动测试预期一致entities.jsforceentities_greek: trueαβγ…ω#945;#946;…#969;希腊字母不走命名实体entities.jsforceentities_latin: trueAgrave;Aacute;Icirc;Iuml;ETH;#192;#193;#206;#207;#208;拉丁字母不走命名实体entities.jsforceentities: falselt;gt;amp;#60;#62;#38;entities关闭后basicEntities仍在生效force 依旧数字化entities.jsforce 移除 htmlFilterlt;gt;amp;lt;gt;amp;不变功能完全依赖 htmlFilter 的 text 规则entities.jstrue非 forceentities_latin: falseAgrave;…ETH;#192;…#208;非 force 时只有“表中无命名实体”的字符才数字化entities.jstrue非 force¡¢£…›等符号串全部数字实体不含命名实体未列入名单的特殊字符按数字实体输出entities.jstrue非 force#4941#128077;#128516;#128525;#128151;单个码点一个实体不拆分代理对IE 下跳过entities.jsentities: false无 forcelt;gt;amp;原样关闭entities且非 force 时不做实体转换entities.jsentities_processNumerical: falselt;gt;amp;原样按命名实体原路返回默认行为不引入数字实体entities.js需要说明的适用前提以上行为以当前仓库版本package.json 中4.25.1的源码为准force的强制语义与 #4941 的码点修复自 4.20.0 起生效IE 环境因正则u标志与codePointAt均不可用相关数字实体行为按源码中的分支回退处理测试用例也在 IE 下主动跳过。四、运行与验证方式手动验证仓库为只读源码树无需构建产物即可验证——entitiesprocessnumericalforce.html 是一个独立页面只需按仓库目录结构由静态服务器提供即可用浏览器打开该页面并启用开发者工具观察CKEDITOR.instances.editor.getData()的输出然后按 entitiesprocessnumericalforce.md 的步骤 1 点击 Source 按钮比对源码区是否出现#160; #62; #60; #38; #34;。同目录还有两个可对照的用例encodeentities.mdtrue模式下 emoji 码点与 additional.mdentities_additional相关回归#2448。自动化验证仓库使用 Bender 框架benderjs ^0.4.6package.json 中还有benderjs-yui、benderjs-sinon等配套插件。按 bender.js 的定义Plugins测试组覆盖tests/plugins/**其中即包含 entities.jsbender.ci.js 进一步为 CI 环境配置了 headless Chrome/Firefox 作为启动浏览器。运行自动化断言时上表第 1 行force转数字的断言与本文开头的手动测试用例互为印证同一输入nbsp; gt; lt; amp; quot;同一期望#160; #62; #60; #38; #34;。小结这个看似只有两步的手动测试用例背后锚定的是 entities 插件中最容易出错的编码路径——getEntity的force旁路分支、双层“解码—再编码”的 htmlFilter 文本规则以及 #4941 修复引入的codePointAt码点处理与 Unicode 正则。理解了这条链路就能准确预测任意entities_*配置组合下的实体输出形态并知道到哪里去看断言依据entities.js与实现依据plugin.js。赞分享前端UI组件【免费下载链接】ckeditor4The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.项目地址https://gitcode.com/gh_mirrors/ck/ckeditor4点击查看免费下载相关推荐CKEditor 4 Autolink 插件粘贴 URL 时的 字符双重编码问题4858解析与验证CKEditor 4 Autolink 插件粘贴 URL 时的 字符双重编码问题 4858解析与验证 导读 在 CKEditor 4 的 Autolin前端UI组件CKEditor 4 font 插件的字号/字体样式保持机制preservestyle 手动测试场景与源码级实现剖析CKEditor 4 font 插件的字号/字体样式保持机制preservestyle 手动测试场景与源码级实现剖析 本文围绕 CKEditor 4 仓库中前端UI组件CKEditor 4 Format 插件行为验证Format 下拉重复点击不切换机制的实现与测试工单 584CKEditor 4 Format 插件行为验证Format 下拉重复点击不切换机制的实现与测试工单 584 本文围绕 CKEditor 4 仓库中的前端UI组件上一篇旧Mac升级macOS Catalina完整指南让你的老设备重获新生下一篇Sreg终极指南如何快速查询邮箱/手机号/用户名注册的互联网账号创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考