CKEditor Upload Image

Integrates CKEditor's Upload Image plugin to Drupal. This enables Drupal's default WYSIWYG text editor capable of uploading images that were dropped or pasted from clipboard into the editor as inline image. The upload is implemented in a non-blocking way, so while the image is being uploaded the user may continue editing the content.

This module uses the settings and features of native DrupalImage CKEditor plugin for the uploaded images made via drag and drop or clipboard paste.

Features:

1. Multiple non-blocking upload of images by drag and drop into the editor as inline images.
2. Non-blocking upload an image by pasting from clipboard into the editor as inline image.
3. Uses file name as initial <img> "alt" attribute's value.
4. Client side maximum image file size validation.
5. Control/add caption, alignment (left, right, center) and "alt" attribute value by double clicking the uploaded inline image.
6. Change the size of the uploaded inline image by dragging its resize handle.
7. Move the uploaded inline image around the editor by dragging its move handle.
8. Integrates with Inline responsive images module (more details).
9. Works with IMCE module (more details) sponsored by stefan.r.
10. Admin settings to control the upload directory, maximum file size, image dimension and turn on/off the image upload.

Requirements:

• Drupal 8.x
• CKEditor module
• Upload Image
• Upload Widget
• File Tools
• Notification
• Notification Aggregator

Installation:

1. Download the following CKEditor plugins:
   • Upload Image
   • Upload Widget
   • File Tools
   • Notification
   • Notification Aggregator
2. Unzip and place the contents for each plugin in the the following directory: DRUPAL_ROOT/libraries/ckeditor/plugins/PLUGIN_NAME
3. Install the module per normal https://www.drupal.org/documentation/install/modules-themes/modules-8.
4. Go to the 'Text formats and editors' configuration page: /admin/config/content/formats, and for each text format/editor combo under the CKEditor plugin settings, select Image and there you can control the upload directory, maximum file size, image dimension and turn on/off the image upload.
5. Under Enabled Filters, "Restrict images to this site" must be disabled.
6. If "Limit allowed HTML tags and correct faulty HTML" is enabled, make sure the <img> tag is included in "Allowed HTML tags" with attributes data-cke-saved-src data-cke-upload-id data-widget data-cke-widget-keep-attr data-cke-widget-data class data-image-style data-responsive-image-style inside it.
7. Enable the 'Use the CKEditor Upload Image' permission to applicable Roles at
   'Permissions' page: /admin/people/permissions.

Sponsors

CKEditor Upload Image is being developed by Roland Michael dela Peña (arpeggio) of webfoobar. The author may be contacted if interested in sponsoring a new feature of this module or related module, Drupal consultation/installation/optimization or other Drupal-related projects.

Get involve

If you find this module useful, please consider the following:

• Helping other users that request for a support by sharing what you know is a kind thing to do.
• Patches are welcome. If you are developer, help fix reported bugs by sharing patches.
• Want to help but don't have the time, giving donation would help me allocate more time to support new feature request and fix old bugs (Donate here).

Your support is much appreciated. Thank you in advance.