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.

How is it possible to add a custom button to the visual editor TinyMCE, Version 4?

Currently I found this q&a with a little bit hints to the topic, but not a solution or a how to. But I can't find a tutorial, documentation, q&a for the topic to add a custom button to the TinyMCE version 4, include in WordPress since version 3.9-beta1.

Goal

enter image description here

share|improve this question

2 Answers 2

up vote 11 down vote accepted

The follow small plugin create a custom buttom inside line 1 of the WordPress TinyMCE Version 4, tested in WP Version 3.9-beta2.

The plugin have var_dump include to understand the values. It also possible to add the button to other lines of the visual editor, only a other hook, like for line 2: mce_buttons_2.

Result

enter image description here

Plugin, php side - tinymce4-test.php

<?php
/**
 * Plugin Name: TinyMCE 4 @ WP Test
 * Description: 
 * Plugin URI:  
 * Version:     0.0.1
 * Author:      Frank Bültge
 * Author URI:  http://bueltge.de
 * License:     GPLv2
 * License URI: ./assets/license.txt
 * Text Domain: 
 * Domain Path: /languages
 * Network:     false
 */

add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
    global $typenow;

    // only on Post Type: post and page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return ;

    add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
    // Add to line 1 form WP TinyMCE
    add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}

// inlcude the js for tinymce
function fb_add_tinymce_plugin( $plugin_array ) {

    $plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
    // Print all plugin js path
    var_dump( $plugin_array );
    return $plugin_array;
}

// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {

    array_push( $buttons, 'fb_test_button_key' );
    // Print all buttons
    var_dump( $buttons );
    return $buttons;
}

Script, javascript side - plugin.js

( function() {
    tinymce.PluginManager.add( 'fb_test', function( editor, url ) {

        // Add a button that opens a window
        editor.addButton( 'fb_test_button_key', {

            text: 'FB Test Button',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open( {
                    title: 'Example plugin',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        label: 'Title'
                    }],
                    onsubmit: function( e ) {
                        // Insert content when the window form is submitted
                        editor.insertContent( 'Title: ' + e.data.title );
                    }

                } );
            }

        } );

    } );

} )();

Gist

Use also the Gist bueltge/9758082 as reference, download. The Gist have also more examples for different buttons in TinyMCE.

Links

share|improve this answer

And, if you'd like to have an actual icon button, then you can leverage dashicons, or your own icon font for it.

Create a CSS file, and enqueue on the admin side;

i.mce-i-pluginname:before {
    content: "\f164";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font: 400 20px/1 dashicons!important;
    speak: none;
    vertical-align: top;
}

Basically taken straight from core.

share|improve this answer
    
Right, was inside my Links above in the Links-list. –  bueltge Mar 27 at 9:02
    
Wish I had found this answer before spending half an hour trying to add it via a CSS file. This seems like the best way to do it; all the tutorials I've found online are unnecessarily verbose. –  aendrew Jul 14 at 9:24

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.