TinyMCE: Set background-color for complete editor content?

Question

I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like

<div style="background-color: #f00">[complete editor content]</div>

Thanks for any help.

Answer 1

You can use this code to access the tinymce's body to set background color:

tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';

Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.

You can also add a button on initialising tinymce:

tinymce.init({
...
        setup: function (editor) {
            editor.addButton('mybutton', {
                text: 'Set bgColor',
                icon: false,
                onclick: function () {
                    editor.getBody().style.backgroundColor = '#E5FFCC';
                }
            });
...
});