dynamically changing background css, etc.

Apr 20, 2011 at 4:11 PM


I need to be able to dynamically change the background css, font color and font styles, rather than using a css file.

For example:

$("#pageEditor").css("backgroundColor", "#000000");

Where "#pageEditor" would be a reference to the editor, changing the background color. 

I am not sure how to reference the editor frame or body.  Attempting to access the textarea doesn't have any effect. 


Any suggestions?

Geoff B

Apr 20, 2011 at 4:43 PM

Figured it out:

I added this line to init:


Then referenced as:


Works great.

Nice app!

Geoff B

May 20, 2011 at 9:49 PM
Edited May 20, 2011 at 10:57 PM

This was exceedingly helpful.  Thank you so much! 

Here is my code, copied directly from my site, hopefully it will help someone flesh out the details of how to modify the iframe.  In particular, it demonstrates how to modify the border of the editor.


//give the iframe an id, so that we can select it on the next line.  

$("iframe").attr("id", "txtText");           

//now that the iframe has an id, we can select it using jquery and modify the attributes.  

//I gave the textarea a gray background, set the text to a larger size so that people could read it more easily, and changed the font

$("#txtText").contents().find('body').css({"backgroundColor" : "#F0F0F0", "font-size" : "16pt", "font-family" : "'Trebuchet MS', Arial"  });

//to add a 4px blue border, modify txtText, not its body

 $("#txtText").css({"border": "4px solid #61A4D9" });

Feb 3, 2014 at 4:31 AM
Hello sir,

Please give me suggestion for how to put the external or custom toolbar for Font-Family or Font-size. I want to apply the selection of font-family and font-fize operation on the chosen text of editor. If you have any plugin for this (Like for-color chosen) with jHtmlArea then please give the link for this.

Give me answer as soon as possible.

Thank you.