如何在没有css文件的情况下将css动态添加到ckeditor

Question

I have a situation where I am storing dynamic css data about a text object in a database as json. I need to map that same css data into styles in CKEditor. I am successfully able to load the classes into the CKEDITOR styles dropdown by parsing the json into the style set by running:

CKEDITOR.stylesSet.add('myStyles',styleObj);

Unfortunately this does not fully work with the onscreen text because the css does not exists as a file.

I've also successfully generate the css into the head of the dom by appending the dynamically generated css to a style tag. Unfortunately this still does not connect the actual css generated to the CKEDITOR because it is in a separate context.

Does anyone know how I can either connect document level css to the CKEDITOR instance or generate the CSS in a way that CKEDITOR understands? I'd prefer not to write a temporary CSS file to disk for every single user who needs to view the text object.

Answer 1

I figured out the answer to this by using the CKEDITOR.addCss() function. Instead of trying to load the css into the document head as styles, the process can be much simpler by running CKEDITOR.addCss() function.

The code looks like:

for each css style found in the json:

    styleObj.push({name:this.name,element:'p',attributes: { 'class':cssClassName}});
    var cssSheetString = '.'+cssClassName+' {font-family:'+this.fontFamily+'; font-size:'+fontSize+'; font-weight:'+this.fontStyle+'; text-decoration:'+textDecoration+'; } ';
    CKEDITOR.addCss(cssSheetString);

after the loop ends then also add the styles object:

if(!CKEDITOR.stylesSet.registered.myStyles){
                CKEDITOR.stylesSet.add('myStyles',styleObj);
            }

Answer 2

Just for posterity. I've seen answers that say this will work

    CKEDITOR.on('instanceCreated', function (event) {
        event.editor.addCss(styles);
    });

but it does not, you have to use

    CKEDITOR.on('instanceCreated', function (event) {
        CKEDITOR.addCss(styles);
    });

also if your styles variable changes you have to destroy and recreate your ckeditor instance with the new styles.