[Tutorial] Agregar botón Imgur al editor

15 December 2014, 21:02

Buenas 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 Registrate o inicia tu sesión para ver este contenido.
Aun así yo ampliare unos detalles que veo necesario para el tutorial.

Bueno vamos alla

0.- Registrarte en Registrate o inicia tu sesión para ver este contenido
1 - Conseguir un api key: Registrate o inicia tu sesión para ver este contenido (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
[Imagen: 3XH2iq2.png]

Aqui los codigos despues de crear la Api(He borrado algunas numeraciones)
[Imagen: EmVaMZD.png]

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:

Código PHP: ( Seleccionar Todo )

.sceditor-button-imgur div {

 background-image:url(imgur.png);

}
.sceditor-button-imgur div.imgurup {

 background-image:url(spinner.gif) !important;

}

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 [Imagen: dMzsXBE.png]

y y spinner.gif [Imagen: bUibBeT.gif]

en root/jscripts/sceditor/editor_themes/

4 - Editar root/jscripts/bbcodes_sceditor.js

4.1 - Buscar:

Código PHP: ( Seleccionar Todo )

tooltip: 'Insert a video'
 });

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

Código PHP: ( Seleccionar Todo )

/*********************
     * Add imgur command *
     *********************/
 $.sceditor.command.set("imgur", {
 _imgur: function () {
 document.querySelector('textarea').insertAdjacentHTML( 'afterEnd', '<input class="imgur" style="visibility:hidden;position:absolute;top:0;" type="file" onchange="upload(this.files[0])" accept="image/*">' );
 document.querySelector('input.imgur').click();
 },
 exec: function () 
 {
 $.sceditor.command.get('imgur')._imgur();
 },
 txtExec: function() 
 {
 $.sceditor.command.get('imgur')._imgur();
 },
 tooltip: 'Subir a Imgur'
 });

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

Código PHP: ( Seleccionar Todo )

/*****************************
 * Add imgur upload function *
 *****************************/
 function upload(file) {

 /* Is the file an image? */
 if (!file || !file.type.match(/image.*/)) return;
 
 /* It is! */
 document.body.className = "uploading";
 var d = document.querySelector(".sceditor-button-imgur div");
 d.className = d.className + " imgurup";
 
 /* Lets build a FormData object*/
 var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
 fd.append("image", file); // Append the file
 var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
 xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
 xhr.onload = function() {
 var code = '[img]' + JSON.parse(xhr.responseText).data.link + '[/img]';
 $('#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);
 };

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:

Código PHP: ( Seleccionar Todo )

{$basic2}image,{$email}

5.2 - Ese mismo codigo debe ser reemplazado por:

Código PHP: ( Seleccionar Todo )

{$basic2}image,imgur,{$email}

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:

15 December 2014, 21:29

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!

15 December 2014, 21:35

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.

15 December 2014, 21:49

3

(15 December 2014, 21:35 )abelvros escribió: Registrate o inicia tu sesión para ver este contenidoSubir 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:

Código: ( Seleccionar Todo )

       function upload(file) {



        if (!file || !file.type.match(/image.*/)) return;



        

        document.body.className = "uploading";



        

        var fd = new FormData(); 

        fd.append("image", file); 

        var xhr = new XMLHttpRequest(); 

        xhr.open("POST", "https://api.imgur.com/3/image.json");

        xhr.onload = function() {

            var code = '' + JSON.parse(xhr.responseText).data.link + '';

            document.getElementById("xthreads_gal_img").value= code;

            document.getElementById("xthreads_gal_img2").src= code;

        }

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

        xhr.send(fd);

    }

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

15 December 2014, 22:09

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

15 December 2014, 22:18

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!

16 December 2014, 00:06

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:

[Imagen: YFRK13b.png]

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:

Código PHP: ( Seleccionar Todo )

.imgur{
    background: #444;
    color: #FFF !important;
    width: 125px;
    text-align: center;
    border-radius: 2px;
    height: 20px;
    cursor: pointer;
    font-size: 16px;
}

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

Código PHP: ( Seleccionar Todo )

/*****************************
* FUNCION IMGUR MEJORADA *
*****************************/
function upload(file) {

if (!file || !file.type.match(/image.*/)) return;


document.body.className = "uploading";
var d = document.querySelector(".fa-upload");
d.className = d.className - " fa-upload";
d.className = d.className + " fa fa-spinner fa-spin";


var fd = new FormData(); 
fd.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.imgur.com/3/image.json");
xhr.onload = function() {
var code = '[img]' + JSON.parse(xhr.responseText).data.link + '[/img]';
$('#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);
};

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).

Código PHP: ( Seleccionar Todo )

image:'<div><label for="link">{url}</label> <input type="text" id="image" value="http://" /></div><div><label for="width">{width}</label> <input type="text" id="width" size="2" /></div><div><label for="height">{height}</label> <input type="text" id="height" size="2" /></div><div><input type="button" class="button" value="{insert}" /></div>',

Y se cambia por esta otra:

Código PHP: ( Seleccionar Todo )

image: '<label unselectable="on" class="imgur"><i class="fa fa-upload"></i> Subir Imagen<input style="visibility:hidden;top:0;" type="file" onchange="upload(this.files[0])" accept="image/*"></label><div><label for="link">O introduce una URL:</label> <input type="text" id="image" value="http://" /></div><div><label for="width">{width}</label> <input type="text" id="width" size="2" /></div><div><label for="height">{height}</label> <input type="text" id="height" size="2" /></div><div><input type="button" class="button" value="{insert}" /></div>',

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 Registrate o inicia tu sesión para ver este contenido puesto o los iconos no se veran.

¡Saludos @ abelvros ! Sonrisa

16 December 2014, 00:14

1

@Bitliberal fantástico trabajo, muchas gracias.

Mas posibilibales para insertar imagenes :D

**2,959** · 16 December 2014, 09:24

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.

29 May 2015, 21:59

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

[Imagen: uQV6LJL.jpg]

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 :/

Posibles temas similares…
Tema		Autor	Respuestas	Vistas	Último mensaje
	[Tutorial] Agregar efecto blur para invitados en posts.	Whiteneo	3	524	5 March 2020, 23:42 Último mensaje: Javier
	[Tutorial] Agregar botón al editor en MyBB 1.8.21	Whiteneo	0	484	18 July 2019, 06:32 Último mensaje: Whiteneo
	[Tutorial] Agregar botón para un Mycode al editor	abelvros	20	7,729	29 June 2019, 04:14 Último mensaje: Whiteneo
	[Tutorial] Agregar publicidad o contenido al primer mensaje (Adsense)	Whiteneo	4	1,141	5 April 2018, 22:43 Último mensaje: Whiteneo
	[Tutorial] Fieldset con estilo iv y boton en el editor.	Whiteneo	7	1,834	20 February 2018, 20:39 Último mensaje: SuperDiego
	[Tutorial] Agregar sistema de gracias a tapatalk.	Whiteneo	0	535	29 July 2017, 18:54 Último mensaje: Whiteneo
	[Tutorial] Añadir spoiler con botón en el editor	Yadomi	24	8,314	27 December 2015, 18:30 Último mensaje: Whiteneo