2013-11-28, 02:25 PM
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:
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
2 - Open root/jscripts/sceditor/jquery.sceditor.mybb.helper.js
2.1 - Copy code below after all:
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
/*******************
* Init the editor *
*******************/
2.3.1 - Copy code below above
/********************************************
* 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
'image,
2.4.1 - Replace
'image,imgur,
2.5 - Find
$('#message, #signature').data('sceditor').insert(code);
2.5.1 - Replace
$('#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:
.sceditor-button-imgur div { background-image:url(imgur.png); }.sceditor-button-imgur div.imgurup { background-image:url(spinner.gif) !important; }
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