Drag and Drop images into CKEditor in Drupal 7

Tags: 

Using the simpleuploads plugin with CKEditor in Drupal 7

Technology should not get in the way of the act of creation. When typing a post it feels like a disruption in the flow of creativity to have to use a separate field to attach images and then use another method to insert them into the text. I wanted an easy way to just drag an image from my desktop right into the spot in the story I want to use it.

The simpleuploads plugin for CKEditor provides that functionality: http://alfonsoml.blogspot.com/p/simpleuploads-plugin-for-ckeditor.html

The developer provides a sample php script showing how to utilize the plugin: https://github.com/AlfonsoML/CKEditorUploader/blob/master/upload.php. However, due to the way Drupal works you can't just drop the plugin into CKEditor. To help with this I created a simple module that integrates the Simpleuploads plugin into Drupal.

NOTE: The Simpleuploads plugin is not free. It costs about $10 but in my opinion it is worth it for the ease of use it provides.

Install and setup:

The module works with the CKEditor module:https://www.drupal.org/project/ckeditor
I've tested this with version 7.x-1.17

The CKEditor library should be installed to the/sites/all/libraries directory:http://ckeditor.com/.
So you should have: /sites/all/libraries/ckeditor.
I've tested this with version 4.5.7

If you've already got CKEditor installed, you might have installed the library into the module folder and have:
/sites/all/libraries/ckeditor/ckeditor
Tehcnically this is the way to set it up but I've run into various issues getting some third party ckeditor plugins to work when it is here. Just keep that in mind if you can't get the plugin icons to show up in the ckeditor toolbar. You might try switching it to the libraries directory.

You will also need the Libraries module installed (if you put the ckeditor library in the libraries directory): https://www.drupal.org/project/libraries.

Add the Simpleuploads plugin to the /sites/all/modules/ckeditor/plugins directory. (NOTE this is the ckeditor Drupal module folder). So for example: yourDrupalSite/sites/all/modules/ckeditor/plugins/simpleuploads. Keep in mind this is the simpleuploads plugin not the Drupal module.
I've tested this with version 4.3.17

ckeditor.config.js

In the CKEditor Drupal module edit the ckeditor.config.js file and add the plugin. You should see an existing entry that says:
config.extraPlugins = '';
Change that too:

config.extraPlugins = 'simpleuploads';

You can add multiple plugins using commas. For example:

config.extraPlugins = 'simpleuploads,sharedspace,sourcedialog,syntaxhighlight';

Set the path for the filebrowserUploadUrl setting in theckeditor.config.js file by adding the following line under where you added the plugin:

config.filebrowserUploadUrl = '/simpleupload';

Add the Simpleuploads buttons to CKEditor:

Add the buttons to the toolbar config in ckeditor.config.js. For example, see the last two items in the following config:

Drupal.settings.cke_toolbar_DrupalFull = [
['Source'],
['Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
['Undo','Redo','Find','Replace','-','SelectAll'],
['Image','Table','HorizontalRule','Smiley','SpecialChar','Iframe'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','RemoveFormat'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl','-','Language'],
['Link','Unlink','Anchor','Linkit','LinkToNode', 'LinkToMenu'],
'/',
['Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks'],
['DrupalBreak','DrupalPageBreak','Syntaxhighlight','addfile','addimage']
];

Enable the SimpleUploads plugin:

Edit the profiles you want Simpleuploads available for at: /admin/config/content/ckeditor.

Click the "edit" link on a profile and then expand the "Editor Appearance" section. Drag the Add File and Add Image icons from the "Available buttons" section to the "Current bar" (The last two icons on the bottom of the screenshot).

This will let users click the icon to add images or files. Though they can also just drag and drop images. Then scroll down further to the "Plugins" section and check the "SimpleUploads plugin for CKEditor" checkbox. Scroll down to the bottom and click "Save".

Install the simpleuploads Drupal module:

https://github.com/akempler/simpleuploads

Configure the module at: /admin/config/content/simpleuploads.

Specify a default Image Style to apply when images are inserted inline. For example, I usually create one that scales images to a maximum of 600px wide.

You can also specify the directory within your files directory where the images will be uploaded. By default this is set to "uploads/". Just delete it and leave the field blank if you want to upload to the root files directory.

You'll need to give the "Use Simpleuploads" permission to any roles that you want to be able to upload images.

Responsive Images:

Simpleuploads adds an inline height and width attribute to the img elements. If you want to create responsive images in your theme, on the/admin/config/content/simpleuploads page check the "Use Responsive Images" checkbox. This will remove the height and width attributes and add a "img-responsive" class to the img element.

You can then add class to your css file like this:

.img-responsive { height: auto; max-width: 100%; }

Additional Notes:

Currently the module only works with public files.

I did get errors when testing the plugin on my testing environment without clean urls enabled. So if you get a 404 error when trying to upload using simpleuploads, that could be one cause.

If you run into any errors, check the "Recent Log messages" under "Reports" in Drupal and create an issue on the github repo.

Comments

I followed all of the above steps and i get this error

Error posting the file to upload.php?CKEditor=edit-body-value&CKEditorFuncNum=2&langCode=en

Response status: 404

I've pushed some fixes to github and updated the documentation. If you pull the new code and follow the steps in the updated documentation everything should work.

Add new comment

By submitting this form, you accept the Mollom privacy policy.