Tambahkan tombol TinyMCE 4 kustom, Dapat digunakan sejak WordPress 3.9-beta1

Bagaimana mungkin menambahkan tombol kustom ke editor visual TinyMCE, Versi 4 ?

Saat ini saya menemukan q & a ini dengan sedikit petunjuk untuk topik, tetapi bukan solusi atau cara melakukannya. Tetapi saya tidak dapat menemukan tutorial, dokumentasi, q & a untuk topik untuk menambahkan tombol kustom ke TinyMCE versi 4, termasuk di WordPress sejak versi 3.9-beta1.

Tujuan

Plugin kecil berikut ini membuat tombol kustom di dalam baris 1 dari WordPress TinyMCE Version 4, diuji dalam WP Version 3.9-beta2.

Plugin telah var_dumpdisertakan untuk memahami nilai. Ini juga mungkin untuk menambahkan tombol untuk jalur lain dari editor visual, hanya hook lain, seperti untuk baris 2: mce_buttons_2.

Hasil

Plugin, sisi PHP - 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, sisi JavaScript - 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 );
                    }

                } );
            }

        } );

    } );

} )();

Inti

Gunakan buistge / 9758082 Gist sebagai referensi, atau unduh. Gist juga memiliki lebih banyak contoh untuk berbagai tombol di TinyMCE.

Tautan

• TinyMCE API 4
• Panduan migrasi dari 3.x
• WP Trac Ticket
• TinyMCE Default Font untuk Ikon-Font
• Ikon Alternatif melalui Dashicon atau Generik
• TinyMCE Plugin Default
• Plugin Compat - Plugin ini berisi beberapa file kompatibilitas untuk cabang 3.x yang lama. Ini memungkinkan Anda untuk menjalankan sebagian besar plugin 3.x yang lama tanpa modifikasi apa pun.

Dan, jika Anda ingin memiliki tombol ikon yang sebenarnya, maka Anda dapat memanfaatkan dashicons, atau font ikon Anda sendiri untuk itu.

Buat file CSS, dan enqueue di sisi admin;

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

Pada dasarnya diambil langsung dari inti.

Metode sederhana untuk menambahkan tombol

1) TAMBAHKAN KODE INI KE FUNGSI.PHP, ATAU DALAM PLUGIN

//add_protect_shortcode_button
add_action('admin_init', 'add_cb_button');function add_cb_button() {
   if (current_user_can('edit_posts')  &&  get_user_option('rich_editing') == 'true') {
        add_filter('mce_buttons_2', 'register_buttonfirst');
        add_filter('mce_external_plugins', 'add_pluginfirst');
   }
}
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] =  plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) Buat 1_button.php di folder target dan masukkan kode ini (perhatikan, ubah url "wp-load" dan "ButtonImage.png" !!!)

<?php 
header("Content-type: application/x-javascript");
require('../../../../wp-load.php');
?>
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {  
        init            : function(ed, this_folder_url)
        {
                    // -------------------------
                    ed.addButton('shortcode_button1', {  
                        title : 'Show Level1 count',  
                        image : this_folder_url + '/ButtonImage.png',
                        onclick : function() {  
                            ed.selection.setContent('[statistics_sp]');  
                                //var vidId = prompt("YouTube Video", "");
                                //ed.execCommand('mceInsertContent', false, '[youtube id="'+vidId+'"]');
                        }  
                    });


        }, 

        createControl   : function(n, cm) {     return null;  }, 
    });  
    tinymce.PluginManager.add('MyPuginButtonTag', tinymce.plugins.shortcodebuton_plugin2);  
})();