Hola usuarios de soportemybb bueno pues decidi hacer este tuto ya que e visto muchos de como agrgar botones al editor pero no e visto como uno de como hacer un tuto de agregar botones y hagan lo que hace img,url o email!!

Vamos a empezar haciendo algo facil por ejemplo un FiledSet!
vamos a:
panel adm » Configuracion » mycodes » agregar mycode

en expresion regular ponemos

\[fieldset=(.*)](.*?)\[\/fieldset\]

y en remplazar por ponemos esto:

<fieldset>
<legend>$1</legend>
$2
</fieldset>

bien ahora editamos nuestro editor.js (NOTA: Hagamos un respaldo de nuestro editor.js antes de que empiezen por si hay algun error)!!

localizamos el siguiente codigo dentro de nuestro editor,js

{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

al terminar eso ponemos una coma (,) y abajo agramos lo siguiente

{type: 'separator'},
				{type: 'button', name: 'fieldset', sprite: 'fieldset', insert: 'fieldset', title: "Inserta un fieldset con leyenda"}

Despues localizamos esto:

this.performInsert(list, "", true, false);
	},

y abajo despues del }, agregamos el siguiente codigo

insertFIELDSET: function()
	{
		selectedText = this.getSelectedText($(this.textarea));
		fieldset = prompt("Inserta la leyenda", "");

		if(fieldset)
		{
			if(!selectedText)
			{
				title = prompt("Inserta tu texto", "");
			}
			else
			{
				title = selectedText;
			}

			if(title)
			{
				this.performInsert("[fieldset="+fieldset+"]"+title+"[/fieldset]", "", true, false);
			}
			else
			{
				this.performInsert("[fieldset]"+fieldset+"[/fieldset]", "", true, false);
			}
		}
	},

despues de eso localizamos este codigo

this.insertList(extra);
				break;

y abajo agregamos esto

case "fieldset":
				this.insertFIELDSET();
				break;

de modo que quede asi:

			case "list":
				this.insertList(extra);
				break;
			case "fieldset":
				this.insertFIELDSET();
				break;
			case "url":
				this.insertURL();
				break;
			case "image":
				this.insertIMG();
				break;
			case "email":
				this.insertEmail();
				break;
			case "video":
				this.insertVideo(extra);
				break;

y listo guardamos el editor.js

Despues localizmos el archivo stylesheet.css que se encuantra en
jscripts » editor_themes » tu theme » stylesheet.css y asta abajo agregamos esto

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

y despues dejamos la imagen con el nombre fieldset.png a la carpeta images dentro de la misma reuta de arriba!!

les dejo una imagen de como se ve




y el resultado es:



Les dejo la imagen que yo uso espero les guste mucho jeje!!

Proximo Tutorial: Agregar menu despegable en el editor!!

Saludos!

gracias edson. !!

Excelente tutorial Edson! Muy bien explicado.

Disculpa men..! No se en que estoy fallando.
Cambie todas las palabras de Fieldset por el de Youtube que es el que quiero poner.
Pero el boton cuando le doy clic me sale de frente
no me sale esa Ventanita para agregar
Me sale defrente asi [youtube]http:www.youtube.com/v?=231321[/youtube]

Muy buen tutorial Edson Ordaz (y).

¿Alguien me ayuda para el de hide?, ya que cuando hago esto no me sale ningun boton incluyendo los de fuente y todo eso.

30 Jan, 2011, 9:47 pm Tozja wrote:
¿Alguien me ayuda para el de hide?, ya que cuando hago esto no me sale ningun boton incluyendo los de fuente y todo eso.

Si no te sale ninguno es que estás editando mal el editor.js
Revisa de que lo estás haciendo todo perfecto, y que no te falta ninguna coma ni nada.

Edson me sale todo bien, pero lo que no sale es la imagen del botón.
Lo estoy testeando en un foro de prueba y no me sale.
Que puede ser?

5 Feb, 2011, 6:17 pm Mauro wrote:
Edson me sale todo bien, pero lo que no sale es la imagen del botón.
Lo estoy testeando en un foro de prueba y no me sale.
Que puede ser?

Tu imagen lleva bien la ruta?

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

En ese caso tendrías que poner una imagen llamada fieldset.png en jscripts » editor_themes » default / Office_2007 » images

claro, error mio pensé que esa ruta /images se refería a la carpeta images en la raíz del foro.

Gracias abdon.