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

Somos un foro de soporte en español que no tiene publicidad y tiene muchas cosas gratuitas aportadas por la comunidad, contribuye con el foro para poder así obtener alguna membresía de manera gratuita.
SoporteMyBB tiene un total de
1124 temas de soporte.
0 quedan aún por resolver, 244 han quedado obsoletos y 880 han sido resueltos.
Aún no tienes una cuenta, regístrate es gratis.

Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Agregar botón Imgur al editor
 abelvros
Usuario del Foro
abelvros
Estado: Sin conexión Registrados
3
26
15
Spain
0
0
15
158
15 December 2014, 21:02
#1
5
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:

.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:
tooltip'Insert a video'
 
}); 

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

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

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

{$basic2}image,{$email

5.2 - Ese mismo codigo debe ser reemplazado 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:
Última modificación: 23 December 2014, 06:50 por Whiteneo.
 
 BitLiberal
Usuarios
BitLiberal
Estado:
 
0
0
0
0
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
abelvros
Estado: Sin conexión Registrados
3
26
15
Spain
0
0
15
158
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
Usuarios
BitLiberal
Estado:
 
0
0
0
0
15 December 2014, 21:49
#4
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:

       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
 
 BitLiberal
Usuarios
BitLiberal
Estado:
 
0
0
0
0
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
abelvros
Estado: Sin conexión Registrados
3
26
15
Spain
0
0
15
158
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
Usuarios
BitLiberal
Estado:
 
0
0
0
0
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:

[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:
.imgur{
 
   background#444;
 
   color#FFF !important;
 
   width125px;
 
   text-aligncenter;
 
   border-radius2px;
 
   height20px;
 
   cursorpointer;
 
   font-size16px;


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


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

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


document.body.className "uploading";
var 
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 
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).


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:


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
 
 abelvros
Usuario del Foro
abelvros
Estado: Sin conexión Registrados
3
26
15
Spain
0
0
15
158
16 December 2014, 00:14
#8
1
@Bitliberal fantástico trabajo, muchas gracias.

Mas posibilibales para insertar imagenes :D
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
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

Estado: Sin conexión Registrados
17
74
10
Chile
0
0
10
25
29 May 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

[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 :/
Última modificación: 30 May 2015, 18:07 por zetanight.
 


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



Usuarios navegando en este tema: 1 invitado(s)