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

guide编辑器和内容样式

CKEditor 5 分发两种类型的样式

  • 编辑器样式，用于设置编辑器的用户界面样式。
  • 内容样式，用于设置编辑器中内容的样式。

如果你已经完成了我们的 快速入门，你可能已经注意到，在 JavaScript 中附加样式是相当标准的，我们提供了包含编辑器和内容样式的 CSS 样式表。

import 'ckeditor5/ckeditor5.css';

// If you are using premium features:
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

如果你决定使用我们的 CDN，在 HTML 中也很容易做到。

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.3.0/ckeditor5.css" />

<!-- If you are using premium features: -->
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.3.0/ckeditor5-premium-features.css" />

# 为什么需要内容样式？

一些 核心编辑器功能 会带来额外的 CSS 来控制它们生成的内容的外观。其中一个例子是 图像功能，它需要特殊的内容样式来渲染内容中的图像及其标题。另一个例子是 块引用 功能，它以斜体显示引号，并在侧面添加一个微妙的边框。你可以看到下面这两个示例。

Editor content styles.

# 自定义编辑器的外观

@ckeditor/ckeditor5-theme-lark 包含 CKEditor 5 的默认主题。Lark 是模块化的，BEM 友好，并使用 PostCSS 构建。

虽然它是在考虑到多功能性和最常见的编辑器用例的情况下设计的，但一些集成可能需要调整才能使其与它们的生态系统样式指南相匹配。这种自定义可以通过导入额外的 .css 文件并覆盖 原生 CSS 变量 来完成。

例如，下面的覆盖将调整编辑器中几个元素的边框半径，例如工具栏或上下文气球。

:root {
    /* Overrides the border radius setting in the theme. */
    --ck-border-radius: 4px;
}

查看 颜色表 以获取可自定义颜色的完整列表。你还可以浏览 其他文件 了解其他有用的工具。

# 自定义功能的外观

与可自定义的编辑器外观类似，一些功能还提供了一个接口，可以通过 原生 CSS 变量 更改其样式。

例如，如果你想更改提及的背景和文本颜色，可以进行以下覆盖。

:root {
    --ck-color-mention-background: black;
    --ck-color-mention-text: white;
}

在我们的 ckeditor5 和 ckeditor5-premium-features 包中查找可用的 CSS 变量。

# 设置已发布内容的样式

你的应用程序通常分为两个区域。内容创建，它托管编辑器，是一个写作工具；内容发布，它呈现已写的内容。

在应用程序的发布端使用内容样式非常重要。否则，内容在编辑器中和最终用户那里看起来会有所不同。

有两种方法可以获取内容样式

  • 来自 npm 包，在 dist/ckeditor5-content.css 和 ckeditor5-premium-features-content.css 位置。
  • 来自我们的 CDN，https://cdn.ckeditor.com/ckeditor5/

以下是一个示例，使用占位符路径显示如何在发布端加载 ckeditor5-content.css（以及 ckeditor5-premium-features-content.css，如果需要）文件。

<link rel="stylesheet" href="path/to/assets/ckeditor5-content.css">

<!-- If you are using premium features: -->
<link rel="stylesheet" href="path/to/assets/ckeditor5-premium-features-content.css">

<!-- If you have other style sheet that changes the look of the content: -->
<link rel="stylesheet" href="path/to/assets/styles.css">

最终的设置取决于你的应用程序的结构。如前所述，你可以使用我们的 CDN，或者你的 JS 捆绑器已经创建并提供组合的样式表。选择最适合你的情况的解决方案。

重要！

如果你仔细查看内容样式，你可能会注意到它们以 .ck-content 类选择器为前缀。这在 CKEditor 5 中缩小了它们的范围，因此它们不会影响应用程序的其余部分。要在前端使用它们，你需要将 ck-content CSS 类添加到内容容器。否则，样式将不会应用。

# 优化样式表的尺寸

ckeditor5 包分发了三个样式表

  • ckeditor5.css - 组合的编辑器和内容样式，
  • ckeditor5-content.css - 只有内容样式，
  • ckeditor5-editor.css - 只有编辑器样式。

ckeditor5-premium-features 包也是如此，但文件名不同

  • ckeditor5-premium-features.css - 组合的编辑器和内容样式，
  • ckeditor5-premium-features-content.css - 只有内容样式，
  • ckeditor5-premium-features-editor.css - 只有编辑器样式。

但是，这些样式表包含了所有编辑器插件的样式。如果你想优化样式表的尺寸，只包含你使用的插件的样式，可以按照 优化构建大小 指南操作。