Image Uploader Plugin
An open source plugin for CKEditor to upload images saved on your local machine. Now you can easily use this upload plugin avoiding the hassle of creating your own image uploader plugin and also it's totally free:).
How to install?
- Click on download button, rename the folder to simage and add the entire simage folder into CKEditor plugins folder.
- You can use this plugin with CKEditor. You need to configure the end point where you want to store the images uploaded using this plugin. Add it in your config.js as follows:
CKEDITOR.config.extraPlugins: 'simage' //to enable to plugin
CKEDITOR.config.imageUploadURL: <INSERT URL>
- The dataParser attribute expects a function with a parameter in which you should pass the data returned by the endpoint that you have configured (imageUploadURL) . This function is expected to return a url. This url will be set to the src attribute of image html element.
- Example response by imageUploadURL endpoint
- You can also use srcset attribute to display the image based on resolution of the display. This is optional, in case you don't specify srcset attribute in config.js, it will pick up the image from src which is set by the return value of dataParser function. srcset attribute should be configured to be a function which returns the expected string that you want to set in srcsethtml attribute. Response returned by the endpoint that you have configured is passed to this function as an argument. Add the following statement in config.js to enable srcset:
- You can listen to preventFormSubmit event to do anything while the image is uploading.
- For example, this can be a hook to display a wait icon while the image is uploading.
- Similarly, you can use the event enableFormSubmit to perform any action after image has successfully uploaded or the image upload failed. For example, you can remove the wait icon at this point.