1

Topic: Change textarea background color

Is there any way to change the entire textarea background color instead of just the color behind the text?

2

Re: Change textarea background color

I think this is the setting you are after: http://tinymce.moxiecode.com/tinymce/do … r_css.html

So basicly you would copy the themes/advanced/editor_ui.css to your own location, edit the colors and it should be ok.

.mceEditorArea {
    font-family: "MS Sans Serif";
    background: #FFFFFF;
}

3

Re: Change textarea background color

Actually I'm looking for a way for the user to change the background color themself, similar to the way you can pick a font color.

4

Re: Change textarea background color

dragoon wrote:

I think this is the setting you are after: http://tinymce.moxiecode.com/tinymce/do … r_css.html

So basicly you would copy the themes/advanced/editor_ui.css to your own location, edit the colors and it should be ok.

.mceEditorArea {
    font-family: "MS Sans Serif";
    background: #FFFFFF;
}

This is a hardcoded example of how to set the background color of the Editor Area.

How can you change the background color dynamically as the page is loaded?

5

Re: Change textarea background color

Figured it Out.

For an example in ASP to set the Background color you can use the folowing code in the tinyMCE.init section to set the CSS filename:
content_css : "<%=strFileNameCSS%>"

Now strFileNameCSS points to the CSS file of you choice and in that CSS file you can set a lot of variables including Background Color.

The Default CSS file is:  editor_content.css

  Good luck.

6

Re: Change textarea background color

or if you want to do it with javascript, without reloading the page, this should work:

tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#FF5588';

it uses the tinyMCE's own function to get the iframe window, as to focus on the iframe when you click on it (check the source code around the iframe)

7

Re: Change textarea background color

yze wrote:

or if you want to do it with javascript, without reloading the page, this should work:

tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#FF5588';

it uses the tinyMCE's own function to get the iframe window, as to focus on the iframe when you click on it (check the source code around the iframe)

Is it possible to execute this immediately after the tinyMCE.init command and have it take effect?

For example, here's what I'd like to do:

<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        force_p_newlines : false,
        force_br_newlines : true,
        plugins : "table,advhr,advimage,advlink,emotions,insertdatetime,preview,zoom,flash,searchreplace,contextmenu,paste,fullscreen,noneditable",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect,forecolor,backcolor",
        theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview",
        theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
        theme_advanced_buttons3_add_before : "tablecontrols,separator",
        theme_advanced_buttons3_add : "emotions,flash,advhr,separator,fullscreen",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        plugin_insertdate_dateFormat : "%m-%d-%Y",
        plugin_insertdate_timeFormat : "%H:%M:%S",
        extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        theme_advanced_resize_horizontal : false,
        theme_advanced_resizing : true
    });
    tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#00ff00';
</script>

But the color change doesn't take.

This doesn't work either:

<body onload = tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#00ff00';">

However, this below does, but is not what I want as I ultimately want to supply the color from a php or asp script after retrieving from a database and substitute in the script at initialization time (or immediately afterwards):

<p><a href="javascript:void(0);" title="change editor background to white" onclick = "tinyMCE.getInstanceById('mce_editor_1').getWin().document.body.style.backgroundColor='#FFFFFF';">[WHITE]</a> <a href="javascript:void(0);" title="change editor background to black" onclick = "tinyMCE.getInstanceById('mce_editor_1').getWin().document.body.style.backgroundColor='#000000';">[BLACK]</a></p>

Any suggestions???

Last edited by StevenWWinters (2006-01-04 23:46:44)

8

Re: Change textarea background color

Ok.  This *looks* like it should work, but doesn't.

function myCustomOnInit() {
    tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#00FF00';
}

tinyMCE.init({
    ...
    oninit : "myCustomOnInit"
});

However if I add an alert() statement before the tinyMCE.GetInstanceById line in the myCustomOnInit function, and wait until the page is fully loaded before clicking ok, it does work.  So the problem appears to be detecting when tinyMCE is truly completely done initiating and the web page loaded.  Any ideas on a work around???


function myCustomOnInit() {
    alert("We are ready to rumble!!"); // THIS WORKS IF YOU WAIT FOR THE PAGE TO LOAD BEFORE CLICKING OK.
                                                          // REMOVING THE alert() WILL CAUSE AN OBJECT NOT FOUND SCRIPT ERROR IN IE.   
    tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#00FF00';
}

tinyMCE.init({
    ...
    oninit : "myCustomOnInit"
});

Last edited by StevenWWinters (2006-01-05 03:23:39)

9

Re: Change textarea background color

Success!!!  Well sorta.  The following code sets the editor background color.

function myCustomSetupContent() {
    tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#00FF00';
}

tinyMCE.init({
    ...
    setupcontent_callback : "myCustomSetupContent()"
});


-----

However, IE indicates a script error:

Error: 'tinyMCE.getInstanceById(...)' is null or not an object

Setting: window.onerror="null";  before the call to: tinyMCE.getInstanceById doesn't disable the error either.

I may be able to live with this, but does anyone know how to prevent the script error?

TIA.

Steven W Winters

10

Re: Change textarea background color

FYI.  The above does work.  The jscript error mentioned is gone.  Not sure what was causing it.

11

Re: Change textarea background color

[sorry, new to tinymce] I also want to have a contol for users to set the entire background color, and the resulting output to also show this color.  Does any of the above code achieve this?  Could you be so kind as to explain in detail how this is achieved?  Many thanks.

12

Re: Change textarea background color

There are two ways, depending on what you are trying to do.

METHOD #1) In the tinyMCE.init({}); javascript function call that you place in your html page to initialize tinymce, add the following parameter:

content_css : "MyCustomCSS.css",

