No existe ninguna imagen

Archive for junio, 2011

Como crear un botón costumizado para TinyMCE

Jueves, junio 30th, 2011
Este artículo es parte de una serie la cual trata temas sacados de las “palabras claves” (keywords) usadas por personas que llegan a mi website mediante motores de búsqueda (google, bing, etc). He decidido hacer esto ya que veo que muchas personas  llegan al blog buscando algunos temas los cuales todavía no he tratado.

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:

  1. 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.
  2. El código HTML o elemento que quieres que se inserte en el editor.
  3. El código javascript. Este se debe añadir al objeto de configuración del tinyMCE.init().
  4. 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:

  1. el nombre del botón
  2. 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",