当我在WordPress编辑器(如WordPress 3.9中的TinyMCE 4)和普通文本区域设置和获取内容时,我遇到了这种情况。我这样做是因为我的页面中有太多的富文本编辑器,我无法在每个textarea上放置wp_editor
。所以我提出了只打印一个wp_editor
并在这个和其他textareas之间动态设置和获取内容的方法。
到目前为止,我已经编写了以下代码片段:
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});
}
}
};
正如您所看到的,我并不完全了解哪个标签(TEXT或VISUAL)通过某些API处于活动状态。我想到这一点的唯一方法是标记为ugly hack
。
非常欢迎任何想法和帮助。感谢您抽出宝贵时间阅读本文:)
编辑:为了简单起见,我要问的是#34;对于WordPress编辑器中给定的tinyMCE实例,我们如何知道哪个选项卡(视觉或文本)是活动的?"