Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've created a plugin with a custom post type that uses the standard editor. Also on the page, I've got a button that causes a jQuery dialog to pop up that also contains the tinyMCE editor created with wp_editor. I would like to modify the list of buttons on the toolbar, but only for the SECOND editor (the one in the dialog box). Here's what I've got right now:

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

And my editor_dialog.js file looks like this:

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' } );
        });
    });
});

Here's what I've found out:

  1. If I remove the if ( 'myeditor' == $editor ) conditional then the buttons are filtered out for ALL of my editors, not just the AJAX one as I desire
  2. If I use print_r( $buttons ) or print_r( $settings[ 'theme_advanced_buttons1 ] )` in either of my filters I can see that my filters are running, that they only run when the AJAX editor is being loaded, and that the buttons I want filtered out appear to be filtered out
  3. Trying all combinations of these filters and also setting the theme_advanced_buttons1 parameter in the AJAX callback function does NOT seem to work

So, in short, I'm flummoxed and haven't been able to think of anything else to try. It looks like I've set the appropriate filters, but then why does the toolbar on my AJAX editor still have ALL of the standard WP tinyMCE toolbar buttons?

share|improve this question
    
I also tried raising/lowering the priority on the add_filter() calls. No luck. Somehow I believe the buttons are being cached on the first initialization. Brett Terpstra's trick for refreshing the buttons no longer works because the tiny_mce_version filter has been deprecated in the latest WP release. Think I'll head over to the WP Trac site to see if I can find out why they did that. –  morphatic Jan 24 '13 at 16:21
add comment

1 Answer 1

up vote 0 down vote accepted

Figured it out. After the first editor has loaded on a page, even if you modify the tinymce settings in the array passed to wp_editor(), those settings are NOT passed along to the tinymce instance that is created when the page is first loaded.

Instead you have to use javascript to modify the tinymce instance itself. You can leave out the filters altogether as well as the tinymce element of the wp_editor() settings array. Here's the updated code that works:

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

And then the editor_dialog.js file:

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' } );
        });
    });
});

It's nice when the solution shortens your code that much! Just wish there were better documentation.... :)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.