[Pirate]

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

PHP Code:

.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

PHP Code:

tooltip: 'Insert a video' });

4.2 - Add after

PHP Code:

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

[php]/*****************************
* 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...-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);

[Earth]

Nice tutorial even though I personally wouldn't use it, it could be useful to other people.

@Oni fix the css for the code block it's protruding the theme. Should be around line 900 or so.

[Pirate]

Nice tutorial even though I personally wouldn't use it, it could be useful to other people.

@Oni fix the css for the code block it's protruding the theme. Should be around line 900 or so.

Thank you @fire

[Oni]

Nice tutorial even though I personally wouldn't use it, it could be useful to other people.

@Oni fix the css for the code block it's protruding the theme. Should be around line 900 or so.

Example?

[Earth]

Example?

http://imgur.com/a/7dwBn

Browser: Opera

[blinkybill94]

thanks for copying and pasting this from here op.

[Pirate]

thanks for copying and pasting this from here op.

It actually was from my own forum. But thanks