Agregar botones al editor de MyBB: Parte 1

Introducción

El objetivo de este tutorial es aprender como esta compuesto el editor que usa MyBB y como crear un botón como el de negrita o cursiva.

Para empezar, el editor esta compuesto de toolbars, las cuales contienen los botones. El editor viene por defecto con 4 toolbars, ubicadas en 2 contenedores (toolbarContainer):

En este tutorial, vamos a agregar un boton para el mod HIDE que genere el siguiente código:

[hide]Contenido![/hide]

Paso 1: Encontrar donde se generan los botones

Abrimos el archivo jscripts/editor.js.
Empezando en la linea 200 encontraremos el siguiente código:

this.createToolbarContainer('top');

this.createToolbar('closetags', {
	container: 'top',
	alignment: 'right',
	items: [
		{type: 'button', name: 'close_tags', insert: 'zzzz', sprite: 'close_tags', width: 80, style: {visibility: 'hidden'}}
	]
});
this.createToolbar('topformatting', {
	container: 'top',
	items: [
		{type: 'dropdown', name: 'font', insert: 'font', title: this.options.lang.font, options: this.fonts},
		{type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},
		{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}
	]
});

this.createToolbarContainer('bottom');

this.createToolbar('insertables', {
	container: 'bottom',
	alignment: 'right',
	items: [
		{type: 'button', name: 'list_num', sprite: 'list_num', insert: 'list', extra: 1, title: this.options.lang.title_numlist},
		{type: 'button', name: 'list_bullet', sprite: 'list_bullet', insert: 'list', title: this.options.lang.title_bulletlist},
		{type: 'separator'},
		{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},
		{type: 'button', name: 'url', sprite: 'link', insert: 'url', title: this.options.lang.title_hyperlink},
		{type: 'button', name: 'email', sprite: 'email', insert: 'email', extra: 1, title: this.options.lang.title_email},
		{type: 'separator'},
		{type: 'button', name: 'quote', sprite: 'quote', insert: 'quote', title: this.options.lang.title_quote},
		{type: 'button', name: 'code', sprite: 'code', insert: 'code', title: this.options.lang.title_code},
		{type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php},
		{type: 'button', name: 'video', insert: 'video', image: 'television.gif', dropdown: true, title: this.options.lang.title_video, options: this.videos}
	]
});
this.createToolbar('formatting', {
	container: 'bottom',
	items: [
		{type: 'button', name: 'b', sprite: 'bold', insert: 'b', title: this.options.lang.title_bold},
		{type: 'button', name: 'i', sprite: 'italic', insert: 'i', title: this.options.lang.title_italic},
		{type: 'button', name: 'u', sprite: 'underline', insert: 'u', title: this.options.lang.title_underline},
		{type: 'separator'},
		{type: 'button', name: 'align_left', sprite: 'align_left', insert: 'align', extra: 'left', title: this.options.lang.title_left},
		{type: 'button', name: 'align_center', sprite: 'align_center', insert: 'align', extra: 'center', title: this.options.lang.title_center},
		{type: 'button', name: 'align_right', sprite: 'align_right', insert: 'align', extra: 'right', title: this.options.lang.title_right},
		{type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify}
	]
});

Paso 2: Deducir la parte que nos interesa

Digamos que queremos que nuestro botón se encuentre a la izquierda del botón de cita. Dicho esto, nos interesaría solo la toolbar insertables, que es la que contiene el botón de cita.

El código que genera la toolbar insertables es el siguiente:

this.createToolbar('insertables', {
	container: 'bottom',
	alignment: 'right',
	items: [
		{type: 'button', name: 'list_num', sprite: 'list_num', insert: 'list', extra: 1, title: this.options.lang.title_numlist},
		{type: 'button', name: 'list_bullet', sprite: 'list_bullet', insert: 'list', title: this.options.lang.title_bulletlist},
		{type: 'separator'},
		{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},
		{type: 'button', name: 'url', sprite: 'link', insert: 'url', title: this.options.lang.title_hyperlink},
		{type: 'button', name: 'email', sprite: 'email', insert: 'email', extra: 1, title: this.options.lang.title_email},
		{type: 'separator'},
		{type: 'button', name: 'quote', sprite: 'quote', insert: 'quote', title: this.options.lang.title_quote},
		{type: 'button', name: 'code', sprite: 'code', insert: 'code', title: this.options.lang.title_code},
		{type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php},
		{type: 'button', name: 'video', insert: 'video', image: 'television.gif', dropdown: true, title: this.options.lang.title_video, options: this.videos}
	]
});

