CKEditor Styles not beeing applied inside CKEditor

Hi I have followed your documentation and also read on the official documentation for CKEditor to add a custom option to the “Styles” dropdown. (I get no where with this problem)

I can see the my custom option in the Styles dropdown, though when I mark text and apply it, the class as I want is set but there is no style applied inside the editor.
I can see the css file that holds my style in the network tab. (this seems to be loaded when I click on the dropdown, and the dropdown have the correct class and styling on itself)

This is my setup (I changed from config.js to globalconfig.js as it didnt work to beegin with)

Files I have in my wwwroot:
image

globalConfig.js

(function () {
    CKEDITOR.plugins.addExternal('stylesheetparser', '/Site/Editor/plugins/stylesheetparser/', 'plugin.js');
})();

(function () {
    var old = CKEDITOR.editorConfig;
    CKEDITOR.editorConfig = function (config) {
        old(config);
        config.contentsCss = '/Site/Editor/Editor.css';
        config.extraPlugins = 'stylesheetparser';
        //reset all the default styles so we only see ours.
        config.stylesSet = [];
    };
})();

styles.js

CKEDITOR.stylesSet.add('litium', [
    { name: 'Normal', element: 'p' },
    { name: 'Heading 1', element: 'h1' },
    { name: 'Heading 2', element: 'h2' },
    { name: 'Heading 3', element: 'h3' },
    { name: 'Heading 4', element: 'h4' },
    { name: 'Heading 5', element: 'h5' },
    { name: 'Heading 6', element: 'h6' },
    {
        name: 'Highlight',
        element: 'span',
        attributes: { 'class': 'highlight' }
    }
]);

editor.css

.highlight {
    color: #ff4b4b;
    font-weight: bolder;
}

Litium Backoffice shoots

(I can see the option together with the editor.css is in my network tab)
Though NO formatting is beeing applied inside the CKEditor :frowning:

Litium version: 8.3.1

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.