Thêm nút TinyMCE 4 tùy chỉnh, có thể sử dụng kể từ WordPress 3.9-beta1

Làm thế nào có thể thêm một nút tùy chỉnh vào trình chỉnh sửa trực quan TinyMCE, Phiên bản 4 ?

Hiện tại tôi tìm thấy câu hỏi này với một chút gợi ý cho chủ đề, nhưng không phải là giải pháp hay cách làm. Nhưng tôi không thể tìm thấy hướng dẫn, tài liệu, q & a cho chủ đề để thêm nút tùy chỉnh vào TinyMCE phiên bản 4, bao gồm trong WordPress kể từ phiên bản 3.9-beta1.

Mục tiêu

Plugin nhỏ sau đây tạo một nút tùy chỉnh bên trong dòng 1 của WordPress TinyMCE Phiên bản 4, được thử nghiệm trong WP Phiên bản 3.9-beta2.

Các plugin đã var_dumpbao gồm để hiểu các giá trị. Cũng có thể thêm nút vào các dòng khác của trình soạn thảo trực quan, chỉ một móc khác, như cho dòng 2 : mce_buttons_2.

Kết quả

Plugin, bên 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;
}

Tập lệnh, JavaScript bên - 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 );
                    }

                } );
            }

        } );

    } );

} )();

Ý chính

Sử dụng Gist bueltge / 9758082 làm tài liệu tham khảo hoặc tải xuống. Gist cũng có nhiều ví dụ cho các nút khác nhau trong TinyMCE.

Liên kết

• API TinyMCE 4
• Hướng dẫn di chuyển từ 3.x
• Vé WP Trac
• Phông chữ mặc định TinyMCE cho các biểu tượng-Phông chữ
• Biểu tượng thay thế thông qua Dashicon hoặc Genericons
• Plugin mặc định TinyMCE
• Plugin Compat - Plugin này chứa một vài tệp tương thích cho nhánh 3.x cũ. Điều này cho phép bạn chạy hầu hết các plugin 3.x cũ mà không cần sửa đổi gì.

Và, nếu bạn muốn có một nút biểu tượng thực tế, thì bạn có thể tận dụng dấu gạch ngang hoặc phông chữ biểu tượng của riêng bạn cho nó.

Tạo một tệp CSS và enqueue về phía quản trị viên;

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

Về cơ bản lấy thẳng từ lõi.

Phương pháp đơn giản để thêm nút

1) THÊM MÃ SỐ NÀY VÀO CHỨC NĂNG.PHP, HOẶC TRONG 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) Tạo 1_button.php trong thư mục đích và chèn mã này (lưu ý, thay đổi "wp-load" và "ButtonImage.png" url !!!)

<?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);  
})();