问题:

I have a site with some WYSIWYG-fields (using TinyMCE with Wordpress & Advanced Custom Fields). I want to select and manipulate some elements inside these fields (add a background image) but I'm not sure how to do that.

How can I reach inside TinyMCE's iFrame and modify elements? How can I make sure all WYSIWYG-fields are properly loaded before I select them?

I'm looking at TinyMCE 4 API, and I still have no clue.

回答1:

How can I reach inside TinyMCE's iFrame and modify elements?

You can access the Iframe object using this.

tinymce.activeEditor.contentAreaContainer.childNodes[0];

You can access the Iframes document by using this.

tinymce.activeEditor.contentAreaContainer.childNodes[0].contentWindow.document;

How can I make sure all WYSIWYG-fields are properly loaded before I select them?

To know when tinymce has been fully initialized, attach the on init event to the initialization of the editor.

tinymce.init({
    .....    
    setup: function(editor){
         //fired when tinymce is loaded
         editor.on('init', function(e){                
            //All Loaded 
         });                          
    }
});