样式
样式功能允许您将预配置的样式应用于内容中的元素。它通过向元素添加一个或多个 CSS 类来更改其外观或添加语义信息。
# 演示
使用下面的演示来测试样式功能。选择一段文字或标题，尝试应用各种样式。
此演示展示了一组有限的功能。访问 功能丰富的编辑器示例 以查看更多实际操作。
上述演示的配置
请参阅 配置 部分以了解有关配置格式的更多信息。
编辑器配置
// ...
style: {
definitions: [
{
name: 'Article category',
element: 'h3',
classes: [ 'category' ]
},
{
name: 'Title',
element: 'h2',
classes: [ 'document-title' ]
},
{
name: 'Subtitle',
element: 'h3',
classes: [ 'document-subtitle' ]
},
{
name: 'Info box',
element: 'p',
classes: [ 'info-box' ]
},
{
name: 'Side quote',
element: 'blockquote',
classes: [ 'side-quote' ]
},
{
name: 'Marker',
element: 'span',
classes: [ 'marker' ]
},
{
name: 'Spoiler',
element: 'span',
classes: [ 'spoiler' ]
},
{
name: 'Code (dark)',
element: 'pre',
classes: [ 'fancy-code', 'fancy-code-dark' ]
},
{
name: 'Code (bright)',
element: 'pre',
classes: [ 'fancy-code', 'fancy-code-bright' ]
}
]
},
// ...
样式表
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
.ck.ck-content {
font-family: 'PT Serif', serif;
font-size: 16px;
line-height: 1.6;
padding: 2em;
}
.ck-content .ck-horizontal-line {
margin-bottom: 1em;
}
.ck.ck-content hr {
width: 100px;
border-top: 1px solid #aaa;
height: 1px;
margin: 1em auto;
}
.ck.ck-content h3.category {
font-family: 'Bebas Neue';
font-size: 20px;
font-weight: bold;
color: #d1d1d1;
letter-spacing: 10px;
margin: 0;
padding: 0;
}
.ck.ck-content h2.document-title {
font-family: 'Bebas Neue';
font-size: 50px;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
}
.ck.ck-content h3.document-subtitle {
font-size: 20px;
color: #e91e63;
margin: 0 0 1em;
font-weight: normal;
padding: 0;
}
.ck.ck-content p.info-box {
--background-size: 30px;
--background-color: #e91e63;
padding: 1.2em 2em;
border: 1px solid var(--background-color);
background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) var(--background-size), transparent var(--background-size)), linear-gradient(135deg, transparent calc(100% - var(--background-size)), var(--background-color) calc(100% - var(--background-size)), var(--background-color));
border-radius: 10px;
margin: 1.5em 2em;
box-shadow: 5px 5px 0 #ffe6ef;
}
.ck.ck-content blockquote.side-quote {
font-family: 'Bebas Neue';
font-style: normal;
float: right;
width: 35%;
position: relative;
border: 0;
overflow: visible;
z-index: 1;
margin-left: 1em;
}
.ck.ck-content blockquote.side-quote::before {
content: "“";
position: absolute;
top: -37px;
left: -10px;
display: block;
font-size: 200px;
color: #e7e7e7;
z-index: -1;
line-height: 1;
}
.ck.ck-content blockquote.side-quote p {
font-size: 2em;
line-height: 1;
}
.ck.ck-content blockquote.side-quote p:last-child:not(:first-child) {
font-size: 1.3em;
text-align: right;
color: #555;
}
.ck.ck-content span.marker {
background: yellow;
}
.ck.ck-content span.spoiler {
background: #000;
color: #000;
}
.ck.ck-content span.spoiler:hover {
background: #000;
color: #fff;
}
.ck.ck-content pre.fancy-code {
border: 0;
margin-left: 2em;
margin-right: 2em;
border-radius: 10px;
}
.ck.ck-content pre.fancy-code::before {
content: "";
display: block;
height: 13px;
background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
margin-bottom: 8px;
background-repeat: no-repeat;
}
.ck.ck-content pre.fancy-code-dark {
background: #272822;
color: #fff;
box-shadow: 5px 5px 0 #0000001f;
}
.ck.ck-content pre.fancy-code-bright {
background: #dddfe0;
color: #000;
box-shadow: 5px 5px 0 #b3b3b3;
}
# 安装
在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中
import { ClassicEditor, Style } from 'ckeditor5';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Style, /* ... */ ],
toolbar: {
items: [
'style',
// More toolbar items.
// ...
],
},
style: {
definitions: [
// Styles definitions.
// ...
]
}
} )
.then( /* ... */ )
.catch( /* ... */ );
# 配置
配置样式功能需要两个步骤。首先，您需要在配置文件中定义样式，例如
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Style, /* ... */ ],
toolbar: {
items: [
'style',
// More toolbar items.
// ...
],
},
style: {
definitions: [
{
name: 'Article category',
element: 'h3',
classes: [ 'category' ]
},
{
name: 'Info box',
element: 'p',
classes: [ 'info-box' ]
},
]
}
} )
.then( /* ... */ )
.catch( /* ... */ );
然后，为文档定义相应的 CSS 样式
.ck.ck-content h3.category {
font-family: 'Bebas Neue';
font-size: 20px;
font-weight: bold;
color: #d1d1d1;
letter-spacing: 10px;
margin: 0;
padding: 0;
}
.ck.ck-content p.info-box {
padding: 1.2em 2em;
border: 1px solid #e91e63;
border-left: 10px solid #e91e63;
border-radius: 5px;
margin: 1.5em;
}
编辑器会自动区分文本和块样式，并将它们分组到下拉菜单中。
# 已知问题
目前，样式功能可能会与引入类似内容的其他功能（如标题）发生冲突。还可能出现对相同元素应用的重叠样式出现问题。
# 相关功能
还可以查看这些 CKEditor 5 功能，以更好地控制您的内容样式和格式
- 基本文本样式 – 应用最常用的格式，如粗体、斜体、下划线等。
- 字体样式 – 控制字体 系列、大小、文本或背景颜色.
- 标题 – 将您的内容划分为各个部分。
- 格式刷 – 轻松复制文本格式并将其应用于编辑文档中的不同位置。
- 移除格式 – 轻松清除基本文本格式。
- 通用 HTML 支持 – 启用其他 HTML，如
<style>和<classes>属性。
# 通用 API
Style 插件注册
- 由
StyleCommand实现的'style'命令。 'style'UI 下拉菜单。
您可以使用 editor.execute() 方法执行该命令
// Applies the style to the selected content.
// Executing the command again will remove the style from the selected content.
editor.execute( 'style', 'Article category' );
我们建议使用官方的 CKEditor 5 检查器 进行开发和调试。它将为您提供有关编辑器状态的大量有用信息，例如内部数据结构、选择、命令等等。
# 贡献
该功能的源代码在 GitHub 上的 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-style 上可用。
我们每天都在努力使我们的文档保持完整。您是否发现了过时信息？是否缺少内容？请通过我们的 问题追踪器 报告。
随着 42.0.0 版本的发布，我们重新编写了大部分文档，以反映新的导入路径和功能。感谢您的反馈，帮助我们确保文档的准确性和完整性。