Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Descarga MyBB 1.8.13
SoporteMyBB tiene un total de 832 temas de soporte. 9 quedan aún por resolver, 157 han quedado obsoletos y 666 han sido resueltos.

Hola invitado, aún no tienes una cuenta? Regístrate gratis desde aqui !!! Como registrado podrás obtener soporte, descargar temas y plugins del sitio y más.
Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Creador del tema: abelvros[Tutorial] Agregar botón Imgur al editor
Iniciado por: abelvros

 abelvros
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:26
Temas:3
Registro:19 Nov 2014
Reputación: 22
Gracias dados158Gracias recibidos22NacionalidadSpain
15 December 2014, 21:02 -
#1
6
Mejor respuesta del mensaje Agregar botón Imgur al editorBuenas aquí os aporto un tutorial de como añadir a el editor un botón de Imgur para subir imagenes.

El tutorial no lo he hecho yo. Esta realizado por martec de la web oficial de MyBB Web Tutorial Original.
Aun así yo ampliare unos detalles que veo necesario para el tutorial.

Bueno vamos alla

0.- Registrarte en https://imgur.com/signin
1 - Conseguir un api key: https://imgur.com/signin (Sí ya lo tienes, puedes saltarte este paso)
Os muestro como rellenar los campos para obtener la api key y cual seria la key que os hara falta.
Formulario para crear API
No puedes ver estos contenidos como invitado

Aqui los codigos despues de crear la Api(He borrado algunas numeraciones)
No puedes ver estos contenidos como invitado

Procedemos ya a crear el boton en el editor y a darle sus funciones.

2 - Editar: root/jscripts/sceditor/editor_themes/mybb.css

2.1 - Añadir al final del archivo este codigo:

No puedes ver estos contenidos como invitado

2.2 - Repetir el paso 2.1 con todos los otros sceditor(Yo en mi caso hice lo mismo en el modern.css y default.css).

3 - Copiar imgur.png
No puedes ver estos contenidos como invitado
y y spinner.gif
No puedes ver estos contenidos como invitado
en root/jscripts/sceditor/editor_themes/

4 - Editar root/jscripts/bbcodes_sceditor.js

4.1 - Buscar:
No puedes ver estos contenidos como invitado

4.2 - Agregar luego (Después de }); ):

No puedes ver estos contenidos como invitado

4.3 - Añadir después de todo, es decir, al final de mismo archivo(Si no es así no funcionara):

No puedes ver estos contenidos como invitado
';
$('#message, #signature, textarea[name*="value"]').data('sceditor').insert(code);
var d = document.querySelector(".sceditor-button-imgur div.imgurup");
d.className = d.className - " imgurup";
document.querySelector('input.imgur').remove();
}
// Ok, I don't handle the errors. An exercice for the reader.
xhr.setRequestHeader('Authorization', 'Client-ID your-key');
/* And now, we send the formdata */
xhr.send(fd);
}; [/php]

4.4 - Coloca el Client ID que obtuvisteis al principio por donde pone your-key en el código de el paso 4.3 .

5 - Entrar al Admin CP - Templates (Plantillas) - Buscar Ungruped Templates (Plantillas sin grupo) - Abrir - Buscar "Codebuttons"

5.1 - Buscar:

No puedes ver estos contenidos como invitado

5.2 - Ese mismo codigo debe ser reemplazado por:

No puedes ver estos contenidos como invitado

Si usas Quick Advanced Editor (v4.0.0, +) o Quick Advanced Editor Plus (v0.6, +)


Repite el paso 5.1 y 5.2 enn Template Sets » Global Templates » codebutquick

Demostración:


Última modificación: 23 December 2014, 06:50 por Whiteneo.
 BitLiberal
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:442
Temas:51
Registro:17 Mayo 2014
Reputación: 136
Gracias dados93Gracias recibidos135NacionalidadSpain
15 December 2014, 21:29 -
#2
2
Esto lo probé en la 1.6 y su funcionalidad es perfecta.
Aunque yo modifique el codigo un poquito para que subiera la imagen automaticamente sin abrir el popup de imgur, si lo encuentro lo adhiero.

Muchas gracias!
 abelvros
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:26
Temas:3
Registro:19 Nov 2014
Reputación: 22
Gracias dados158Gracias recibidos22NacionalidadSpain
15 December 2014, 21:35 -
#3
1
Subir la imagen automaticamente como? si no te abre el popup para buscar la imagen a subir, como la seleccionas e indicas cual es la imagen que deseas subir.

No te he comprendido mucho la verdad.

Un saludo de todas formas.
 BitLiberal
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:442
Temas:51
Registro:17 Mayo 2014
Reputación: 136
Gracias dados93Gracias recibidos135NacionalidadSpain
15 December 2014, 21:49 -
#4
3
(15 December 2014, 21:35 )abelvros escribió: Subir la imagen automaticamente como? si no te abre el popup para buscar la imagen a subir, como la seleccionas e indicas cual es la imagen que deseas subir.

No te he comprendido mucho la verdad.

Un saludo de todas formas.

Logre modificar el codigo para que al pulsar el boton, aparezca inmediatamente la ventana de seleccion de imagen, la seleccionas, y automaticamente la URL de la misma se escribe en el campo de texto para insertarla.

Este es el codigo que utilizaba:

No puedes ver estos contenidos como invitado


Lo usaba con xThreads, comprobado por @ Joseahfer, pero creo que difiere bastante a lo que tu has publicado. Intentare adaptarlo a este tutorial. Guiño
 BitLiberal
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:442
Temas:51
Registro:17 Mayo 2014
Reputación: 136
Gracias dados93Gracias recibidos135NacionalidadSpain
15 December 2014, 22:09 -
#5
2
Nada, fallo mio, crei que era igual que el anterio sistema, que abria un feo pop up de Imgur.

