Geek Answers Handbook

Permanent body style in ckEditor

I have been trying all day to set the peristant style attribute to the body tag of the ckeditor instance. I could not find something like bodyStyle in ckeditor.config api (only bodyId and bodyClass). Therefore, I myself tried to do this using the following solution (using jQuery):

$(this).find('textarea.editor').ckeditor().ckeditorGet().on( 'instanceReady', function( e ){ var documentWrapper = e.editor.document, documentNode = documentWrapper.$, inh = $(documentNode.body); inh.css('background', inheritParentBackground); });

It works very well, but after I call .updateElement () or if I press the source button twice, it will delete all the styles again and “instanceReady” will not be called again. I tried to launch it manually, but then it first starts updating the style and gets direct overwrite from ckeditor.

What I'm really trying to do: I want to edit the Div on the home page, after klicking changes the ajax popup using ckeditor, and I want the editor to have the same height, width and background, and I can't handle this by bodyId or bodyClass, so I think I need a bodyStyle, or someone has a great idea.

0
source share
3 answers

I discovered a dirty hack:

 $(this).find('textarea.editor').ckeditor({ bodyId: Id+'" style="'+style, });

not very nice, but it works; -)

0
source

You have two options. You can add the inline style to the instanceReady handler with:

 var myStyleSheet = e.editor.document.appendStyleText("body {background:...}");

This adds an empty <style> element to the beginning of the iframed document containing the provided text. The return value is a CSSStyleSheet (browser DOM object), so if you save it somewhere, you can add, delete, or modify style rules using DOM methods from javascript. I'm not sure if they are saved through mode changes (i.e., after double-clicking "Source") or calls to setData (), but you can capture these things with the "mode" and "contentDom" events and reapply the table style in event handler. Note that (at least for the "mode" handler) you need to check that editor.mode==='wysisyg' , because editor.document is null in the original mode.

On the other hand, if you really want to set your inline styles in the <body> editor element, try defining a function:

 function setEditorStyle(e) { var ed = e.editor; if (ed.mode!=="wysiwyg") return; // don't set styles when in "Source" mode // now change whatever styles you want, eg: ed.document.getBody().setStyles({backgroundColor:"blue",color:"#FFFFFF",...}); // for setting just 1 style property, you can use .setStyle() instead }

then in your editor configuration you need to add:

 ..., on: { instanceReady: setEditorStyle, mode: setEditorStyle, ... }, ...

The style will be set both after the first creation of the iframe editor, and after switching to wysiwyg mode (normal editing, not the original mode).

I do not know why your styles are reset by calls to updateElement (); I am doing the same thing (using CKEditor v4), and updateElement () does not support resetting the inline styles set by me to <body> . Perhaps this has changed with the versions of CKeditor. In any case, if this is a problem, you can simply manually create a reset style after calling updateElement (). (I would say, "just call setEditorStyle ()", but as shown above, the function is written to require the event parameter e . Instead, you can rewrite it to use the external variable ed (for example, global var) - i.e. . change

 var ed = e.editor;

to

 if (!ed) ed = e.editor;

and then you can safely call setEditorStyle () from anywhere in your javascript after the editor has been created.)

0
source

More articles:


All Articles