change the background color

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#117311 change the background color

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by [email protected] on Tuesday, 09 September 2025 12:46 BST

Saturday, 06 September 2025 23:04 BST

[email protected]

Hello

I use Joomla 5 , RTSFormPro and the JCE editor as standard editor.

Now I have in a from a textarea with JCE as editor. Via javascript I want now to change the background color of the textfield. I analysed with the develooper tools my html page and found out, that the textfield is the body of an iframe. I added for the body of the iframe in the developper tools a style parameter background: rd and it works. But how can I do it with javascript. Everything I tried failed like the following code:

var iframe = document.getElementById("event-beschreibung_ifr");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var iframeBody = iframeDocument.body;
iframeBody.style.backgroundColor = "lightblue";

I hope you caan help me a bit. I added the screen shots of my screen with the developper tools view. One the field is in white (because no style parameter was add). The other screenshot shows when I added the style parameter.

Regards

Hubert

Attachments

Screenshot textarea with JCE editor weiss.jpg

Screenshot textarea with JCE editor red.jpg

Tuesday, 09 September 2025 12:08 BST

Ryan

The styling of the editor area is set by your template. If you want to change the background colour of the editor area only, then add the following to your template stylesheet:

.mceContentBody {
    background-color: #eee; /* set the color you require */
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 09 September 2025 12:16 BST

[email protected]

As I want to do it dynamicly (depending on some dynamic conditions) is there any chance to do it by javascript?

Hubert

Tuesday, 09 September 2025 12:20 BST

Ryan

Try the following code:

tinymce.on('addEditor', function (e) {
	const ed = e.editor;
	ed.on('init', function () {
		const body = ed.getBody();
		if (body) {
			body.style.backgroundColor = '#eee'; // Set default background color
		}
	});
});

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 09 September 2025 12:21 BST

Ryan

This might work for Joomla Tinymce too, but I haven't tested that.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 09 September 2025 12:46 BST

[email protected]

its working. Thank you so much.

Best Regards

Hubert