来自文件的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;
}