Tutorial: Agregar botones al editor y asignarle MyCode

Gunner10 20 Aug, 2010, 10:27 pm

Aunque ya hay estos tutoriales me parece que el editor en la versión 1.6 es ligeramente diferente a las versiones pasadas, asi que me animé a hacer mi propio tutorial de como editarlo.

Lo que deseamos conseguir con esto es:

1. Agregar una nueva fila de botones al editor.
2. Agregar un botón al la fila recién creada.
3. Asignarle un MyCode al botón.

Se recomienda trabajar con una copia local, como editaremos varios archivos hay que ir practicando para no hacerlo mal en la verdadera instalación de MyBB. Empecemos!

1. Creando la nueva fila

1. Abrimos "jscripts\editor.js" con un editor de texto (recomendado Notepad++).
2. En la línea 200 hasta la 249 podemos leer ésto (no es necesario modificar nada):

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}

            ]

        });

Si nos ponemos a estudiar un poco dicho código bien podemos ver que:

- this.createToolbarContainer('nombre') = crea una fila en el editor.
- this.createToolbar('formatting', {.. = crea una sección de botones dentro de la fila anterior.

Entonces, para poner una fila entremedio de las 2 existentes antes de "this.createToolbarContainer('bottom');" vamos a poner ésto:

Código:
        // NUEVA TOOLBAR

        this.createToolbarContainer('tercera');

        this.createToolbar('mycodes', {

            container: 'tercera',

            alignment: 'right',

            items: [

                {type: 'button', name: 'download', sprite: 'download', insert: 'download', title: 'Encierra el texto en un cuadro de descarga'},

            ]

        });

        // NUEVA TOOLBAR

Lo que creará una nueva fila y un código para insertar un botón. Si queremos más botones les dejo un ejemplo de cómo debe ser:

Código:
{type: 'button', name: 'download', sprite: 'download', insert: 'download', title: 'Encierra el texto en un cuadro de descarga'},

{type: 'button', name: 'attention', sprite: 'attention', insert: 'attention', title: 'Encierra el texto en un cuadro de atencion'},

{type: 'button', name: 'approbed', sprite: 'approbed', insert: 'approbed', title: 'Encierra el texto en un cuadro de aprobado'},

{type: 'button', name: 'doc', sprite: 'doc', insert: 'doc', title: 'Encierra el texto en un cuadro de documentacion'},

{type: 'button', name: 'alert', sprite: 'alert', insert: 'alert', title: 'Encierra el texto en un cuadro de alerta'},

Nos quedará asi:

2. Agregando el botón

1. Abrimos "jscripts\editor_themes\default\stylesheet.css" con un editor de texto (recomendado Notepad++).
2. Al principio (o al final) agregamos:

Código:
.messageEditor .toolbar_button .toolbar_sprite_download {

    background: url(images/download.png) no-repeat;

}

3. Ahora hay que subir una imagen llamada "download.png" en "jscripts\editor_themes\default\images\", acá está (preferentemente de 23x22px para que quede bien):

Quedará asi:

3. Asignando al botón un MyCode

Se supone que éste botón funciona con un MyCode que encierra un texto con [download] texto [/download], es por ello que al crear el botón pusimos esto:

Código:
{type: 'button', name: 'download', sprite: 'download', insert: 'download', title: 'Encierra el texto en un cuadro de descarga'},

La parte de "insert: 'download'" es la que indica dicho comando. Si queremos otro botón debemos cambiar ello por ejemplo con spoiler:

Código:
{type: 'button', name: 'spoiler', sprite: 'spoiler', insert: 'spoiler', title: 'Oculta un texto, imagen o codigo'},

Ojo con la parte de "sprite: 'download'", ya que si vemos más arriba la regla CSS es ahí donde debemos indicar como se llamará dicho botón en CSS.

4. Ultimos ajustes

En la primera foto del editor vimos que se corría un poco hacia afuera la sección de entrada, asi que modificamos eso buscando en el editor.js esto:

Código:
// Determine the overall height and width - messy, but works

        w = oldTextarea.getDimensions().width+"px";

        if(!w || parseInt(w) < 400)

        {

            w = "400px";

        }

        if(this.options && this.options.height)

        {

            h = this.options.height;

        }

        else if(oldTextarea.offsetHeight)

        {

            h = oldTextarea.offsetHeight+"px";

        }

        else if(oldTextarea.clientHeight)

        {

            h = oldTextarea.clientHeight+"px";

        }

        else if(oldTextarea.style.height)

        {

            h = oldTextarea.style.height;

        }

        else

        {

            h = "400px";

        }

        this.editor.style.width = w;

        this.editor.style.height = h;

Y lo reemplazamos por esto:

Código:
// Determine the overall height and width - messy, but works

        w = "570px";

        h = "400px";

        this.editor.style.width = w;

        this.editor.style.height = h;

Solución que vi en los foros de MyBB.com. Resultado final:

lluquel 26 Aug, 2010, 6:23 pm

Código:
// Nueva Linea del Editor

        this.createToolbarContainer('tercera');

        this.createToolbar('mycodes', {

            container: 'tercera',

            alignment: 'right', --> esto alinea los botones derecha/izquierda/centro

            items: [

                {type: 'button', name: 'download', sprite: 'download', insert: 'download', title: 'Encierra el texto en un cuadro de descarga'},

            ]

        });

        // Nueva linea del Editor

Colocarlo por encima de los botones que trae el editor se ve "feo" seria mejor colocarlos por debajo!

para eso ubicamos // Create our new text area

y agregamos la nuevas lineas justo antes de ello! y listo..

Gunner10 26 Aug, 2010, 6:27 pm

Yo los puse en orden en que serían usados, los de formato no se usan mucho por eso están más arriba asi el mouse no va tan leeejos, aunque sea un poquito..

Juan228 28 Sep, 2010, 8:59 am

Muy Buen tuto +1 Rep!

Una duda, el editor me queda tirado apra abajo todabia un poquito, ya hize lo que indicas, pero qeuda coo mucho 2px para abajo, que puedo hacer?? probe editando el tamaño y no me da bola jaja !

pes style 23 Feb, 2012, 1:05 pm

Muy buena Tutorial Esteban es decir si te puedo llamar asi gunner.

Hearnett 7 Mar, 2012, 5:56 am

Desaparecieron todos los bbcodes al agregarlo Sad

Cluster 7 Mar, 2012, 1:11 pm

revisa que estes haciendo todo paso por paso, por un codigo mal puesto se hecha a perder el codigo Wink

Hearnett 8 Mar, 2012, 2:58 am

Listo,gracias Big Grin

,+rep...Resulta que habiado copiado el codigo de lluquel y borre esta parte.

Código:
// Nueva Linea del Editor

        this.createToolbarContainer('tercera');

        this.createToolbar('mycodes', {

            container: 'tercera',

            alignment: 'right', --> esto alinea los botones derecha/izquierda/centro

            items: [

                {type: 'button', name: 'download', sprite: 'download', insert: 'download', title: 'Encierra el texto en un cuadro de descarga'},

            ]

        });

        // Nueva linea del Editor

" --> esto alinea los botones derecha/izquierda"

Gracias de nuevo.

progold 27 Sep, 2012, 9:20 pm

Bueno logre ponerlo pero tengo un problema ahora Sad

cuando alojo una imagen despues de colocar los coloridos todo va bien

[spoiler] [Imagen: KQu3j.png]

[/spoiler]

pero cuando alojo una imagen antes osea primero tengo este problema

[spoiler] [Imagen: eInth.png]

[/spoiler]

el codigo q inserto es este en el editor creo q todo debe irme bien no se q paso
[spoiler] [Imagen: 23aHP.png]

[/spoiler]

como puedo solucionarlo

HSSWebs 28 Sep, 2012, 3:08 am

#10

Esto no es soporte. Ya tienes un tema hecho para esto.