Italiano
Română
РусскийAñadir un botón personalizado en TinyMCE 4, disponible desde WordPress 3.9-beta1
¿Cómo es posible añadir un botón personalizado al editor visual TinyMCE, Versión 4?
Actualmente encontré esta pregunta y respuesta con algunos indicios sobre el tema, pero no una solución o un tutorial. No puedo encontrar un tutorial, documentación o preguntas y respuestas sobre cómo añadir un botón personalizado a TinyMCE versión 4, incluido en WordPress desde la versión 3.9-beta1.
Objetivo
El siguiente pequeño plugin crea un botón personalizado dentro de la línea 1 del editor visual TinyMCE Versión 4 en WordPress, probado en WP Versión 3.9-beta2.
El plugin incluye var_dump para entender los valores. También es posible añadir el botón a otras líneas del editor visual, solo cambiando el hook, por ejemplo para la línea 2: mce_buttons_2.
Resultado
Plugin, lado PHP - tinymce4-test.php
<?php
/**
* Plugin Name: TinyMCE 4 @ WP Prueba
* 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;
// Solo en los tipos de contenido: post y page
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return ;
add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
// Añadir a la línea 1 del TinyMCE de WP
add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}
// Incluir el JS para TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {
$plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
// Imprimir todas las rutas de los plugins JS
var_dump( $plugin_array );
return $plugin_array;
}
// Añadir la clave del botón para acceder via JS
function fb_add_tinymce_button( $buttons ) {
array_push( $buttons, 'fb_test_button_key' );
// Imprimir todos los botones
var_dump( $buttons );
return $buttons;
}
Script, lado JavaScript - plugin.js
( function() {
tinymce.PluginManager.add( 'fb_test', function( editor, url ) {
// Añadir un botón que abre una ventana
editor.addButton( 'fb_test_button_key', {
text: 'Botón FB Test',
icon: false,
onclick: function() {
// Abrir ventana
editor.windowManager.open( {
title: 'Ejemplo de plugin',
body: [{
type: 'textbox',
name: 'title',
label: 'Título'
}],
onsubmit: function( e ) {
// Insertar contenido cuando se envía el formulario
editor.insertContent( 'Título: ' + e.data.title );
}
} );
}
} );
} );
} )();
Gist
Usa el Gist bueltge/9758082 como referencia o para descargar. El Gist también tiene más ejemplos para diferentes botones en TinyMCE.
Enlaces
- API de TinyMCE 4
- Guía de migración desde 3.x
- Ticket en WP Trac
- Fuente por defecto de TinyMCE para iconos
- Iconos alternativos via Dashicon o Genericons
- Plugins por defecto de TinyMCE
- Plugin de Compatibilidad - Este plugin contiene archivos de compatibilidad para la antigua rama 3.x. Permite ejecutar la mayoría de plugins antiguos de 3.x sin modificaciones.
La documentación de TinyMCE sobre cómo crear diálogos no es realmente muy útil. Así que me decidí a escribir un artículo que enumera los diferentes widgets y diseños de contenedores disponibles: http://makina-corpus.com/blog/metier/2016/how-to-create-a-custom-dialog-in-tinymce-4
Gagaro
Correcto, estaba dentro de mis Enlaces arriba en la lista de Enlaces.
bueltge
Ojalá hubiera encontrado esta respuesta antes de pasar media hora intentando agregarlo mediante un archivo CSS. Esto parece la mejor manera de hacerlo; todos los tutoriales que he encontrado en línea son innecesariamente verbosos.
aendra
Creo que esta no es la mejor manera. Incluir el wp-load.php no es estable. La ubicación de este archivo puede variar. La instalación de WordPress tiene opciones predeterminadas para mover las carpetas de temas y plugins.
bueltge