CODEWITHSUNDEEP
javascriptwordpresstinymcewp-editor
HWD
HWD

Reputation: 1629

WordPress: Change admin wp_editor background color?

I'd like my user to be able to dynamically set the background color of the wp_editor on the Edit Page screen.

For example, I'm using the Iris color picker to let the user set a background color for their page.

I'd like this color to be applied to the visual editor as they are editing, so they will see what it looks like.

As a test, I tried modifying the editor's background color by calling: 

tinyMCE.init({
    selector: 'textarea',
    content_style: "div { background-color: #000000; }",
});

It didn't work.

Upvotes: 0

Views: 1761

Answers (2)

Michael Fromin
Michael Fromin

Reputation: 13744

The content_style setting works on elements inside the "body" of the HTML document in TinyMCE - what you really want to do is make the background of the <body> a different color.

To do this look at the content_css setting for the init:

tinymce.init({
  selector: 'textarea',
  ...
  content_css : "CSS/content.css"
});

This allows you to load an external CSS file for use inside TinyMCE. Then in the content.css file you can do something like this:

body {
  .
  .
  background-color: gray;
}

Now the background color of the editor itself will be gray (based on the above example).

If you use content_css you really don't need content_style as you can put all of your CSS in the external CSS file.

EDIT:

If content_css does not work, you could try using the onInit event and update the CSS:

tinymce.init({
  selector: 'textarea',
  setup: function (editor) {
    editor.on('init', function () {
        editor.getBody().style.backgroundColor = "#FFFF66";
    });
  ...
})

...which results in this:

enter image description here

(note that I just added this via the console to show that it can be done)

You would need a way to pass that color into the configuration object (a JS variable would work) but this should also get the job done.

Upvotes: 0

HWD
HWD

Reputation: 1629

Turns out all I needed to do was this:

tinyMCE.get(0).getBody().style.backgroundColor = color;

I'm using WordPress' built-in Iris Color Picker. Here's the full call:

$('.colorpicker').iris({
    change: function(event,ui){
        tinyMCE.get(0).getBody().style.backgroundColor = ui.color.toString();
    }
});

Upvotes: 1

Related Questions