Tutorial : Cómo añadir cosas al editor.
Hola ,es mi primer aporte ,he buscado ,por que al principio ,no lo sabía hacer xD ,pero lo descubrí y ahora os lo dejo :D Nombre : Cómo añadir ,cosa...

Hola ,es mi primer aporte ,he buscado ,por que al principio ,no lo sabía hacer xD ,pero lo descubrí y ahora os lo dejo Big Grin
Nombre : Cómo añadir ,cosas al Editor ,Por Ej, el famoso "Spoiler"
Nivel: Fácil
Requisitos: FTP ,y hacer Backups ,cuando se necesite.

1er paso : Nos bajamos ,los siguientes archivos ,de nuestro FTP:

TUFORO/jscripts/editor.js

Y

TUFORO/jscripts/editor_themes/Office_2007/stylesheet.css

2º paso

Con el photoshop ,o cualquier programa de diseño ,hacemos un logo para spoiler ,yo hice una "S" fea ,la podéis ver en el adjunto.
y cuando lo terminéis la subís a :
TUFORO/jscripts/editor_themes/office_2007/images

3er Paso

Abrimos el editor.js y agregamos una línea ,en donde queráis ponerla , por ej:
Yo lo agregué despues de el botón de IMG :
Cita: 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: 'spoiler', sprite: 'spoiler', insert: 'spoiler', title: 'Oculta algo'},
{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}
]
});
Así debería de quedar Smile

4º Paso:
Abrimos el Stylesheet.css y vamos al final del todo y agregámos:
.messageEditor .toolbar_button .toolbar_sprite_spoiler {
background: url('images/spoiler.gif') no-repeat;
}
-----------
donde pone :
.messageEditor .toolbar_button .toolbar_sprite_(spoiler)
"Spoiler" sin los () ,ponemos el nombre del botón ,el que hemos puesto en el editor.js
----------
donde pone:
background: url('images/spoiler.gif') no-repeat;
}
lo rojo lo cambiáis ,por la dirección de la imagen Big Grin

5º Paso

Vamos a nuestro FTP , hacemos una Backup de los siguientes archivos ,editor.js y stylesheet.css

6º Paso:

Subimos a nuestro FTP ,el editor.js y el stylesheet.css ,los que hemos editado, y ya debe de funcionar.

Ahora mirad las capturas que os he dejado Big Grin
Cambie la descripción a Otaku_Col ,para que veráis ,que si funciona ,xDD
Éste es mi primer aporte , 100% Hecho por Mí! Wink no os quejéis mucho xDD Big GrinBig Grin
Muy bueno. Está bien explicado. Ya lo había hecho, pero con este tutorial, queda de maravilla.

Mi problema son los botones, ya que los que hice se ven medio feos, no combinan. Confused
jaja ,eso es verdad xD ,me pasa lo mismo xD
gracias funciona correctamente, pero para aquellos no quieran sus mycode mezclados con otros agan esto:
en el archivo editor.js busquen:
Código:
        // Create our new text area

luego agregen :

Código:
this.createToolbar('mytoolbar', {
           container: 'bottom',
           items: [
              {type: 'button', name: 'nombre_del_boton', sprite: 'nombre_del_boton', insert: 'nombre_del_boton', title: 'Lo que hace el boton'}

    ]
});
y se creara una linea nueva con los botones que agregues, luego sigan el tutorial de otaku_col

* si quieren agregar mas botones no se olviden de la " , " al final de la nueva linea ejem:

this.createToolbar('mytoolbar', {
container: 'bottom',
items: [
{type: 'button', name: 'youtube', sprite: 'youtube', insert: 'youtube', title: 'Inserta videos de Youtube'},
{type: 'button', name: 'megavideo', sprite: 'megavideo', insert: 'megavideo', title: 'Inserta videos de Megavideo'},
{type: 'button', name: 'spoiler', sprite: 'spoiler', insert: 'spoiler', title: 'Oculta Textos y/o Imagenes'}
]
});

*siempre la ultima linea no deve llevar ,
(31 Jul, 2010, 2:54 pm)lluquel escribió: gracias funciona correctamente, pero para aquellos no quieran sus mycode mezclados con otros agan esto:
en el archivo editor.js busquen:
Código:
        // Create our new text area

luego agregen :

Código:
this.createToolbar('mytoolbar', {
           container: 'bottom',
           items: [
              {type: 'button', name: 'nombre_del_boton', sprite: 'nombre_del_boton', insert: 'nombre_del_boton', title: 'Lo que hace el boton'}

    ]
});
y se creara una linea nueva con los botones que agregues, luego sigan el tutorial de otaku_col

* si quieren agregar mas botones no se olviden de la " , " al final de la nueva linea ejem:

this.createToolbar('mytoolbar', {
container: 'bottom',
items: [
{type: 'button', name: 'youtube', sprite: 'youtube', insert: 'youtube', title: 'Inserta videos de Youtube'},
{type: 'button', name: 'megavideo', sprite: 'megavideo', insert: 'megavideo', title: 'Inserta videos de Megavideo'},
{type: 'button', name: 'spoiler', sprite: 'spoiler', insert: 'spoiler', title: 'Oculta Textos y/o Imagenes'}
]
});

*siempre la ultima linea no deve llevar ,
Muy bueno ,lo agregaré ,pero puedes mostrar una imagen ,para que sea más fácil?
a mi no me reconose las imagenes sale en blanco Confused alguien sabe porque?
A lo mejor no haz subido la imagen Big Grin a "TUFORO/jscripts/editor_themes/office_2007/images" o el nombre que tenga ,y si no dale donde esta el boton ,click derecho y dale a "Ver Imagen" y si te sale el error 404 ,es que no guardaste la imagen Wink
Edito: me equivocé xD
la imagne la subi a mi foro /images no era ahi? me sale en blanco nadamas
dale donde esta el boton ,click derecho y dale a "Ver Imagen" y si te sale el error 404 ,es que no guardaste la imagen. y miras la URL y la guardas Wink
Está un poco complicado seguir el tuto, uno de estos días haré el mismo pero más documentado.