如何在通过AJAX添加的wp_EDITOR中从tinyMCE中删除按钮

时间:2013-01-23 作者:morphatic

我创建了一个使用标准编辑器的自定义帖子类型插件。同样在页面上,我有一个按钮,可以弹出一个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工具栏按钮?

  • 1 个回复
    最合适的回答,由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\' } );
            });
        });
    });
    
    当解决方案将您的代码缩短那么多时,这很好!只希望有更好的文档….:)

    结束

    相关推荐

    在Tinymce自定义按钮开发期间防止缓存

    我在跟踪this turial 介绍如何在WordPress中向TinyMCE编辑器添加自定义按钮。试图编辑作者的JS以包含我的功能,但它似乎已被缓存。文章作者对此有一个技巧(下面的代码片段),它第一次成功了(按钮现在在工具栏中),尽管它不适用于后续刷新。// \"This will intercept the version check and increment the current version number by 3. // It\'s the quick and dirty way