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

Question

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

此代码：

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

CKEDITOR.replace('editor1');

编辑器加载成功，但是"Styles"列表中没有我的样式。我的 css 文件的位置似乎是正确的，当我尝试其他路径时出现错误。

这是我的 test.css:

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

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

我尝试了另一件事：单独下载 StyleSheet Parser，将其放在插件文件夹中，然后使用以下代码：

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

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

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

来源：

Answer 1

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

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

CKEditor custom styles from file not showing