CKEditor 5 白标化与 Powered by CKEditor Logo 管理指南【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5开源GPL环境下的 CKEditor 5 会在编辑区域显示一个 Powered by CKEditor 徽标本文围绕 docs/getting-started/licensing/managing-ckeditor-logo.md 的官方说明深入讲解该徽标的引入背景、显示规则、移除白标化与保留方法、布局与样式定制方案并结合 poweredby.ts、editorconfig.ts 等仓库源码剖析其底层判定与定位机制。读完本文你将能够在自建集成中精准控制该徽标的显示、位置与外观并在持有商业许可时彻底完成编辑器白标化。为什么会有 Powered by CKEditor Logo从v38.0.0版本开始所有开源GPL安装的 CKEditor 5 都会在编辑区域的右下角显示一个小的 Powered by CKEditor 徽标该标签会直接链接到 CKEditor 官方网站。这一品牌策略旨在让整个社区知晓是谁在为他们的富文本编辑器提供底层能力与持续迭代。需要强调的是这个徽标是开源版本的一种默认呈现而不是编辑器功能的组成部分——它对编辑、保存等任何业务功能都没有影响纯粹是品牌展示。徽标的显示规则与触发条件徽标并非一直可见它遵循以下几条明确的显示规则对应源码实现在 badge.ts 中仅在编辑器获得焦点时显示当用户点击或聚焦编辑区域时才出现失焦后自动隐藏。这是通过editor.ui.focusTracker的change:isFocused与change:focusedElement事件驱动的。只在可编辑区域内显示徽标会附着在最后一次获得焦点的可编辑元素编辑器 root、源码编辑区等下方。有最小尺寸门槛编辑器需要至少350px × 50px才会展示徽标。这一阈值直接对应源码中的两个常量// packages/ckeditor5-ui/src/badge/badge.ts const NARROW_ROOT_HEIGHT_THRESHOLD 50; const NARROW_ROOT_WIDTH_THRESHOLD 350;适用于所有编辑器类型经典、内联、气泡balloon、解耦decoupled等所有编辑器 UI 类型都会遵循上述规则。徽标定位在编辑区外缘默认显示在编辑区底边position: border位于右下角side: right。从实现看徽标其实是一个BalloonPanelView气泡面板CSS 类ck-powered-by-balloon由 PoweredBy 类负责创建内部包含一个PoweredByView一个指向https://ckeditor.com/powered-by-ckeditor/的链接链接内是可选文本标签默认Powered by与 CKEditor 项目图标。当编辑区域过小或徽标无法完整可见时定位函数会返回null徽标便不会出现badge.ts。如何移除 Powered by CKEditor Logo白标化开源 GPL 安装无法通过配置直接隐藏徽标——唯一的正规途径是获取商业许可证然后在编辑器配置中设置许可证密钥。移除逻辑由 poweredby.ts 中的_isEnabled()方法决定protected override _isEnabled(): boolean { const editor this.editor; const forceVisible editor.config.get( ui.poweredBy.forceVisible ); if ( forceVisible ) { return true; } const licenseKey editor.config.get( licenseKey )!; if ( licenseKey GPL ) { return true; } const licenseContent parseBase64EncodedObject( licenseKey.split( . )[ 1 ] ); if ( !licenseContent ) { return true; } return !licenseContent.whiteLabel; }从这段源码可以清楚地看到判定链若ui.poweredBy.forceVisible为true徽标无条件显示若licenseKey为字符串GPL开源方式徽标显示若许可证密钥无法解析出有效内容徽标显示保守兜底只有当许可证内容明确带有whiteLabel白标标记时徽标才会被隐藏。配置 licenseKey 的正确姿势licenseKey是编辑器配置中的一个顶层选项定义见 editorconfig.ts。配置方式如下ClassicEditor .create( { // 商业许可证密钥开源 GPL 场景使用 GPL。 licenseKey: YOUR_LICENSE_KEY, plugins: [ /* ... */ ], toolbar: [ /* ... */ ] } ) .then( editor { /* ... */ } ) .catch( error { /* ... */ } );关于许可证密钥的获取与类型仓库中的 License key and activation 指南提供了完整说明要点如下GPL 密钥GPL仅适用于自托管分发npm 或 ZIP 下载通过 CDN 的云托管分发不接受GPL密钥始终要求商业密钥云场景可申请免费商业计划。商业密钥分为Trial14 天评估、Development开发环境、Production生产环境与Evaluation短时演示等类型各自有功能与使用限制。密钥可以在 Customer Portal 的 License keys 区域获取并复制到配置中一个密钥即可覆盖所有独立standalone功能。另外值得留意的是仓库中还实现了与许可证类型关联的Evaluation Badgeevaluationbadge.ts当许可证类型为evaluation/trial/development时会在编辑区下方显示 For evaluation purposes only 或 For development purposes only 提示并且它会自动与 Powered by 徽标对侧对齐左侧与右侧互换。关于 Powered by 徽标与评估徽标的关系两者都由同一个Badge基类badge.ts驱动使用同一个ui.poweredBy配置决定位置与边侧但评估徽标的side会取反evaluationbadge.ts从而避免两个徽标重叠。它们都只在编辑器聚焦时以气泡形式显示在编辑区底部。如何保留 Powered by CKEditor Logo即便你已购买商业许可证拥有白标资格如果希望继续展示该徽标例如出于对开源社区的支持或品牌联合展示只需将forceVisible设为true即可——该选项默认值为false定义见 editorconfig.tsClassicEditor .create( { /* ... */ ui: { poweredBy: { forceVisible: true } } } ) .then( /* ... */ ) .catch( /* ... */ );注意forceVisible在_isEnabled()判定中拥有最高优先级因此只要设置为true无论许可证类型如何徽标都会显示。如何配置徽标的布局对于开源用户而言徽标在编辑器聚焦时总会显示但你可以通过ui.poweredBy配置调整它的呈现细节以更好地匹配自己的产品集成完整配置类型见 PoweredByConfig。可配置的属性配置项取值默认值说明positioninside|borderborderborder徽标骑跨在编辑区底边线上inside徽标完全位于编辑区内部sideleft|rightrightRTL 语言为left徽标位于编辑区的哪一侧labelstring|nullPowered by徽标图标前的文字设为null可完全隐藏文字verticalOffsetnumber0border时/5inside时相对默认位置的垂直偏移border模式下以徽标垂直中心为基准horizontalOffsetnumber5编辑区边缘与徽标之间的水平间距forceVisiblebooleanfalse即使持有商业白标许可也强制显示徽标其中布局相关默认值统一来自 Badge 基类的_getNormalizedConfig()side会根据locale.contentLanguageDirection自动切换LTR →rightRTL →left而position: inside时垂直偏移会自动调整为5像素poweredby.ts。完整配置示例下面的示例将徽标移到编辑区内部左侧并自定义前置文案为 This isClassicEditor .create( { /* ... */ ui: { poweredBy: { position: inside, side: left, label: This is } } } ) .then( /* ... */ ) .catch( /* ... */ );对应仓库内的交互示例见 docs/_snippets/support/managing-ckeditor-logo-position.js 与 docs/_snippets/support/managing-ckeditor-logo-position.html聚焦编辑器即可观察定制后的徽标效果。如何定制徽标的样式仓库为集成方提供了一套开箱即用的 CSS 变量用于定制徽标外观。这些变量在主题源码 packages/ckeditor5-ui/theme/globals/_poweredby.css 中定义核心变量及其主题中的实际默认值如下:root { /* 徽标文字字号与行高基于 --ck-font-size-base 计算 */ --ck-powered-by-font-size: calc(var(--ck-font-size-base) * 7.5 / 13); --ck-powered-by-line-height: calc(var(--ck-font-size-base) * 10 / 13); --ck-powered-by-letter-spacing: calc(var(--ck-font-size-base) * -0.2 / 13); /* 内边距与文字颜色 */ --ck-powered-by-padding-vertical: 2px; --ck-powered-by-padding-horizontal: 4px; --ck-powered-by-text-color: hsl(0, 0%, 31%); /* 圆角、背景与边框边框色复用焦点边框色 */ --ck-powered-by-border-radius: var(--ck-border-radius); --ck-powered-by-background: hsl(0, 0%, 100%); --ck-powered-by-border-color: var(--ck-color-focus-border); /* 图标尺寸基于内置 SVG 的 53×10 尺寸计算 */ --ck-powered-by-svg-width: 53; --ck-powered-by-svg-height: 10; --ck-powered-by-icon-width: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 13); --ck-powered-by-icon-height: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 13); }官方文档 managing-ckeditor-logo.md 中给出的示例默认值如--ck-powered-by-border-radius: 100px可作为自定义参考而主题源码中的实际默认值如上所示绝大多数变量会随--ck-font-size-base缩放从而保持与编辑器整体主题的一致。适配深色主题Dark Mode示例文档提供了一个典型的深色模式定制方案通过覆盖ck-powered-by-balloon气泡的变量与内部元素样式让徽标与深色界面融为一体。对应样式如下/* Powered by CKEditor 徽标定制。 */ .ck.ck-balloon-panel.ck-powered-by-balloon { /* 可以在这里使用你自己的变量。 */ --ck-powered-by-background: hsl(270, 1%, 29%); --ck-powered-by-border-color: hsl(270, 1%, 29%); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-powered-by__label { text-transform: none; font-family: var(--main-font-family); padding-left: 2px; color: var(--main-text-color); } .ck.ck-balloon-panel.ck-powered-by-balloon .ck.ck-powered-by .ck-icon { filter: brightness(10); }说明几点源码层面的细节帮助你写出更精准的样式默认样式里ck-powered-by__label使用text-transform: uppercase且加粗_poweredby.css因此深色示例中特意用text-transform: none还原默认状态下图标是灰度且半透明的filter: grayscale(80%)、opacity: .66悬停时恢复全彩、不透明度提升为 1_poweredby.css当position: inside时气泡使用透明边框position: border时则套用焦点环边框样式_poweredby.css。仓库内的完整可运行示例见 docs/_snippets/support/managing-ckeditor-logo-styling.js 与 docs/_snippets/support/managing-ckeditor-logo-styling.html。验证与测试仓库对徽标行为提供了充分的测试覆盖可在以下测试文件中查看各种许可证与配置组合下的预期行为packages/ckeditor5-ui/tests/editorui/poweredby.js覆盖 GPL 密钥、商业白标密钥、forceVisible等场景下徽标的显示/隐藏判定packages/ckeditor5-ui/tests/editorui/evaluationbadge.js覆盖评估徽标与许可证类型的对应关系packages/ckeditor5-ui/tests/editorui/editorui.js覆盖编辑器 UI 整体对徽标组件的装配。此外packages/ckeditor5-ui/manual/poweredby/ 目录下提供了poweredby.ts、poweredby-force-visible.ts、poweredby-customized.ts三个手动测试用例分别对应默认显示、强制显示与定制布局三种形态是观察徽标行为最直观的入口。小结Powered by CKEditor 徽标的管理可以归纳为三条主线移除白标化获取商业许可证并配置config.licenseKey源码中对应whiteLabel标记生效保留即使是付费客户也可通过ui.poweredBy.forceVisible: true继续展示徽标定制通过ui.poweredBy控制位置、边侧、文案与偏移通过 CSS 变量体系深度定制外观适配明暗主题。如果你需要进一步调整编辑器整体主题而不只是徽标可以参考仓库的 docs/framework/index.md 主题定制相关章节许可证密钥的获取、类型与激活细节请查阅 docs/getting-started/licensing/license-key-and-activation.md。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考