Lo he probado y funciona a la perfeccion. Guiño
 abelvros
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:26
Temas:3
Registro:19 Nov 2014
Reputación: 22
Gracias dados158Gracias recibidos22NacionalidadSpain
15 December 2014, 22:18 -
#6
1
ya me entrañaba a mi, cuando como yo lo he puesto no sale popup ninguno de imgur jajaja en fin hay está el codigo, a disfrutar, por cierto, implementarlo aqui que cada ves que tenga que subir una imagen lo tenga que estar subiendo yo externamente no mola jajajajaja

Un abrazo!
Última modificación: 15 December 2014, 22:19 por abelvros.
 BitLiberal
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:442
Temas:51
Registro:17 Mayo 2014
Reputación: 136
Gracias dados93Gracias recibidos135NacionalidadSpain
16 December 2014, 00:06 -
#7
2
He registrado un pequeño "error", con el tema "Monocons" del editor.
Al parecer, al utilizar una fuente como iconos para los botones, las imagenes no funcionan bien, pero lo he solucionado de otra forma, que aparte puede servir para los que no quieren incluir otro boton en la barra:

No puedes ver estos contenidos como invitado
Asi es como queda, incluye un boton dentro del pop up de la subida de imagenes, con el mismo funcionamiento.

El icono que esta al lado de "Subir Imagen" cambia a un spinner durante la carga, y vuelve a su estado natural cuando se pone la imagen en el mensaje.

Para hacerlo asi, se hacen todos los pasos, menos el 2.1, en el que se pone este codigo en el archivo "monocons.css" de la misma ruta:
No puedes ver estos contenidos como invitado

NO se hace la 4.2, y en la 4.3 el codigo a pegar tiene que ser este:


No puedes ver estos contenidos como invitado
';
$('#message, #signature, textarea[name*="value"]').data('sceditor').insert(code);
var d = document.querySelector(".fa-spinner");
d.className = d.className - " fa-spinner fa-spin";
d.className = d.className + " fa fa-upload";
document.querySelector('input.imgur').remove();
}

xhr.setRequestHeader('Authorization', 'Client-ID 95a123456e4d04');

xhr.send(fd);
};[/php]


Y NO se hace nada el punto 5.

Luego se va a la ruta "/jscripts/sceditor", se abre el archivo jquery.sceditor.bbcode.min.js y se busca esta linea (exacta, pues esta minimizado).


No puedes ver estos contenidos como invitado

Y se cambia por esta otra:


No puedes ver estos contenidos como invitado


Se recomienda utilizar un programa que busque y reemplaze automaticamente la linea, como Notepad++ (se pulsa Ctrl+F en el programa, se elige la pestaña reemplazar, en el primer cuadro de texto se pone el codigo a buscar y el segundo el codigo a reemplazar).

Queda muy vistoso de esta forma, y aparte te ahorras la carga de imagenes.
Se debe tener FontAwesome puesto o los iconos no se veran.

¡Saludos @ abelvros  ! Sonrisa
 abelvros
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:26
Temas:3
Registro:19 Nov 2014
Reputación: 22
Gracias dados158Gracias recibidos22NacionalidadSpain
16 December 2014, 00:14 -
#8
2
@ BitLiberal fantástico trabajo, muchas gracias.

Mas posibilibales para insertar imagenes :D
 Whiteneo
Beta Tester


Beta Testers


Estado: Desconectado
Mensajes:3,562
Temas:276
Registro:11 Mar 2014
Reputación: 2,036
Gracias dados524Gracias recibidos2,035NacionalidadMexico
16 December 2014, 09:24 -
#9
1
Gracias por el aporte aunque el manual original es de martec usuario del foro oficial y aqui debiera estar implementado si no mal recuerdo Gran sonrisa.

En el editor debiera salir el icono de imgur y al seleccionar la imagen debiera agregarse automaticamente la imagen al mensaje incluso lo probe el dia que lo coloque ya lo mirare mañana quiza algo se me haya escapado.
 zetanight
Usuario del Foro


Registrados


Estado: Desconectado
Mensajes:74
Temas:17
Registro:10 Feb 2015
Reputación: 10
Gracias dados25Gracias recibidos10NacionalidadChile
29 Mayo 2015, 21:59 -
#10
2
Estube siguiendo los pasos que menciona @ BitLiberal junto con el tutorial, y al terminar se me ve asi :/ y cuando seleciono una imagen para subir simplemente no se sube nada, algun consejo o cosas que deba revisar para me funcione u.u

No puedes ver estos contenidos como invitado

ACTUALIZACION: logre hacer funciona el boton, era un codigo del tutorial que se colocaba al final y yo no lo habia puesto, tengo otra duda, este boton para subir una imagen solo se muestra en otros rangos en mi caso seria administrador, pero no pasa lo mismo con los usuarios a ellos solo se les abre una ventana en donde les da la opcion para insertar una imagen, nada mas :/
Última modificación: 30 Mayo 2015, 18:07 por zetanight.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Fieldset con estilo iv y boton en el editor. Whiteneo 6 792 28 Septiembre 2017, 06:12
Último mensaje: AlexP
  [Tutorial] Agregar sistema de gracias a tapatalk. Whiteneo 0 86 29 Julio 2017, 18:54
Último mensaje: Whiteneo
Información [Tutorial] Añadir spoiler con botón en el editor Yadomi 24 5,054 27 December 2015, 18:30
Último mensaje: Whiteneo
  [Tutorial] Agregar botón para un Mycode al editor abelvros 14 3,898 23 Mayo 2015, 18:02
Último mensaje: abelvros



Usuarios navegando en este tema: 1 invitado(s)