MyBB Community Forums

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:

    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

Its a great tool and I appreciate if you update it to work for uploading multiple images atonce.

(2013-11-28, 03:34 PM)Yaldaram Wrote: [ -> ]Its a great tool and I appreciate if you update it to work for uploading multiple images atonce.

sorry i forgotten put credit...
I only make some adaption to work with sceditor

Obrigado @martec o seu fórum é legal. E coloque mais tutoriais com o sceditor e os truques do seu fórum.

Obrigado.

Some observation in "Authorization type:" ?

Not working for me. No errors in console nor am I seeing the icon on the editor.

(2013-11-29, 05:23 PM)exotros Wrote: [ -> ]Not working for me. No errors in console nor am I seeing the icon on the editor.

check again step 2.4, 2.4.1, 3, 3.1 and 3.2

I see the problem, wen you ask to replace 'image, and the other code, I can't find the code to replace.

(2013-11-29, 07:43 PM)exotros Wrote: [ -> ]I see the problem, wen you ask to replace 'image, and the other code, I can't find the code to replace.

what version of plugin you use?
you need use last version https://github.com/samclarke/SCEditor-MyBB

before


after step 2.4.1

When I generate the apy key, in the field Authorization type, there are three options, which should I choose?

(2013-12-02, 11:32 AM)Meadp Wrote: [ -> ]When I generate the apy key, in the field Authorization type, there are three options, which should I choose?

i don´t remember...
you only need Client ID key...
secret key is not necessary here...

Edit:
Use second option