Add Imgur upload button in the editor

[Protesqu]

How to add an Imgur upload button in the editor

*This is my original tutorial. You may share it freely, but(!) consider mentioning who wrote it.

1.

Create an Imgur account, and then register an application here: https://api.imgur.com/oauth2/addclient

Now you have a client ID, which is to be used in the Imgur plugin we add to the editor.

 

2.

Download the Imgur plugin from http://ckeditor.com/addon/imgur

Go to your ACP-> Customization-> Editor--> Toolbars-> "Add Button". Upload the plugin file(zip) for installation.

By now you can drag the button to the toolbar for it to show, but it won't function just yet.

 

3.

Connect to your FTP-> Edit file: applications/core/interface/ckeditor/ckeditor/config.js

Add the settings in the end of the file (remember to use your Client ID number):

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'imgur';
    config.imgurClientId = '123535ae12372d4';
};

Save & upload, done.

I hope this tutorial helped you!

Result:

Edited February 13, 2017 by Protesqu
line break

[Maxtron]

Thank you, because I can use this app to my forum.

[Little Monsters]

When creating the app what should I put as the callback URL?

[Protesqu]

42 minutes ago, Little Monsters said:

When creating the app what should I put as the callback URL?

1st option means images will be uploaded to your imgur account directly + callback url

2nd option is just without a callback url

3rd option means images will be uploaded anonymously to imgur, not to your account directly

callback url is just your site url.

 

Edited February 13, 2017 by Protesqu

[Jason Xtreme]

I tried to put that config like that.

And when i want to post/reply, I getting this.

 

 

*Sorry my bad english*

Edited February 14, 2017 by Jason Xtreme

[ansube]

1 hour ago, Jason Xtreme said:

I tried to put that config like that.

And when i want to post/reply, I getting this.

 

 

*Sorry my bad english*

I have the same problem

[Protesqu]

1 hour ago, Jason Xtreme said:

I tried to put that config like that.

And when i want to post/reply, I getting this.

 

 

*Sorry my bad english*

You only need one line to specify extra plugins. example:

config.extraPlugins = 'imgur,dropler';

config.imgurClientId = '12345';

config.droplerConfig= {

............

 

 

 

 

27 minutes ago, ansube said:

I have the same problem

If you also have more than 1 extraPlugin - check my last comment. Otherwise, you should specify a little more.

[Jason Xtreme]

Like this @Protesqu ?

But, still not working  

[Protesqu]

1 hour ago, Jason Xtreme said:

Like this @Protesqu ?

But, still not working  

config.imgurClientId = '12345';

It should be a small d.

[Jason Xtreme]

30 minutes ago, Protesqu said:

config.imgurClientId = '12345';

It should be a small d.

Like this ?.

and still dosen't work  

 

Edited February 15, 2017 by Jason Xtreme

[Protesqu]

Well...no clue man, my config works:

/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig=function(a){a.toolbarGroups=[{name:"document",groups:["mode","document","doctools"]},{name:"clipboard",groups:["clipboard","undo"]},{name:"editing",groups:["find","selection","spellchecker"]},{name:"forms"},{name:"basicstyles",groups:["basicstyles","cleanup"]},{name:"paragraph",groups:["list","indent","blocks","align","bidi"]},{name:"links"},{name:"insert"},{name:"styles"},{name:"colors"},{name:"tools"},{name:"others"},{name:"about"}];a.removeButtons="Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript";
a.removeDialogTabs="link:advanced"};
CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'imgur';
    config.imgurClientId = '123....';
};

 

What version of IPS are you using?

Edited February 15, 2017 by Protesqu

[Jason Xtreme]

4 minutes ago, Protesqu said:

Well...no clue man, my config works:

/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig=function(a){a.toolbarGroups=[{name:"document",groups:["mode","document","doctools"]},{name:"clipboard",groups:["clipboard","undo"]},{name:"editing",groups:["find","selection","spellchecker"]},{name:"forms"},{name:"basicstyles",groups:["basicstyles","cleanup"]},{name:"paragraph",groups:["list","indent","blocks","align","bidi"]},{name:"links"},{name:"insert"},{name:"styles"},{name:"colors"},{name:"tools"},{name:"others"},{name:"about"}];a.removeButtons="Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript";
a.removeDialogTabs="link:advanced"};
CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'imgur';
    config.imgurClientId = '123....';
};

 

What version of IPS are you using?

 

4.17.1, but finally it works  

 

Thx @Protesqu for ur help

[Protesqu]

Just now, Jason Xtreme said:

 

4.17.1, but finally it works  

 

Thx @Protesqu for ur help

Glad to hear! nicely done

Just in case you used my exact config- pay attention that it has different settings, so dropler might not function now.

[Jason Xtreme]

Just now, Protesqu said:

Glad to hear! nicely done

Just in case you used my exact config- pay attention that it has different settings, so dropler might not function now.

Maybe 

[ansube]

@Protesqu I still get the same error. Here is my configuration:

/home/#/public_html/applications/core/interface/ckeditor/ckeditor/config.js

/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig=function(a){a.toolbarGroups=[{name:"document",groups:["mode","document","doctools"]},{name:"clipboard",groups:["clipboard","undo"]},{name:"editing",groups:["find","selection","spellchecker"]},{name:"forms"},{name:"basicstyles",groups:["basicstyles","cleanup"]},{name:"paragraph",groups:["list","indent","blocks","align","bidi"]},{name:"links"},{name:"insert"},{name:"styles"},{name:"colors"},{name:"tools"},{name:"others"},{name:"about"}];a.removeButtons="Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript";
a.removeDialogTabs="link:advanced"};

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'imgur,dropler';
    config.imgurClientId = 'b730c68...';
};

I'm missing a line to add?