Crear un botón costumizado para TinyMCE para hacer cosas simples, como agregar elementos o HTML al editor, es bastante sencillo. Se necesitan 4 cosas:
- La imagen del botón. Esta debe ser una imagen 20px por 20px. Si es de otro tamaño el editor alterará el alto y el ancho de la imagen para que se de ese tamaño.
- El código HTML o elemento que quieres que se inserte en el editor.
- El código javascript. Este se debe añadir al objeto de configuración del tinyMCE.init().
- Agregar el nuevo botón a la lista de botones.
Imagen
Como he mencionado antes la imagen debe ser 20px por 20px. Si la imagen es un gif o un png con transparencia se podrá apreciar el efecto “hover”, osea, el cambio que ocurre cuando se pone el pointer del mouse encima del botón. En este caso he usado esta imagen sacada de IconFinder. La imagen es originalmente 16px por 16px. Yo la he llevado al tamaño adecuado:
Código html que se va a insertar
Para este ejemplo yo usaré la frase “Hola Mundo!“, pero pueden sustituir este código por lo que quieran:
Hola Mundo!
Código javascript que creará la funcionalidad
La última parte, pero a la vez la más importante, es el código el cual debe insertarse en el objeto de la configuración de tu tinyMCE.init(). Este es el código:
setup : function(editor) {
// Boton 1
editor.addButton('mi_boton', {
//nombre del boton
title : 'Mi boton',
//imagen del boton (20 x 20 px)
image : 'mi_imagen.png',
//funcion a ejecutarse cuando se le de clic al boton.
onclick : function() {
editor.focus();
editor.selection.setContent('Contenido a insertar');
}
});
}
A continuación hago un desglose del código:
setup
El método “setup” añade eventos al editor. Como parámetro pasamos el objeto del editor:
setup : function(editor) {
editor.evento(parametro)
}
addButton
Es un método del objeto del editor el cual añade el botón a la barra de botones.
ed.addButton('example', {
title : 'example.desc',
image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
onclick : function() {
ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
}
Este método acepta dos parámetros:
- el nombre del botón
- un objeto con las opciones del botón.
Las opciones del objeto son las siguientes:
- title: titulo del botón
- image: ruta de la imagen que se va a utilizar para el botón
- onclick: función con el evento click del botón
En el caso de mi ejemplo este es el resultado:
setup : function(editor) {
// Boton 1
editor.addButton('mi_boton', {
//nombre del boton
title : 'Hola Mundo',
//imagen del boton (20 x 20 px)
image : 'page_add.png',
//funcion a ejecutarse cuando se le de clic al boton.
onclick : function() {
editor.focus();
editor.selection.setContent('Hola Mundo!');
}
});
}
Puedes ver mi tinyMCE.init aquí
Añadir botón a la lista de botones
Una vez incluido el código al tinyMCE.init se agrega a la lista de botones, sea, a una de las propiedades:
- theme_advanced_buttons1
- theme_advanced_buttons2
- theme_advanced_buttons3
ejemplo:
theme_advanced_buttons2 : "mi_boton, styleselect, formatselect,fontselect,fontsizeselect,separator,image,media,vfilebrowser,preview",
