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;

} 

PHP

Select All

2.2 - Repetir el paso 2.1 con todos los otros sceditor.


3 - Copiar imgur.png [Imagen: attachment.php?aid=31915]    y spinner.gif [Imagen: attachment.php?aid=31916]    en root/jscripts/sceditor/editor_themes/

4 - Editar root/jscripts/bbcodes_sceditor.js 

4.1 - Buscar:

tooltip: 'Insert a video'
 }); 

PHP

Select All

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'
 }); 

PHP

Select All

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);
 }; 

PHP

Select All

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} 

PHP

Select All

5.2 - Reemplazar por:

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

PHP

Select All

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

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

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

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');

PHP

Select All

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