setting external css to ck editor dynamically in djbrowser

Question

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');

Could you clarify the issue a little? Do you need to insert a CSS file that would provide custom styles for content within the editor or do you want to add custom items/selections to the stylesset dropdown menu? — Joel Peltonen, Apr 23 '13 at 19:52
i want to set a css file which will provide custom styles for the content within the editor. but the css file will be reached by url. — benchpresser, Apr 25 '13 at 06:59

score 2 · Answer 1 · edited May 23 '17 at 11:58

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"));

setting external css to ck editor dynamically in djbrowser

1 Answers1

Linked