setting external css to ck editor dynamically in djbrowser

问题

i embedded ck editor (recent version 4.1) into dj browswer. dj browser

and i want to set a external css file (http://mystyle.css) into the ck editor.

but i do not want to modify or edit config files of ck editor. the url of css should be set dynamically, on the run time and its name and url can be changed.

what i tried is invoking the following command, but did not help.

CKEDITOR.stylesSet.add('mystyle');
..
CKEDITOR.config.stylesSet('mystyle:http://mystyle.css');

回答1:

They key is to access the document object of the CKE iframe. Then you just vomit a CSS link to the head of the document without touching the config. Example is from https://stackoverflow.com/a/577002/694325

I am assuming that you use "editor1" for the name, but use whatever you have..

var doc = CKEDITOR.instances.editor1.document.$; // get CKE doc!
var cssId = 'myCss';
if (!doc.getElementById(cssId))
{
    var head  = doc.getElementsByTagName('head')[0];
    var link  = doc.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://my.little.pony.net/Your.css';
    link.media = 'all';
    head.appendChild(link);
}

Or you could jQuery it if you are into that kind of stuff (https://stackoverflow.com/a/2685661/694325)

var doc = CKEDITOR.instances.editor1.document.$; // shortcut
$("<link/>", {
   rel: "stylesheet",
   type: "text/css",
   href: "http://my.little.pony.net/Your.css"
}).appendTo($(doc).find("head"));

来源：https://stackoverflow.com/questions/16081472/setting-external-css-to-ck-editor-dynamically-in-djbrowser

标签

javascript

html

css

browser

ckeditor