[Tutorial] Agrega botones al editor de texto V2 -- Mod by Ed

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

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

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

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

Despues localizamos esto:

Código PHP:
this.performInsert(list, "", true, false);
    }, 

y abajo despues del }, agregamos el siguiente codigo

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

Código PHP:
this.insertList(extra);
                break; 

y abajo agregamos esto

Código PHP:
case "fieldset":
                this.insertFIELDSET();
                break; 

de modo que quede asi:

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

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

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 escribió: ¿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 escribió: 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.