如何使用查询更改tinymce背景onchange的颜色

Question

I have a form with various input fields and if they change I want to change the background color

I use the following code which does what I need

$( document ).ready(function() {
    $('textarea, input, select').change(function () {
        $(this).css({ 'background': '#D6FFD6' });
    });
});

The problem comes with one of my fields which is a tinymce field

This is not affected by my code

If I inspect the element of the TinyMCE field the actual data is held in a hidden textarea and the text that shows is in an iframe

Is there any way I can change the background on change and if so how

Answer 1

To change the body background color you can use:

tinymce.activeEditor.contentDocument.body.style.backgroundColor = '#f0f0f0';

To get the active editor as a jQuery element, just use:

$(tinymce.activeEditor)

Edit:

You have to handle events separately, because textarea elements are replaced by the editor (this works on v4 version):

$('textarea, input, select').change(function () {
    $(this).css({ 'background': '#D6FFD6' });
});

tinymce.activeEditor.on('change', function(){
    this.contentDocument.body.style.backgroundColor = '#D6FFD6';
});

Last edit:

To get it work, you have to register events once window is loaded, like this:

// this is for v3
$(window).load(function() { 
    tinyMCE.activeEditor.onChange.add(function(){ this.contentDocument.body.style.backgroundColor = '#D6FFD6' }); 
});