Where MyCustomCSS.css is the name and path of a css file with a style defined like the following.  I believe the path is relative to where the html page is loaded, but some experimentation may be necessary.  The debug parameter mentioned at the bottom of this posting is helpful in determining that:

body {
    background-color: #FF0000;
}

This would set the background color to red (#FF0000, being the hex color for red).

OR

METHOD #2) In the tinyMCE.init({}); javascript function call that you place in your html page to initialize tinymce, add the following parameter

setupcontent_callback : "SetMCEDefaults()"

Where SetMCEDefaults is the name of a javascript function you create like that below which is also included in your html <head></head> section.

function SetMCEDefaults() {
   tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#FF0000';
}

In the above statement, mce_editor_0 is a reference to the first text area on the web page with tinymce applied to it.  To refer to other editor enabled textareas, increment the last number to the appropriate value for the page. I.e. mce_editor_1 would be the 2nd, mce_editor_2, would be the 3rd, etc...

By supplying the hex color code above in server side scripting such as PHP or VB.ASP, you could store and retrieve the editor background color in a database or other location.

For reference see the online documentation:

http://tinymce.moxiecode.com/tinymce/do … ation.html

http://tinymce.moxiecode.com/tinymce/do … t_css.html

http://tinymce.moxiecode.com/tinymce/do … lback.html


Also, using the debug init parameter can be useful for troubleshooting path issues and such:

http://tinymce.moxiecode.com/tinymce/do … debug.html

I'm also new to tinymce.  It's a terrific little app!!!

Hope this helps,

Steven...

13

Re: Change textarea background color

Steven,
Thanks for the reply!  What I am hoping is that tinymce can do is this: 
In my textarea I already have a control for users to change the color of text, or its background color.  I wish to have a 3rd selector (with identical popup color palette) for background color of the textarea. 

Specifically, I see that what tinymce creates is html.  I suppose I'd like the new selector to wrap all content it produces with something maybe a div tag

<div style="background-color:_____">
where the color gets populated with whatever the user selects in the new color palette.

Would your above suggestions do this?  Would a custom module be required?  Thanks so much again.

Last edited by dado (2006-01-23 12:57:28)

14

Re: Change textarea background color

Error: 'tinyMCE.getInstanceById(...)' is null or not an object

This error occurs because the object has not yet been loaded. This will occur if you try to make a call before the tinyMCE code has finished loading.

I got around this by making a function for my initialisation scripts, and calling that function from within my page's body onload event.
Eg:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script language="javascript" type="text/javascript" xsrc="../jscripts/tiny_mce/tiny_mce_src.js"></script>

    <script language="javascript" type="text/javascript">

    tinyMCE.init({
        mode : "exact",
        elements : "myTextareaId",
        theme : "advanced"
    });


function createMCEListeners(){   
     tinyMCE.addEvent(tinyMCE.getInstanceById('myTextareaId').getDoc(), 'keydown',yourFunction);
     return;
}

    function yourFunction() {
        //        e = window.event ? window.event : e;

        //        if (e.keyCode == 13)
        //            doSomeFunkyStuff();
        alert("onmouseup");
    }
</script>

</head>

<body onload="createMCEListeners();" >



    <form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
        <textarea id="myTextareaId" rows="15" cols="80" style="width: 100%">text</textarea>
</form>
</body>

Don't bother trying to use the tinyMCE control on this forum - it just messes up your code!

15

Re: Change textarea background color

hi all

i have done this..
function myCustomSetupContent() {
    tinyMCE.getInstanceById('mce_editor_0').getWin().document.body.style.backgroundColor='#00FF00';
}

tinyMCE.init({
    ...
    setupcontent_callback : "myCustomSetupContent()"
});

the color changes, but the the iframe can't be use.. can't set bold, italic,... the tinymce function's are disabled...


if have content_css enabled..

any idea?

16

Re: Change textarea background color

Yes, I agree with Thomi. The js stuff does do what it's supposed to do (change the background color of the tinyMCE text area), but it disables the styles dropdown stuff. Any suggestions?

17

Re: Change textarea background color

I struggled getting the textarea to show up a different color. Sometimes I want it white and other times I want it another color. I have a web page that is white text on a black background. So, when editing using a white text style, I was unable to see the white text in the white background.  I never was able to set the background color to a specific color, but using the technique below I was able to set it to white or black.

In my PHP script that sets up tinymce, I set up a variable that says whether or not I have a black backround or not. (I'm actually defining it in my database table as Y or N)

    $bgcolor = $data["bgcolor"];
    $bg_css = "";
    if ($bgcolor == "Y") {
        $bg_css = ",black.css";
    }

The contents of black.css is:

body { background:#000000; } /* bg of editor */

The last thing is to set the content_css to append the value of $bg_css

content_css : "tinymce.css<? echo $bg_css; ?>",

So, the resulting value will be either

content_css : "tinymce.css",
or
content_css : "tinymce.css,black.css",

18

Re: Change textarea background color

Actually, it occurred to me that you could just store the name of the custom css file and define many other parameters as well:

$bgcolor = $data["bgcolor"];
if (strlen($bgcolor) > 0) {
        $bg_css = "," . $bgcolor;
}

19

Re: Change textarea background color

I found this works in Firefox and IE

setTimeout("document.getElementById('elm1_ifr').contentWindow.document.body.style.backgroundColor='#000000';", 100);

this code is in body of page after textarea.

20

Re: Change textarea background color

simple solution works on ie8 smile

   function myCustomSetupContent(editor_id, body, doc) {
     
       $(body).css('background','your_color');
}
   

tinyMCE.init({
......
setupcontent_callback : "myCustomSetupContent"

})