CKEditor custom styles from file not showing

问题

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.

This the code:

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

CKEDITOR.replace('editor1');

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.

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.

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>

Sources:

- CKEditor docs for the StyleSheet Parser

- The "contentsCss" option docs

回答1:

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;
}

来源：https://stackoverflow.com/questions/36827393/ckeditor-custom-styles-from-file-not-showing