Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
Tutorial : Cómo añadir cosas al editor.
Páginas (3): 1 2 3   
Gypaete   28 Jul, 2010, 12:10 pm
#1
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
Templario   28 Jul, 2010, 1:08 pm
#2
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
Gypaete   28 Jul, 2010, 1:15 pm
#3
jaja ,eso es verdad xD ,me pasa lo mismo xD
lluquel   31 Jul, 2010, 2:54 pm
#4
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 ,
Gypaete   31 Jul, 2010, 3:15 pm
#5
(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?
eduas   17 Aug, 2010, 8:13 am
#6
a mi no me reconose las imagenes sale en blanco Confused alguien sabe porque?
Gypaete   17 Aug, 2010, 8:15 am
#7
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
eduas   17 Aug, 2010, 8:26 am
#8
la imagne la subi a mi foro /images no era ahi? me sale en blanco nadamas
Gypaete   17 Aug, 2010, 8:34 am
#9
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
Gunner10   17 Aug, 2010, 12:42 pm
#10
Está un poco complicado seguir el tuto, uno de estos días haré el mismo pero más documentado.
Páginas (3): 1 2 3   
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.