AppendStyleSheet removed when switching between source

I have a style sheet that gets appended using

editor.on('instanceReady', function () {
this.document.appendStyleSheet(cssPath);
});

I have it set the background color to green so I can easily see that its working. When i click on the Source button and then switch back the background is no longer green. Checking the source code, my stylesheet is no longer there as well. Is there a better way to append style sheets or a hook that would be called everytime the editor is put into rich text mode?

Sat, 07/05/2014 - 10:50

flh

Joined: 20/03/2013

Posts: 94

stylesheet in <head>

Seems you have the stylesheet inside the editing area ???

If you call in in the <head> of the page, I don't see how CKEditor should be able to remove it.

Sat, 07/05/2014 - 18:19

(Reply to #2) #3

Tissue901

Joined: 17/06/2014

Posts: 4

Yeah its super weird. My

Yeah its super weird. My solution i figured out is this:

        var cssPath = this.path + "styles.css";
       editor.on('instanceReady', function (e) {
           this.document.appendStyleSheet(cssPath);
           e.editor.config.contentsCss.push(cssPath);
       });

contentsCss.push() only works after the rich text mode is renabled and appendStyleSheet() only works when its first initilized. No clue how or why this happens, it isnt very logical.

Mon, 07/07/2014 - 13:38

reinmar

Joined: 24/08/2012

Posts: 631

It is very logical, but it

It is very logical, but it requires some knowledge how CKEditor works.

You listen to instanceReady event. It's fired after everything was set up and therefore changing configuration option at this point makes no difference - the option has already been used. However, it will be used again when switching between modes, because every time you do that entire editable area is being rebuilt from scratch.

Then, appending stylesheet to document has an immediate effect, because it's not a config option - it's a live DOM operation. But it works only once because you execute it once - after editor is ready.

The event you're looking for is editor#contentDom. It's fired every time editable area is rebuilt. However, you must add it quickly (on instanceReady is too late). For example you can do this right after creating editor instance:

var editor = CKEDITOR.replace( 'foo' );
editor.on( 'contentDom', function() { ... } );

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Tue, 07/08/2014 - 19:04

(Reply to #4) #5

Tissue901

Joined: 17/06/2014

Posts: 4

Hello,

Thanks for explaining the difference between the config and dom elements, makes a lot more sense now. I downloaded another plugin and looked at their source to find the contentDom listener.

What I ended up doing is

        editor.on('contentDom', function (e) {
           var doc = e.editor.document.$;
           var head = doc.getElementsByTagName("head")[0];
           var style = jQuery(head).find("#mymodule");
           if (! style.length) {
               var style = doc.createElement("link");
               style.setAttribute("rel", "stylesheet");
               style.setAttribute("type", "text/css");
               style.setAttribute("id", "mymodule");
               style.setAttribute("href", cssPath);
               head.appendChild(style);
           }

     }

Posting that incase anyone is ever looking how to add a stylesheet with other attributes. In my case I had to add an ID so I could easily disable and enable the style sheet with jquery.