1 - Get imgur api key: https://imgur.com/register/api_anon
2 - Open root/jscripts/sceditor/jquery.sceditor.mybb.helper.js
2.1 - Copy code below after all:
2.2 - Change <yourkey> with Client ID key obtained in 1
2.3 - Find
2.3.1 - Copy code below above
2.4 - Find
2.4.1 - Replace
2.5 - Find
2.5.1 - Replace
3 - Open root/jscripts/sceditor/themes/default.min.css
3.1 - Copy code below after all:
3.2 - Repeat step 3 and 3.1 with modern.min.css, office.min.css, office-toolbar.min.css and square.min.css.
4 - Copy imgur.png and spinner.gif in root/jscripts/sceditor/themes/
All done.
Demo video:
Credit: https://hacks.mozilla.org/category/drag-.../complete/
http://stackoverflow.com/questions/16951...javascript
![.gif]()
spinner.gif (Size: 1.51 KB / Downloads: 33)
![.png]()
imgur.png (Size: 1.12 KB / Downloads: 33)
2 - Open root/jscripts/sceditor/jquery.sceditor.mybb.helper.js
2.1 - Copy code below after all:
Code:
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]';
clickableEditor.performInsert(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 <yourkey>');
/* And now, we send the formdata */
xhr.send(fd);
};2.2 - Change <yourkey> with Client ID key obtained in 1
2.3 - Find
Code:
/*******************
* Init the editor *
*******************/2.3.1 - Copy code below above
Code:
/********************************************
* Imgur Tag *
********************************************/
$.sceditor.command.set("imgur", {
exec: function ()
{
document.querySelector('textarea').insertAdjacentHTML( 'afterEnd', '<input class="imgur" style="visibility: collapse; width: 0px; display:none;" type="file" onchange="upload(this.files[0])">' );
document.querySelector('input.imgur').click();
},
txtExec: function()
{
document.querySelector('textarea').insertAdjacentHTML( 'afterEnd', '<input class="imgur" style="visibility: collapse; width: 0px; display:none;" type="file" onchange="upload(this.files[0])">' );
document.querySelector('input.imgur').click();
},
tooltip: 'Upload para Imgur'
});
$.sceditor.plugins.bbcode.bbcode.set("imgur", {
tags: {
pre: null
},
format: function ()
{
document.querySelector('textarea').insertAdjacentHTML( 'afterEnd', '<input class="imgur" style="visibility: collapse; width: 0px; display:none;" type="file" onchange="upload(this.files[0])">' );
document.querySelector('input.imgur').click();
},
html: function ()
{
document.querySelector('textarea').insertAdjacentHTML( 'afterEnd', '<input class="imgur" style="visibility: collapse; width: 0px; display:none;" type="file" onchange="upload(this.files[0])">' );
document.querySelector('input.imgur').click();
}
});2.4 - Find
Code:
'image,2.4.1 - Replace
Code:
'image,imgur,2.5 - Find
Code:
$('#message, #signature').data('sceditor').insert(code);2.5.1 - Replace
Code:
$('#message, #signature, textarea[id*="quickedit_"]').data('sceditor').insert(code);3 - Open root/jscripts/sceditor/themes/default.min.css
3.1 - Copy code below after all:
Code:
.sceditor-button-imgur div { background-image:url(imgur.png); }.sceditor-button-imgur div.imgurup { background-image:url(spinner.gif) !important; }4 - Copy imgur.png and spinner.gif in root/jscripts/sceditor/themes/
All done.
Demo video:
Credit: https://hacks.mozilla.org/category/drag-.../complete/
http://stackoverflow.com/questions/16951...javascript
spinner.gif (Size: 1.51 KB / Downloads: 33)
imgur.png (Size: 1.12 KB / Downloads: 33)