[For 1.8] [1.8] How add imgur upload button
#1
Add imgur upload button in editor


1 - Get imgur api key: https://imgur.com/register/api_anon (if you already has key, skip this step)

2 - Edit root/jscripts/sceditor/editor_themes/mybb.css

2.1 - Add after all

.sceditor-button-imgur div {

  background-image:url(imgur.png);

}
.sceditor-button-imgur div.imgurup {

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

}

2.2 - Repeat step 2.1 with all other themes of sceditor.

3 - Copy imgur.png     and spinner.gif     in root/jscripts/sceditor/editor_themes/

4 - Edit root/jscripts/bbcodes_sceditor.js (this used to add new command in sceditor)

4.1 - Find

tooltip: 'Insert a video'
 });

4.2 - Add after

/*********************
     * 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: 'Upload to Imgur'
 });

4.3 - Add after all

/*****************************
 * 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 - Replace your-key in 4.3 with key obtained in 1

5 - Go to codebuttons template in ACP

5.1 - Find

{$basic2}image,{$email}

5.2 - Replace

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


If you use Quick Advanced Editor (v 4.0.0 or newest) or Quick Advanced Editor Plus (v 0.6 or newest)

Repeat step 5.1 and 5.2 in Template Sets » Global Templates » codebutquick

Preview:

http://www.dailymotion.com/video/x212n03_tut-demo_tech
Reply


Messages In This Thread
[1.8] How add imgur upload button - by martec - 2014-07-08, 11:00 AM
RE: [1.8] How add imgur upload button - by martec - 2014-09-03, 01:10 AM
RE: [1.8] How add imgur upload button - by spAik - 2014-09-04, 01:16 PM
RE: [1.8] How add imgur upload button - by martec - 2014-09-05, 11:46 AM
RE: [1.8] How add imgur upload button - by p00lz - 2014-11-03, 01:49 AM
RE: [1.8] How add imgur upload button - by 7uyk - 2014-09-14, 11:15 PM
RE: [1.8] How add imgur upload button - by kaashi - 2015-03-13, 12:45 AM
RE: [1.8] How add imgur upload button - by tetsu - 2014-09-17, 10:15 AM
RE: [1.8] How add imgur upload button - by martec - 2014-09-17, 10:23 AM
RE: [1.8] How add imgur upload button - by tetsu - 2014-09-17, 10:41 AM
RE: [1.8] How add imgur upload button - by martec - 2014-11-03, 02:01 AM
RE: [1.8] How add imgur upload button - by p00lz - 2014-11-03, 01:34 PM
RE: [1.8] How add imgur upload button - by Yadomi - 2014-11-13, 06:07 AM
RE: [1.8] How add imgur upload button - by Yadomi - 2014-11-14, 05:39 PM
RE: [1.8] How add imgur upload button - by Lyklor - 2014-11-20, 06:32 AM
RE: [1.8] How add imgur upload button - by martec - 2014-12-02, 12:29 PM
RE: [1.8] How add imgur upload button - by niere8 - 2015-02-17, 06:39 PM
RE: [1.8] How add imgur upload button - by martec - 2015-02-17, 06:45 PM
RE: [1.8] How add imgur upload button - by niere8 - 2015-02-17, 07:37 PM
RE: [1.8] How add imgur upload button - by martec - 2015-02-18, 03:09 AM
RE: [1.8] How add imgur upload button - by martec - 2015-05-27, 07:14 AM
RE: [1.8] How add imgur upload button - by niere8 - 2015-06-03, 12:57 AM
RE: [1.8] How add imgur upload button - by Lektz - 2015-06-11, 12:40 AM
RE: [1.8] How add imgur upload button - by martec - 2015-06-24, 11:59 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)