[Ayuda] Agregar botones al editor de texto

abdonroda 16 Sep, 2009, 3:22 am

Bueno, pues creo este tema para pedir ayuda. Quería saber si alguien me puede explicar cómo agregar botones en el editor de texto.
He buscado por el foro tutoriales, y solo he encontrado uno en inglés que no entiendo.

Los botones que quiero hacer creo que son sencillos, consistirían en que al hacer click en el botón salga una imagen.
¿Qué imagen? Pues será una imagen que ponga "Información", "Descarga", o el correspondiente título que el usuario quiera poner.
Las imágenes ya las tengo hechas yo.

Espero haberlo explicado con claridad, un saludo y gracias!

Himura 18 Sep, 2009, 6:46 pm

edita el archio /jscripts/editor.js
busca el texto // Create our new text area
acontinuacion escribe este texto (te lo dejos con dos ejemplos el youtube y megavideo, si quieres agregar mas botones o editar remplaza youtuve o megavideo por otro boton.)

Código:
this.createToolbarContainer('my_contn');

        this.createToolbar('my_tolbar', {

            container: 'my_contn',            

            alignment: 'left',

            items: [

                {type: 'button', name: 'youtube', sprite: 'youtube', insert: 'youtube', title: 'Youtube'},

                {type: 'button', name: 'megavideo', sprite: 'megavideo', insert: 'megavideo', title: 'Megavideo'}                

            ]

        });

cada ves que agreges un boton al final del texto donde se cierra la ("}") deves agregarle una coma (",").
para ponerle una imagen al boton deves tener la imagen y subirla a
/jscripts/editor_themes/default/images
y a
/jscripts/editor_themes/office2007/images
si usa ese tema,
abre jscripts/editor_themes/default/stylesheet.css
y agrega al final el texto

Código:
.messageEditor .toolbar_button .toolbar_sprite_youtube {

    background: url(images/youtube.gif) no-repeat;

}

.messageEditor .toolbar_button .toolbar_sprite_megavideo {

    background: url(images/megavideo.gif) no-repeat;

}

sprite_xxxx, deves poner el nombre del boton, para el cual es la imagen
background: url(images/xxxxx.xxx) no-repeat; deves colocar el nombre de tu imagen
si usa el tema office2007 tambien deves editar
jscripts/editor_themes/office2007/stylesheet.css

abdonroda 27 Sep, 2009, 9:23 am

No entiendo muy bien, porque... Donde tendria que poner la url de la imagen que quiero que salga al pulsar el botón?

Himura 27 Sep, 2009, 6:46 pm

revisa bien el mensaje man te lo deje hasta con ejemplos,
por ultimo di que parte no entiendes para ayudarte mejor

abdonroda 28 Sep, 2009, 10:35 am

Si ya lo leí varias veces, pero sigo comprenderlo de todo...

Donde pones la función que se hará cuando pulses el botón?

Cluster 28 Sep, 2009, 11:43 am

despues saldra para insertar lo que pusiste aqui

{type: 'button', name: 'youtube', sprite: 'youtube', nsert: 'youtube', title: 'Youtube'},

abdonroda 30 Sep, 2009, 10:14 am

A ver... Ahora mismo acabo de crear un MyCode que funciona perfectamente si se escribe el código.
El código es [descarga]lo que yo quiera poner[/descarga].

Para ponerle un botón a ese MyCode lo que tendría que hacer sería lo siguiente, no?:

Agregar en el /jscripts/editor.js lo siguiente:

Código:
{type: 'button', name: 'descarga', sprite: 'descarga', insert: 'descarga', title: 'Envuelve la descarga en una caja'},

Agregar en el /jscripts/editor_themes/Office_2007/stylesheet.css lo siguiente:

Código:
.messageEditor .toolbar_button .toolbar_sprite_spoiler {

    background: url(images/descarga.gif) no-repeat;

}

Agregar en /jscripts/editor_themes/Office_2007/images/ una imagen llamada "descarga.gif".

EDITADO:
Ya lo conseguí haciendo eso que puse arriba. ^^

abdonroda 11 Oct, 2009, 4:49 am

Aeroxis, si quieres ya puedes cerrar este tema que ya me lo solucionaron. ^^

Aeroxis 11 Oct, 2009, 6:18 am

Tema solucionado, tema cerrado Wink

Cuando pidáis cerrar tema no tenéis que decir Aeroxis cierra tema, ya que no soy el único moderador, y podrías dañar el autoestima de otro moderador.