Body persitant inline style in ckEditor
I'm trying all day to set up a 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). So I was trying it myself, with the following solution (jQuery is used):
$(this).find('textarea.editor').ckeditor().ckeditorGet().on( 'instanceReady', function( e ){
var documentWrapper = e.editor.document,
documentNode = documentWrapper.$,
inh = $(documentNode.body);
inh.css('background', inheritParentBackground);
});
Wich is working quite well, but after I call .updateElement() or if i click the source button twice, it will removes all the styles again and 'instanceReady' is not called again. I tried to fire it manually, but then it runs 开发者_高级运维the style update first and gets directly overwritten from ckeditor.
What I'm actual trying to do: I want to edit a Div in an homepage, after klicking edit a ajax popup apears with the ckeditor and i want the Editor to have the same height, width and Background and i can not handle this over bodyId or bodyClass, so I guess I need a bodyStyle or somebody has a diffrent idea.
Is http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.style what you're looking for?
I found out a dirty hack:
$(this).find('textarea.editor').ckeditor({
bodyId: Id+'" style="'+style,
});
not very nice but it works ;-)
You have two options. You can add an inline styleSheet in the instanceReady handler via:
var myStyleSheet = e.editor.document.appendStyleText("body {background:...}");
This appends an empty <style> element to the head of the editor's (iframed) document, containing the supplied text.
The return value is a CSSStyleSheet (a browser DOM object), so if you save it somewhere you can add, remove, or modify the style rules using DOM methods from javascript. I'm not sure if they persist through mode changes (i.e. after clicking "Source" twice), or calls to setData(), but you can capture these things using the 'mode' and 'contentDom' events, and reapply the styleSheet in the event handler. Note that (for the 'mode' handler at least) you need to check that editor.mode==='wysisyg', because editor.document is null in source mode.
On the other hand, if you really want to set your styles inline on the editor's <body> 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, e.g.:
ed.document.getBody().setStyles({backgroundColor:"blue",color:"#FFFFFF",...});
// for setting just 1 style property, you can use .setStyle() instead
}
then within your editor config, you need to add:
..., on: { instanceReady: setEditorStyle, mode: setEditorStyle, ... }, ...
Which will set the style both after the editor iframe is first created, and after switching back to 'wysiwyg' mode (normal editing, not source mode).
I don't know why your styles are being reset by calls to updateElement(); I'm doing the same thing (using CKEditor v4) and updateElement() does not reset inline styles I've set on <body>. Perhaps it's something that's changed with CKeditor versions. In any case, if it's a problem you can simply manually reset the style again after calling updateElement(). (I'd say "just call setEditorStyle()", but as shown above that function is written to require an event parameter e. Instead you could rewrite it to use an externally defined "ed" variable (e.g. a global var) - i.e. change
var ed = e.editor;
to
if (!ed) ed = e.editor;
and then you can safely call setEditorStyle() from any point in your javascript after the editor has been created.)
加载中,请稍侯......
精彩评论