文件中的CKEditor自定义样式未显示 [英] CKEditor custom styles from file not showing

问题描述

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

I can't seem to add my own CSS file to the CKEditor. I'm downloading a custom version 4.5.8 and include the "StyleSheet Parser" plugin. The "Styles" list has the default styles, but not the ones from my css file.

此代码：

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

CKEDITOR.replace('editor1');

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

The editor is loaded successfully, but the "Styles" list does not contain my styles. The location of my css files seems right, when I try other paths I get an error.

这是我的test.css：

This is my test.css:

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

已经尝试清除我的浏览器缓存。我尝试了多种浏览器。

Already tried clearing my browsers cache. I tried it in multiple browsers.

我尝试了另一件事：分别下载StyleSheet Parser，将其放在plugins文件夹中，并使用以下代码：

I tried one other thing: download the StyleSheet Parser separately, put it in the plugins folder, and use the following code:

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

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

The "Styles" list is still not showing my style, but when I edit the source code and put my style in like this, the style is applied to the text in the editor(!):

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

来源：

-StyleSheet分析器的CKEditor文档

- contentsCss选项docs

推荐答案

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

The Styles in CKEditor require an element, so the StyleSheetParser only recognizes rules that include an element and a class name. You should change your CSS to

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

这篇关于文件中的CKEditor自定义样式未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！