0.- Registrarte en https://imgur.com/signin
1 - Conseguir un api key: https://imgur.com/signin (Sí ya lo tienes, puedes saltarte este paso)


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

2.1 - Añadir al final de 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.


3 - Copiar imgur.png 
    y spinner.gif 
    en root/jscripts/sceditor/editor_themes/

4 - Editar root/jscripts/bbcodes_sceditor.js 

4.1 - Buscar:

tooltip: 'Insert a video'
 }); 

4.2 - Agregar luego:

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

/*****************************
 * 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 (En el paso 4.3) your-key obtenida del paso numero 1

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

5.1 - Buscar:

{$basic2}image,{$email} 

5.2 - Reemplazar por:

{$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:




Creditos: Martec (Mybb.com)
Tutorial traido a Mybb-es.com con derechos de autor.

lo vi en MyBB.com y es un pedazo de tutorial, parte del potencial del jquery

Muy buena la info, cuando actualice es fija que esto lo hago

Muy bueno, estaba buscando como hacerlo. Gracias

Tengo problemas para conseguir el ApiKey, podrías explicarmelo mas detalladamente @Ignacio P ?

Yo todavía no lo probé, pero creo que la Key la creas aca https://api.imgur.com/oauth2/addclient completas con tus datos y te da tu Api Key

4 Oct, 2014, 12:57 am XEDE wrote:
Yo todavía no lo probé, pero creo que la Key la creas aca https://api.imgur.com/oauth2/addclient completas con tus datos y te da tu Api Key

Si compy, pero no se que poner en las opciones

Osea en las opciones que tenes aca https://api.imgur.com/oauth2/addclient te referís? tendrías que poner:

Application name: MI APP o lo que te guste mas
Authorization type: Anonymous
Authorization callback URL: Seria la url de tu web aunque no estoy seguro si solo con el www funciona en todo caso lo configuras en "Account Settings" una vez lo creas
Application website (optional): esto es opcional
Email: tu e-mail
Description: Lo que quieras

4 Oct, 2014, 12:14 pm XEDE wrote:
Osea en las opciones que tenes aca https://api.imgur.com/oauth2/addclient te referís? tendrías que poner:

Application name: MI APP o lo que te guste mas
Authorization type: Anonymous
Authorization callback URL: Seria la url de tu web aunque no estoy seguro si solo con el www funciona en todo caso lo configuras en "Account Settings" una vez lo creas
Application website (optional): esto es opcional
Email: tu e-mail
Description: Lo que quieras

Muchas gracias por tu ayuda @XEDE
ya he seguido todos los pasos, pero nada no me termina de funcionar, me sale el icono de imgur, pero al darle a subir no sube nada.

Creo que el fallo puede ser el paso 2.2
porque solo encuentro un archivo a editar, alguien sabe el nombre de los demás?

No entendí bien el problema, osea la apikey ya la tenes entonces? pero ahora te da problemas cuando usas el botón no carga la imagen?

Si es así el paso 2.2 solo se refiere al CSS del editor o editores, si ves el botón de imgur en el editor eso esta OK, lo que tenes que verificar es el paso 4.4 en esta parte:

 // Ok, I don't handle the errors. An exercice for the reader.
 xhr.setRequestHeader('Authorization', 'Client-ID your-key');

Reemplazaste OK la parte que dice your-key por tu apikey? si es así te fijaste que no te copiara algún carácter demás? o en un formato erróneo?

En todo caso fijate de abrir un tema nuevo en el foro de Soporte para no desvirtuar acá, y deja explicado los pasos que hiciste y las plantillas como las modificaste


EDIT:

Implementado en mi foro, muy buen tuto funciona de 10! +rep