Agregue el botón personalizado TinyMCE 4, utilizable desde WordPress 3.9-beta1

20

¿Cómo es posible agregar un botón personalizado al editor visual TinyMCE, Versión 4 ?

Actualmente encontré estas preguntas y respuestas con un poco de pistas sobre el tema, pero no una solución o cómo hacerlo. Pero no puedo encontrar un tutorial, documentación, preguntas y respuestas sobre el tema para agregar un botón personalizado a la versión 4 de TinyMCE, incluido en WordPress desde la versión 3.9-beta1.

Objetivo

ingrese la descripción de la imagen aquí

bueltge
fuente

Respuestas:

24

El siguiente pequeño complemento crea un botón personalizado dentro de la línea 1 de la versión 4 de WordPress TinyMCE, probado en WP versión 3.9-beta2.

El complemento se ha var_dumpincluido para comprender los valores. También es posible añadir el botón a otras líneas del editor visual, sólo otro gancho, al igual que para la línea 2: mce_buttons_2.

Resultado

ingrese la descripción de la imagen aquí

Plugin, lado 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, lado de 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 );
                    }

                } );
            }

        } );

    } );

} )();

Esencia

Utilice el bueistge Gist / 9758082 como referencia o descárguelo. The Gist también tiene más ejemplos para diferentes botones en TinyMCE.

Campo de golf

bueltge
fuente
2
La documentación de TinyMCE sobre cómo crear un diálogo no es realmente muy útil. Así que seguí adelante y escribí un artículo que enumeraba los diferentes widgets y diseños de
Gagaro
3

Y, si desea tener un botón de icono real, puede aprovechar los dashicons o su propia fuente de icono.

Cree un archivo CSS y ponga en cola en el lado del administrador;

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

Básicamente tomado directamente del núcleo.

Dale Sattler
fuente
Correcto, estaba dentro de mis enlaces arriba en la lista de enlaces.
bueltge
Ojalá hubiera encontrado esta respuesta antes de pasar media hora tratando de agregarla a través de un archivo CSS. Esta parece ser la mejor manera de hacerlo; Todos los tutoriales que he encontrado en línea son innecesariamente detallados.
aendrew
0

El método simple de agregar botón

1) AGREGAR ESTE CÓDIGO EN FUNCIONES.PHP, O EN 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) Cree 1_button.php en la carpeta de destino e inserte este código (tenga en cuenta, cambie las URL "wp-load" y "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);  
})();
T.Todua
fuente
Creo que esta no es la mejor manera. La inclusión de wp-load.php no es estable. El ritmo, donde dejar este archivo es diferente. La instalación de WordPress tiene posibilidades predeterminadas para mover el tema y la carpeta de complementos.
bueltge