This project has moved. For the latest updates, please go here.

CSS on editable content

Nov 5, 2009 at 9:20 AM

What is the best way to get the editable content to inherit the page's css while editing?

Nov 5, 2009 at 1:29 PM

ok figured it out if anyone else wants to know, you can achieve this by putting the following code into the initialisation function in the jhtmlarea js file:

priv.initEditor.call(this, opts);
priv.attachEditorEvents.call(this);

//--- start inserted code-----               
 var cssLinks = $('head').children('link');
 for(var i = 0; i<cssLinks.length;i++)
 {
               $(cssLinks[i]).clone().appendTo(iframe.contents().find('head'));
 }

//--- end inserted code-----  

 

Note: this includes all css from your current page, which includes backgrounds etc. you'll want to include a text only css file that deals only with p, h1, h2 etc.

Nov 13, 2009 at 2:24 AM

Thanks noodols. Solved a similar problem I had.

Oct 1, 2010 at 3:11 PM

this doesn't work for me in IE6. It doesn't seem to like the '.appendTo' command. Anyone have a workaround?