CKEditor 样式标签

CKEditor 样式标签是用于自定义 CSS 样式的一种方法。通过在编辑器中添加样式标签，可以在编辑器内容中应用自定义 CSS 样式，使其在预览和发布时能够得到正确的呈现效果。

使用 CKEditor 样式标签

要使用 CKEditor 样式标签，需要在编辑器初始化时指定一个样式配置文件。例如：

CKEDITOR.replace( 'editor1', {
    stylesSet: 'my_styles:/path/to/my_styles.js'
} );

其中 my_styles 是自定义的样式名称，/path/to/my_styles.js 是样式配置文件的路径。

在样式配置文件中，可以为不同的 HTML 元素定义不同的 CSS 样式。例如：

CKEDITOR.stylesSet.add( 'my_styles', [
    { name: '特别强调', element: 'strong', styles: { color: 'red', 'font-weight': 'bold' } },
    { name: '引用', element: 'blockquote', styles: { 'font-style': 'italic', 'margin-left': '20px' } },
    { name: '自定义类名', element: 'span', attributes: { 'class': 'my-class' } }
] );

以上配置中，我们为 strong 元素定义了红色、粗体的样式；为 blockquote 元素定义了斜体、左边距为 20 像素的样式；为 span 元素定义了一个名为 my-class 的自定义类名。

在编辑器中使用这些样式标签的时候，可以通过 CSS 类名来应用样式。例如：

<p>
    这是一段 <span class="my-class">带有自定义类名</span> 的文本。
</p>

在预览和发布时，span 元素会被渲染为带有 my-class 类名的 HTML 元素，并应用相应的 CSS 样式。

总结

CKEditor 样式标签是一种方便、灵活的 CSS 样式自定义方式。通过在样式配置文件中定义 CSS 样式，可以在编辑器内容中应用这些样式，并在预览和发布时正确地呈现。