Image Uploader without File Browser for CKEditor
This is a simple plugin that replaces the built-in image function in CKEditor. This plugin tries to build CKEditor's image function in Microsoft Word style. You can save the image directly to your server without CKFinder or other file browser.
Installation and Configuration
Front-end configuration
Clone the folder into the plugin folder in CKEditor. Then, activate the plugins by adding extraPlugins either in the following way.
In-Page
CKEDITOR.replace( 'editor1', {
extraPlugins: 'imageUploader'
});
In config.js
CKEDITOR.editorConfig(function(config) {
config.extraPlugins = 'imageUploader';
};
After activating the plugin, you need to specify the URL to your server for handling the upload request.
CKEDITOR.editorConfig(function(config) {
config.uploadUrl = 'TO/YOUR/PATH';
};
The plugins will automatically replace the built-in image function.
Back-end configuration
You need to handle the request in server and send back the typical upload response.
Here is the sample code for NodeJS server.
var multer = require('multer');
upload = multer({ storage: destination });
router.post('TO/YOUR/PATH', upload.any(), function(req, res) {
// Some operation
res.send({
"uploaded": 1,
"fileName": "IMAGE.PNG",
"url": "PATH/TO/IMAGE"
})
})
Issue Reported
Uncaught TypeError: fileTools.bindNotifications is not a function (line 16)
This error is due to the absence in fileTools plugin. It can be solved by importing the fileTools back. Please be reminded all the request and response to the server should follow the structure as same as the typical CKEDITOR image upload process.
Support
If you have any questions, please contact me.
License
This plugin is licensed under the MIT license: http://en.wikipedia.org/wiki/MIT_License
Copyright © 2017 by Ryan Siu