I have a situation when I am setting and getting contents to and from WordPress Editor (TinyMCE 4 as in WordPress 3.9) and a normal textarea. I am doing this because there are just too many rich text editors in my page and I can not put a wp_editor
on every textarea. So I’ve come up with the approach of printing just one wp_editor
and dynamically set and get contents between this and other textareas.
So far I have written the following code snippet:
var Plugin = {
editorOpen : function(settings_box, container, origin) {
//Check wp_editor
var wp_editor_textarea = $(settings_box).find( 'textarea.wp_editor' ).eq(0);
if( wp_editor_textarea.length ) {
// The wrapping div of the wp_editor
// This is just how I am printing stuff
var wp_editor_container = container.find('.ipt_uif_builder_wp_editor');
// To get the RAW tinyMCE editor
// We are simply searching for the first textarea inside the wrapper
// This works
var tmce_textarea = wp_editor_container.find('textarea').eq(0);
// Init the tinyMCE API
var editor = tinyMCE.get( tmce_textarea.attr('id') );
// Get the original content
var content = wp_editor_textarea.val();
// Show it
wp_editor_container.css({position : 'static', 'left' : 'auto'});
// Set the content
// The problem with this is
// Even if the user has clicked TEXT tab, editor will still be a tinyMCE instance
// So this method can not be used to set the values
// Since we can not know like this if the user is on visual tab or text tab
// And the following snippet will always set the value on visual tab
if ( editor && editor instanceof tinymce.Editor ) {
editor.setContent( switchEditors.wpautop( content ) );
editor.save({ no_events: true });
console.log( 'Setter in TinyMCE: ' + switchEditors.wpautop( content ) );
} else {
tmce_textarea.val( switchEditors.pre_wpautop(content) );
console.log('Setter in TextArea: ' + switchEditors.pre_wpautop(content));
}
// But I have figured out an ugly hack to do it anyway
if ( tmce_textarea.is(':visible') ) {
// TEXT TAB active
} else {
// VISUAL TAB active
}
}
},
editorClose : function(settings_box, container) {
//Check wp_editor
var wp_editor_textarea = $(settings_box).find('textarea.wp_editor').eq(0);
if(wp_editor_textarea.length) {
// Get the tmce textarea
var tmce_textareaID = container.find('.ipt_uif_builder_wp_editor textarea').eq(0).attr('id');
var wp_editor_container = container.find('.ipt_uif_builder_wp_editor');
var tmce_textarea = wp_editor_container.find('textarea').eq(0);
var content;
var editor = tinyMCE.get(tmce_textareaID);
// Get the content
// Here again we may get the wrong content
// Since the content is always fetched from tinyMCE editor
// even if the TEXT tab is active
if( editor && editor instanceof tinymce.Editor ) {
content = switchEditors.pre_wpautop( editor.getContent() );
console.log('Getter in TinyMCE: ' + content);
} else {
content = $( '#' + tmce_textareaID ).val();
console.log( 'Getter in TextArea: ' + content );
}
// But I have figured out an ugly hack to do it anyway
if ( tmce_textarea.is(':visible') ) {
// TEXT TAB active
} else {
// VISUAL TAB active
}
//Update it
wp_editor_textarea.val(content);
//Hide the wp_editor
container.find('.ipt_uif_builder_wp_editor').css({position : 'absolute', 'left' : -9999});
}
}
};
As you can see, I am not exactly getting to know which tab (TEXT or VISUAL) is active through some API. The only way I could think of doing this is marked as the ugly hack
.
Any thoughts and help is very welcome. Thank you for taking the time to read this 🙂
EDIT: For the sake of simplicity, what I am asking is “For a given tinyMCE instance in WordPress editor, how do we know which tab (Visual or Text) is active?”