CKEditor 生态系统文档
Search
Contribute to this guide
首页/CKEditor 5/入门

指南管理“Powered by CKEditor”徽标

从版本 v38.0.0 开始，所有 **开源** 的 CKEditor 5 安装都会在编辑区域的右下角显示一个小的“Powered by CKEditor”徽标。该标签直接链接到 CKEditor 网站。新的品牌推广方法旨在确保整个社区都知道是谁在为他们的富文本编辑器提供支持和现代化。

Placement of the “Powered by CKEditor” logo within the editor

此徽标仅在编辑器获得焦点时且仅在可编辑区域内可见。编辑器需要具有至少 350px x 50px 的最小尺寸才能显示徽标。它将显示在所有编辑器类型中。您可以在本指南中的演示编辑器中实际观察这种行为。

对于拥有商业许可证的客户，徽标 **将不会显示**，但请继续阅读，因为需要采取某些措施来白标您的 CKEditor 5 安装。如果您有任何疑问，可以 联系我们的技术支持团队。

但是，即使作为付费客户，您也可以 保留徽标，如果您愿意。

要删除徽标，您需要获得商业许可证，然后配置 config.licenseKey 设置。

有关在何处查找许可证密钥以及如何在配置中使用它的详细信息，请参阅 许可证密钥和激活 指南。

如果您希望即使您是付费客户（这里可能有很多原因），也要在您的编辑器中保留“Powered by CKEditor”徽标，您可以轻松地做到。只需将以下选项设置为 true（默认情况下设置为 false）即可享受品牌推广！

config.ui.poweredBy.forceVisible: true

对于免费的开源用户，“Powered by CKEditor”徽标始终在编辑器获得焦点时显示。但是，您可以调整它的一些方面以更好地适应您的编辑器集成。

# 布局自定义

您可以配置徽标的以下属性

  • 相对于编辑器底部边缘的 **位置**。默认情况下在边缘上。徽标也可以显示在容器内。
  • 相对于已配置的可编辑元素的角落的徽标 **偏移量**。
  • **对齐方式**：可编辑区域的左侧或右侧。
  • **标签** 文本，显示在 CKEditor 徽标之前。

完整的参考信息可在 API 文档 中找到。

以下示例显示了如何使用可用的编辑器配置调整徽标。将焦点放在编辑器上以显示自定义徽标。

泰姬陵：一首令人惊叹的爱的颂歌

Taj Mahal illustration.
泰姬陵及其诗意的白色大理石陵墓

没有参观过这座壮丽的纪念碑，您的印度之旅就不算完整，它被列为世界七大奇迹之一。

游客经常承认泰姬陵“根本无法用语言描述”。这可能是真的。你越尝试描述它，你就越变得无言以对。语言只能给出真相的表象。关于它美丽真相在您沉醉于根据一天中的不同时间展现的“泰姬”的不同色调时或欣赏立面不同角落的精美镶嵌工艺时才会显现。

这是必要的配置代码

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        /* ... */
        ui: {
            poweredBy: {
                position: 'inside',
                side: 'left',
                label: 'This is'
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 样式自定义

为集成者提供了一组现成的 CSS 变量。您可以使用它来自定义“Powered by CKEditor”徽标的样式。

/*
 * Default values.
 */
:root {
    --ck-powered-by-line-height: 10px;
    --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: 100px;
    --ck-powered-by-background: hsl(0, 0%, 100%);
    --ck-powered-by-border-color: var(--ck-color-focus-border);
}

如果需要，您可以深入研究，使其与您的产品保持一致。例如，这就是徽标如何修改以适合“暗模式”主题。

泰姬陵：一首令人惊叹的爱的颂歌

Taj Mahal illustration.

没有参观过这座壮丽的纪念碑，您的印度之旅就不算完整，它被列为世界七大奇迹之一。

游客经常承认泰姬陵“根本无法用语言描述”。这可能是真的。你越尝试描述它，你就越变得无言以对。语言只能给出真相的表象。关于它美丽真相在您沉醉于根据一天中的不同时间展现的“泰姬”的不同色调时或欣赏立面不同角落的精美镶嵌工艺时才会显现。

它仅通过几个样式规则实现

    /* "Powered by CKEditor" logo customization. */
    .ck.ck-balloon-panel.ck-powered-by-balloon {
        /* You can use your own variables here as well. */
        --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);
    }

请参阅 主题自定义 指南，了解如何调整编辑器主题。