06-03-2013, 02:28 PM
1 - Take the imgur api key: https://imgur.com/register/api_anon
2 - Create imgur.php in root
2.1 - Replace your key in the key file just created imgur.php (taken offline key above) 3 - Copy images in folder imgur.png loader.gif and images of MyBB 4 - Copy the image imgurbut.png JScripts / editor_themes / default / images / and jscripts/editor_themes/office2007/images / 5 - Open JScripts / editor.js 5.1 - Search:
3 - Copy and imgur.png loader.gif image in the images folder MyBB
4 - Copy the image imgurbut.png JScripts / editor_themes / default / images / and jscripts/editor_themes/office2007/images /
5 - Open JScripts / editor.js
5.1 - Search for:
5.2 - Add the following:
5.3 - Find more:
5.4 - more below:
5.5 - Find more:
5.6 - Add the following:
2 - Create imgur.php in root
PHP Code:
<html>
<head>
<title>Upload to Imgur</title>
</head>
</html>
<div><img src="images/imgur.png" border="0" /></div>
<br /><br />
<button onclick="document.querySelector('input').click()">Select file...</button>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
<script>
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
/* Is the file an image? */
if (!file || !file.type.match(/image.*/)) return;
/* It is! */
document.body.className = "uploading";
/* 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
fd.append("key", "your key"); // Get your own key http://api.imgur.com/
var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
var code = '[img]' + JSON.parse(xhr.responseText).upload.links.original + '[/img]';
var editor = eval('opener.' + 'clickableEditor');
editor.performInsert(code);
javascript:window.close()
}
// Ok, I don't handle the errors. An exercice for the reader.
/* And now, we send the formdata */
xhr.send(fd);
}
</script>
<!-- Bla bla bla stuff ... -->
<style>
body {text-align: center; background-color: #181817; overflow-x:hidden; overflow-y:auto;}
div { background-color: rgb(43, 43, 43); border-bottom: 4px solid rgb(68, 68, 66); margin: -8px;}
p {display: none}
.uploading p {display: inline}
</style>
<br /><br />
<p><img src="images/loader.gif" border="0" /></p>
2.1 - Replace your key in the key file just created imgur.php (taken offline key above) 3 - Copy images in folder imgur.png loader.gif and images of MyBB 4 - Copy the image imgurbut.png JScripts / editor_themes / default / images / and jscripts/editor_themes/office2007/images / 5 - Open JScripts / editor.js 5.1 - Search:
3 - Copy and imgur.png loader.gif image in the images folder MyBB
4 - Copy the image imgurbut.png JScripts / editor_themes / default / images / and jscripts/editor_themes/office2007/images /
5 - Open JScripts / editor.js
5.1 - Search for:
PHP Code:
{type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},
5.2 - Add the following:
PHP Code:
{type: 'button', name: 'imgur', insert: 'imgur', image: 'imgurbut.png', title: 'Upload to Imgur'},
5.3 - Find more:
PHP Code:
insertIMG: function()
{
image = prompt(this.options.lang.enter_image, "http://");
if(image)
{
this.performInsert("[img]"+image+"[/img]", "", true);
}
},
5.4 - more below:
PHP Code:
insertImgur: function()
{
MyBB.popupWindow('imgur.php', 'imgur', 240, 200);
},
5.5 - Find more:
PHP Code:
case "image":
this.insertIMG();
break;
5.6 - Add the following:
PHP Code:
case "imgur":
this.insertImgur();
break;