Özel TinyMCE 4 Düğmesi ekleyin, WordPress 3.9-beta1'den beri kullanılabilir

Görsel editör TinyMCE, Sürüm 4'e özel bir düğme eklemek nasıl mümkün olur ?

Şu anda bu q & a konuya biraz ipucu ile buldum , ama bir çözüm veya bir nasıl değil. Ancak konu için TinyMCE sürüm 4'e özel bir düğme eklemek için bir öğretici, dokümantasyon, soru-cevap bulamıyorum, 3.9-beta1 sürümünden beri WordPress'e dahil ediyorum.

Hedef

Aşağıdaki küçük eklenti, WordPress TinyMCE Sürüm 4'ün WP Sürüm 3.9-beta2'de test edilen 1. satırı içinde özel bir düğme oluşturur.

Eklenti, var_dumpdeğerleri anlamak için dahil edilmiştir. Düğmeyi görsel düzenleyicinin diğer satırlarına, satır 2'deki gibi sadece başka bir kancaya eklemek de mümkündür:mce_buttons_2 .

Sonuç

Eklenti, PHP tarafı - 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;
}

Komut dosyası, JavaScript tarafı - 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 );
                    }

                } );
            }

        } );

    } );

} )();

öz

Gist Bueltge kullanın / 9758082Referans olarak veya indirin. Gist'in TinyMCE'deki farklı düğmeler için daha fazla örneği var.

Bağlantılar

• TinyMCE API 4
• 3.x'ten taşıma kılavuzu
• WP Trac Biletler
• Simgeler-Yazı Tipleri için TinyMCE Varsayılan Yazı Tipi
• Dashicon veya Genericons üzerinden Alternatif Simge
• TinyMCE Varsayılan Eklentileri
• Compat Plugin - Bu eklenti, eski 3.x dalı için birkaç uyumluluk dosyası içerir. Bu, en eski 3.x eklentilerini herhangi bir değişiklik yapmadan çalıştırmanızı sağlar.

Ayrıca, gerçek bir simge düğmesine sahip olmak istiyorsanız, dashicon'lardan veya bunun için kendi simge yazı tipinizden yararlanabilirsiniz.

Bir CSS dosyası oluşturun ve yönetici tarafında sıkı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;
}

Temel olarak doğrudan çekirdekten alınır.

Düğme eklemenin basit yöntemi

1) BU KODU FONKSİYONLARA EKLEYİN.PHP VEYA FİŞTE

//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) Hedef klasöre 1_button.php oluşturun ve bu kodu ekleyin (not, "wp-load" ve "ButtonImage.png" URL'lerini değiştirin !!!)

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