我创建了一个使用标准编辑器的自定义帖子类型插件。同样在页面上,我有一个按钮,可以弹出一个jQuery对话框,其中还包含用创建的tinyMCE编辑器wp_editor
. 我想修改工具栏上的按钮列表,但仅限于第二个编辑器(对话框中的编辑器)。下面是我现在得到的:
class MyPlugin {
function MyPlugin() {
// AJAX action that instantiates the second editor
add_action( \'wp_ajax_show_my_editor\', array( &$this, \'show_my_editor\' );
// enqueue the javascript that displays the editor in a dialog
add_action( \'admin_enqueue_scripts\', array( &$this, \'admin_enqueue_scripts\' ) );
/**
* Things I\'ve tried to get the buttons I don\'t want to go away
*/
// filter buttons directly
add_filter( \'mce_buttons\', array( &$this, \'mce_buttons\' ), 10, 2 );
// filter tinyMCE settings pre-init
add_filter( \'tiny_mce_before_init\', array( &$this, \'tiny_mce_before_init\' ), 10, 2 );
}
/**
* Enqueues the javascript/css that displays the editor in a dialog
*/
function admin_enqueue_scripts() {
wp_enqueue_script( \'editor_dialog_js\', plugins_url( \'js/editor_dialog.js\', __FILE__ ), array( \'jquery\', \'jquery-ui-dialog\' ), false, true );
wp_enqueue_style( \'jquery_ui_smoothness\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css\' );
}
/**
* Instantiates a wp_editor instance via AJAX call
*/
function show_my_editor() {
wp_editor( \'\', \'myeditor\', array(
\'media_buttons\' => false,
\'textarea_rows\' => 5,
\'teeny\' => false,
\'quicktags\' => true,
\'tinymce\' => array(
\'skin\' => \'wp_theme\',
\'plugins\' => \'wordpress, wplink\',
// setting buttons here should work, but doesn\'t
\'theme_advanced_buttons1\' => \'bold,italic\',
\'theme_advanced_buttons2\' => \'\',
\'theme_advanced_buttons3\' => \'\'
)
));
exit;
}
/**
* Supposed to filter out buttons I don\'t want
* Possibly redundant since \'theme_advanced_buttons1\' is set above
*/
function mce_buttons( $buttons, $editor ) {
// filter out buttons ONLY for the editor loaded via AJAX
if ( \'myeditor\' == $editor ) {
$buttons = array_diff( $buttons, array( \'strikethrough\' /* ...other buttons */ ) );
}
return $buttons;
}
/**
* Supposed to filter out buttons I don\'t want
* Possibly redundant since \'theme_advanced_buttons1\' is set above
*/
function tiny_mce_before_init( $settings, $editor ) {
// filter out buttons ONLY for the editor loaded via AJAX
if ( \'myeditor\' == $editor ) {
$settings[ \'theme_advanced_buttons1\' ] = \'bold,italic\';
}
return $settings;
}
} // end MyPlugin class
还有我的
editor_dialog.js
文件如下所示:
jQuery( document ).ready( function( $ ) {
$( \'#show_editor_dialog_button\' ).click( function() {
$.get( ajaxurl, { action: \'show_my_editor\' } )
.success( function( editor ) {
$( \'<div></div>\' ).html( editor )
.dialog({
modal: true,
buttons: { \'OK\': function() { $( this ).dialog( \'close\' ); } },
width: 500
});
tinymce.execCommand( \'mceAddControl\', true, \'myeditor\' );
quicktags( { id: \'myeditor\' } );
});
});
});
以下是我发现的:
如果我删除if ( \'myeditor\' == $editor )
然后,所有编辑器的按钮都会被过滤掉,而不仅仅是我想要的AJAX编辑器,如果我使用print_r( $buttons )
或print_r( $settings[ \'theme_advanced_buttons1
] )` 在我的任何一个过滤器中,我都可以看到我的过滤器正在运行,它们只在加载AJAX编辑器时运行,并且我想要过滤掉的按钮似乎被过滤掉了。
尝试这些过滤器的所有组合,并设置theme_advanced_buttons1
AJAX回调函数中的参数似乎不起作用,因此,简而言之,我很困惑,想不出其他方法来尝试。看起来我已经设置了适当的过滤器,但为什么AJAX编辑器上的工具栏仍然有所有标准的WP tinyMCE工具栏按钮?
最合适的回答,由SO网友:morphatic 整理而成
找到了答案。在页面上加载第一个编辑器后,即使您修改tinymce
传递给的数组中的设置wp_editor()
, 这些设置不会传递给tinymce
第一次加载页面时创建的实例。
相反,您必须使用javascript来修改tinymce
实例本身。您可以完全省略过滤器以及tinymce
的元素wp_editor()
设置数组。以下是有效的更新代码:
class MyPlugin {
function MyPlugin() {
// AJAX action that instantiates the second editor
add_action( \'wp_ajax_show_my_editor\', array( &$this, \'show_my_editor\' );
// enqueue the javascript that displays the editor in a dialog
add_action( \'admin_enqueue_scripts\', array( &$this, \'admin_enqueue_scripts\' ) );
}
/**
* Enqueues the javascript/css that displays the editor in a dialog
*/
function admin_enqueue_scripts() {
wp_enqueue_script( \'editor_dialog_js\', plugins_url( \'js/editor_dialog.js\', __FILE__ ), array( \'jquery\', \'jquery-ui-dialog\' ), false, true );
wp_enqueue_style( \'jquery_ui_smoothness\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css\' );
}
/**
* Instantiates a wp_editor instance via AJAX call
*/
function show_my_editor() {
wp_editor( \'\', \'myeditor\', array(
\'media_buttons\' => false,
\'textarea_rows\' => 5,
\'quicktags\' => true
));
exit;
}
} // end MyPlugin class
然后
editor_dialog.js
文件:
jQuery( document ).ready( function( $ ) {
$( \'#show_editor_dialog_button\' ).click( function() {
// ADD THIS LINE TO MODIFY THE BUTTONS DIRECTLY THROUGH TINYMCE
tinymce.settings.theme_advanced_buttons1 = \'bold,italic,ppadlinkto\';
$.get( ajaxurl, { action: \'show_my_editor\' } )
.success( function( editor ) {
$( \'<div></div>\' ).html( editor )
.dialog({
modal: true,
buttons: { \'OK\': function() { $( this ).dialog( \'close\' ); } },
width: 500
});
tinymce.execCommand( \'mceAddControl\', true, \'myeditor\' );
quicktags( { id: \'myeditor\' } );
});
});
});
当解决方案将您的代码缩短那么多时,这很好!只希望有更好的文档….:)