来自文件的CKEditor自定义样式未显示

Question

我似乎无法将 我自己的 CSS 文件添加到 CKEditor。我正在下载自定义版本 4.5.8 并包含 "StyleSheet Parser" plugin。 “样式”列表具有默认样式，但不是我的 css 文件中的样式。

这是代码：

CKEDITOR.config.contentsCss = '../../../css/test.css';

CKEDITOR.replace('editor1');

编辑器加载成功，但“样式”列表不包含我的样式。我的 css 文件的位置似乎正确，当我尝试其他路径时出现错误。

这是我的 test.css：

.testStyle {
    color: red;
    font-family: "Arial Black", arial-black;
}

已经尝试清除我的浏览器缓存。我在多个浏览器中都试过了。

我尝试了另外一件事：单独下载StyleSheet Parser，放到plugins文件夹中，使用如下代码：

CKEDITOR.config.extraPlugins = 'stylesheetparser';
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');

“样式”列表仍然没有显示我的样式，但是当我像这样编辑源代码并放入我的样式时，样式将应用于编辑器中的文本（！）：

<p class="testStyle">Test text</p>

来源：

- CKEditor docs for the StyleSheet Parser

- The "contentsCss" option docs

Answer 1

CKEditor 中的样式需要一个元素，因此 StyleSheetParser 只识别包含元素和类名的规则。 您应该将 CSS 更改为

p.testStyle {
    color: red;
    font-family: "Arial Black", arial-black;
}