[Tutorial] Agregar botones al editor V2

Edson Ordaz 28 Sep, 2010, 6:04 pm

Hola usuarios de mybb-es 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

Código:
\[fieldset=(.*)](.*?)\[\/fieldset\]

y en remplazar por ponemos esto:

Código:
<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

Cita:{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

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

Despues localizamos esto:

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

y abajo despues del }, agregamos el siguiente codigo

Cita: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

Cita:this.insertList(extra);
break;

y abajo agregamos esto

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

de modo que quede asi:

Código:
            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

Cita:.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

[Imagen: 6egm03.gif]

y el resultado es:
[Imagen: 33d9jcx.png]

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

Proximo Tutorial: Agregar menu despegable en el editor!!

Saludos!

stuka 30 Sep, 2010, 3:59 am

Excelente Edson, gracias por el tuto y va rep Smile

...

PD: Mmm no me sale, ya lo he hecho unas 15 veces paso por paso y no me sale, me quita todo del editor, solo me deja los smileis nada mas,,, el theme que uso es Pro Navy por si tiene algo que ver Undecided

Edson Ordaz 30 Sep, 2010, 7:13 am

yo igual uso pronavy bro mira aveces el error es una simple coma ami me a pasado fijate aqui bro!

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

que al ultimo lleve una coma!