Ckeditor Drupal 7

  1. Ckeditor Drupal 7 Update
  2. Ckeditor Drupal 7
  3. Ckeditor_link Drupal 7

In Drupal 7 CKEditor was either installed as standalone module or as a plug in for the WYSIWYG module. In either case you would also have to separately install and configure the actual CKEditor library itself. There is more thorough documentation found here - along with zip files for this to work. If you want a way to m. CKEditor in Drupal 7 has a variety of options available. It is best to only use the ones described below: Adding a Link. Highlight the text that you want to turn into a link. Select the Link control button on the toolbar: Select the type of link you want to add in the Link Type drop-down.

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:

The developer provides a sample php script showing how to utilize the plugin: 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:
I've tested this with version 7.x-1.17

The CKEditor library should be installed to the/sites/all/libraries directory:
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:
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):

Ckeditor Drupal 7 Update

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


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:

You can add multiple plugins using commas. For example:

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

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:

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).

Ckeditor Drupal 7

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:

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.

Ckeditor Drupal 7

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

Additional Notes:

Currently the module only works with public files.

Ckeditor Drupal 7

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.