yfxie / ckeditor-imgur Goto Github PK
View Code? Open in Web Editor NEWA CKEditor plugin that help you upload image to imgur in easy way
License: MIT License
A CKEditor plugin that help you upload image to imgur in easy way
License: MIT License
When I use this pkugin to upload someimage, it response this error :
POST https://api.imgur.com/3/image 403 (Permission Denied)
When imgurClientID
is not provided (which could happen cos of wrong documentation, i already posted here), browser returns alert with text 'undefined' in this line:
https://github.com/yfxie/ckeditor-imgur/blob/master/vendor/assets/javascripts/ckeditor/plugins/imgur/plugin.js#L9
I checked in my Imgur account. But, couldn't get them.
Is it possible to see the uploaded images in my account?
`
CKEDITOR.editorConfig = function( config ) {
config.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' }
];
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'imgur';
config.imgurClientId = '2e0148a912f8a30';
};
`
`
<textarea id="editor1" name="comment" ></textarea> <script> CKEDITOR.replace( 'editor1'); </script>`
https://i.gyazo.com/775b4f94a20d7fd1c0e64c17f0c19084.png
Textarea disappear doing this...
https://github.com/yfxie/ckeditor-imgur#usage
CKEDITOR.editorConfig = function (config) {
...
config.extraPlugins = 'imgur';
// Get your client-id from https://api.imgur.com/oauth2/addclient
config.imgurClientID = '55d8ba08326ec75';
...
};
In the code, replace imgurClientID
to imgurClientId
Hi,
Looks like i am not able to set the imgurClientID working. I am always getting the alert telling me to add the key into the config file :
But it is there.
Also, i do not want my user to have all the tools in the toolbar so i created that array :
config.toolbar = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, '/', { name: 'styles', items: [ 'Styles', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor'] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }, // Here what should i have to add your plugin ? ];
Could you tell me what i could add inside it to add you plugin button into my toolbar?
Kind regards
You should had in the ReadMe file that we need to have Jquery loaded in the HEAD:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
Regards ๐
Hi,
firts of all, thanks for imgur plugins. It works well except when working with multiple instances.
Here is the foloowing code :
`CKEDITOR.disableAutoInline = true;
$("div.body[contenteditable='true']").each(function( index ) {
var element_id = $(this).attr('id');
var comment_id = $(this).attr('data-comment-id');
console.log(element_id);
CKEDITOR.inline( element_id, {
customConfig: 'config-file-with-imgur.js',
on: {
blur: function( event ) {
var data = event.editor.getData();
alert('Sending: ' + data + ' to ' + comment_id );
}
});
});`
As result, the first item as inline editor but following are not and imgure problem trigger the following error - in web dev console :
TypeError: editor.window.getFrame(...) is null
thanks again !
Hey, thanks for this plugin, it was pretty much exactly what I needed. However, I found a little typo in the readme, it says config.imgurClientID
but that should be config.imgurClientId
(lower case D), as that's what the code refers to.
Failed to load https://api.imgur.com/3/image: The 'Access-Control-Allow-Origin' header contains the invalid value ''. Origin 'domain' is therefore not allowed access.
VM557:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
at Function.n.parseJSON (jquery-2.1.1.min.js:4)
at Object. (ckeditor.js:834)
at j (jquery-2.1.1.min.js:2)
at Object.fireWith [as rejectWith] (jquery-2.1.1.min.js:2)
at x (jquery-2.1.1.min.js:4)
at XMLHttpRequest. (jquery-2.1.1.min.js:4)
In documentation you have:
config.imgurClientId = ''
But the issue is that extension needs imgurClientID
not imgurClientId
(notice the case).
I wasted quite a lot of time, cos of this.
Please update the readme
An error appears on Chromes's console on this line:
a.on("instanceReady", function() { var b = $(a.window.getFrame().$).parent();
Uncaught TypeError: Cannot read property '$' of null
Despite of the error, the plugin seems working ok.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.