Paso 3: Agregar el código del botón

Cada linea tiene una serie de parámetros que usa el editor para generar los botones. La linea 12 es la que genera el botón de cita (quote). Dupliquemos esa linea.

Los parametros para generar cada botón son los siguientes:

type: - Lo que sea que vayamos a agregar. Puede ser un "button" o "separator". Dejemos el valor "button".
name: - Nombre único para el boton. En este caso, usaremos el valor "hidemod".
sprite: - El nombre de la clase CSS que el botón va a utilizar. Usaremos el nombre "hide_style".
insert: - Este es el tag del BBCode que se va a insertar. Por ejemplo, si queremos que el boton genere lo siguiente: [hide]hide![/hide], este valor es lo que se encuentra en rojo (hide).
title: - El título del boton (Aparece en el editor cuando dejas el mouse arriba del botón por más de 1 sec). En este caso, vamos a usar: "Esconder contenido".

Ya con los parámetros cambiados, el resultado debe ser el siguiente:

this.createToolbar('insertables', {
	container: 'bottom',
	alignment: 'right',
	items: [
		{type: 'button', name: 'list_num', sprite: 'list_num', insert: 'list', extra: 1, title: this.options.lang.title_numlist},
		{type: 'button', name: 'list_bullet', sprite: 'list_bullet', insert: 'list', title: this.options.lang.title_bulletlist},
		{type: 'separator'},
		{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},
		{type: 'button', name: 'url', sprite: 'link', insert: 'url', title: this.options.lang.title_hyperlink},
		{type: 'button', name: 'email', sprite: 'email', insert: 'email', extra: 1, title: this.options.lang.title_email},
		{type: 'separator'},
		{type: 'button', name: 'hidemod', sprite: 'hide_style', insert: 'hide', title: 'Esconder contenido'},
		{type: 'button', name: 'quote', sprite: 'quote', insert: 'quote', title: this.options.lang.title_quote},
		{type: 'button', name: 'code', sprite: 'code', insert: 'code', title: this.options.lang.title_code},
		{type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php},
		{type: 'button', name: 'video', insert: 'video', image: 'television.gif', dropdown: true, title: this.options.lang.title_video, options: this.videos}
	]
});

Paso 4: Probando el botón

Si accedemos al foro, podremos ver que el botón se agregó correctamente al editor:

Sin embargo, todavía no elegimos el ícono, por lo que muestra el de otro botón.

Paso 5: Agregar un ícono personalizado

Antes que nada, necesitamos una imágen transparente de 24x24 pixeles. En mi caso usare la siguiente:

Para agregar el ícono, debemos editar los archivos del theme que se encuentre usando el editor. En mi caso, uso el theme Office 2007, por lo que los archivos se encuentran en la carpeta: jscripts/editor_themes/Office_2007/.

Dentro de la carpeta, encontraremos el archivo stylesheet.css que es el que debemos editar, y una subcarpeta llamada images. En esta subcarpeta debemos guardar la imágen que usaremos para el botón.

Luego, editamos el archivo CSS y agregamos al inicio:

.messageEditor .toolbar_button .toolbar_sprite_PROPIEDAD_SPRITE {
	background: url(DIRECCION_IMAGEN) no-repeat;
}

En mi caso, el nombre de la imágen es hidemod.png y la propiedad sprite del botón es hide_style, por lo que el resultado será:

.messageEditor .toolbar_button .toolbar_sprite_hide_style {
	background: url(images/hidemod.png) no-repeat;
}

Guardamos el archivo y...

Paso 6: Disfrutamos del botón

Si acceden al foro, podrán ver que el botón se muestra perfectamente!

Final

Solo eso es todo lo necesario para crear un botón. Créanme que una vez que saben como se hace, no parece tan complicado :)

En la siguiente entrada de esta serie, veremos como crear un botón tipo dropdown como el de videos. Stay stunned!