Now that IMCE is installed and configured, we’ll head back to the CKEditor settings to configure it to utilize IMCE.

Now, we’re ready to configure CKEditor to use the IMCE file browser.

• Go to “Configuration => Content authoring => CKEditor”
• Click “edit” next to the “Advanced” profile
• Expand the “File Browser Settings” section

File browser type (Link dialog window)

• Select “IMCE”

File browser type (Image dialog window)

• Select “Same as in the Link dialog window

File browser type (Flash dialog window)

• Select “Same as in the Link dialog window

CKFinder settings

We’re not using CKFinder, so we can ignore this section entirely.

Required Advanced Option

Finally, I’m using CKEditor 4.1+ and on the CKEditor project page, it says:

Note for CKEditor 4.1+ users

If you are using CKEditor 4.1+, you should adjust Advanced Content Filter settings. If you have any trouble implementing this feature, you can turn it off by setting:

config.allowedContent = true;

in the Custom JavaScript configuration field of the Advanced Options setion for your CKEditor profiles.

I found that in order to use the IMCE button (and later, the Linkit button) I had to do this, so I’ll add it now

• Add “config.allowedContent = true;” to the “Custom JavaScript configuration” field

Now, let’s add the IMCE button to the toolbar.

• Expand the “Editor Appearance” section
• Drag the default “Image” button off of the “Used buttons” toolbar
• Drag the “IMCE” button on to the “Used buttons” toolbar

• Enable the “Plugin for inserting files from imce without image dialog” plugin

• (Save)