TinyMCE - adding buttons to fullscreen mode

Let's start with the basic framework of the plugin:

add_action('admin_head', 'wordup_add_fullscreen_button');
add_action('admin_enqueue_scripts', 'wordup_add_css');
function wordup_add_fullscreen_button() {
  global $typenow;
  // sprawdzamy czy user ma uprawnienia do edycji postów/podstron
  if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') )
    return;
  // weryfikujemy typ wpisu
  if( ! in_array( $typenow, array( 'post', 'page' ) ) )
    return;
  // sprawdzamy czy user ma włączony edytor WYSIWYG
  if ( get_user_option('rich_editing') == 'true') {
     add_filter( 'wp_fullscreen_buttons', 'wordup_add_button_to_fullscreen_editor' );
  }
}
function wordup_add_button_to_fullscreen_editor( $buttons ){
    return $buttons;
}
function wordup_add_css() {
    wp_enqueue_style('wordup-tinymce', plugins_url('/style.css', __FILE__));
}

In fact, the above code is very similar to the code that we used when creating standard plugins for TinyMCE. The main difference is the following line:

add_filter( 'wp_fullscreen_buttons', 'wordup_add_button_to_fullscreen_editor' );

Which is responsible for adding our button - as you can see we’ve used the wpfullscreenbuttons filter instead of the standard one: mce_buttons.

The big differences don’t become noticeable until we start defining the button - we add our button by creating an appropriate associative array:

function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['IKONA'] = array(
        'title' => 'NAZWA',
        'onclick' => "AKCJA",
        'both' => false
    );

	return $buttons;
}

As we can see the above definition of the button includes its icon name, which is also the name of the button and its identifier in the list of full-screen buttons in the editor. The title field defines the hint which will be displayed when the cursor hovers on our button. In the onclick field we define the JavaScript code which will be run after the button is clicked - due to this we won’t use an external JS file; instead, we will define the button’s behavior just once, in the array. The last field, both, is a flag that determines whether our button will be visible in both editor modes - either both the visual and text mode, or just visually.

Let's start with the basic version of the button working only in the editor’s visual mode:

function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['icon dashicons-wordpress'] = array(
        'title' => 'WordPress button',
        'onclick' => "tinyMCE.activeEditor.insertContent('Hello World!');",
        'both' => false
    );
    return $buttons;
}

We wrote the above code bearing in mind the fact that my base plugin code includes an instruction to get icons from Dashicons; that’s why I named my plugin icon dashicons-wordpress. We achieve access to the editor with a tinyMCE.activeEditor object, which is an alias for the tinyMCE.editors[0] object. After loading the plugin our full screen editor looks as follows:

Image may be NSFW.
Clik here to view.

But what if we want our button to appear in the text-mode of the full-screen editor? It would initially seem that you’d only need to replace the both flag with true:

function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['icon dashicons-wordpress'] = array(
        'title' => 'WordPress button',
        'onclick' => "tinyMCE.activeEditor.insertContent('Hello World!');",
        'both' => true
    );
    return $buttons;
}

But after making this change, our button actually appears in the second tab and does not work when we click it. This is due to the fact that the text mode does not use the TinyMCE editor, so it requires additional manual JavaScript code to handle the action on click. The proper code of the text editor should instead be as follows:

function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['icon dashicons-wordpress'] = array(
        'title' => 'WordPress button',
        'onclick' => "if(tinyMCE.activeEditor) {
          tinyMCE.activeEditor.insertContent('Hello World!');
        } else {
          var cursor = jQuery('#content').prop('selectionStart');
          if(!cursor) cursor = 0;
          var content = jQuery('#content').val();
          var textBefore = content.substring(0,  cursor );
          var textAfter  = content.substring( cursor, content.length );
          jQuery('#content').val( textBefore + 'Hello World!' + textAfter );
        }",
        'both' => true
    );
    return $buttons;
}

First of all, we check whether the tinyMCE.activeEditor object exists - after switching to a text editor, this object is empty which allows us to easily tell if the full screen editor mode is activated. Then, we use the JavaScript API that allows us to read the cursor position in the textarea field, which in the case of a full screen editor has a content ID. Based on the position of the cursor, we may now divide the content of a text field to two strings - before and after the cursor. Then we insert our text between them and the resulting text is placed back in the box.