Following are the steps for IMCE Integration with CK Editor in Drupal 6
1. Download the CKeditor module from http://drupal.org/project/ckeditor and imce module from http://drupal.org/project/imce .
2. Unzip the files in the sites/all/modules directory .
3. Download CKEditor from http://ckeditor.com/download. Unzip the contents of the ckeditor directory in the sites/all/modules/ckeditor/ckeditor directory.
4. Enable the modules as usual from Drupal's admin pages.
5. Grant permissions for use of CKEditor in "Administer > User Management > Permissions"
6. Under "Administer > Site configuration > CKEditor", adjust the ckeditor profiles. In each profile you can choose which textareas will be replaced by CKEditor, select default toolbar and configure some more advanced settings.
7. Go to http://ckfinder.com/download and download CKfinder.
8. Extract the downloaded file ckfinder and put it in Ckeditor folder (sites/all/modules/ckeditor/ckfinder) .
9. Open config.php in the ckfinder folder and comment out the CheckAuthentication() function.
/*function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system.
// To be able to use session variables don't forget to add session_start().
return false;
}*/
10. Add this code :
require_once '../../../../includes/filemanager.config.php';
straight below the following line:
$baseUrl = '/ckfinder/userfiles/';
11. Locate file named settings.php inside your drupal directory (usually sites/default/settings.php) and set $cookie_domain variable to your domain name.
$cookie_domain = $_SERVER['HTTP_HOST'];
12. In the administer->site configuration ->ckeditor, edit the profile you are using.
In the file browser setting,
Select CKFinder from the dropdown in File browser type (Link dialog).
Select IMCE from the dropdown in File browser type (Image dialog).
Select IMCE from the dropdown in File browser type (Flash dialog).
Save the configuration.
13. Go to create content ->page, try to upload a image using the ckeditor, it should work.
Hope this helps,
Thanks
Ashraf
Comments
Why both CkFinder and IMCE ??
I'm trying to understand why in this example you are using both CKFinder and IMCE.
I see that you are using CKFinder for files and IMCE for images and Flash.
I just don't understand why you would introduce a 2nd interface when IMCE has so many more capabilities and works so nicely for all.
Without CKFinder, IMCE does not work
If you select IMCE for files, upload button does not come. For upload button to be working, you have to select CKFinder for files.
Hope this helps.
Something is wrong with your setup. CKFinder is not required
Please check you setup.
Something is wrong if the upload button won't come on with IMCE and CKEditor.
CKFinder is a very simple and bare bones upload solution, is optional, and is never required.
Nothing is wrong with the setup
Nothing is wrong with the setup. Upload button does not come with IMCE. You have to use CkFinder.
Using IMCE to do file uploads from CKEditor
I have numerous sites using the combination of CKEditor with the preferred file browser IMCE for file uploads.
I do not use CKFinder at all with my CKEditor installations.
The following is from the CKEditor readme.txt
Uploading images and files
--------------------------
There are three ways of uploading files: By using commercial file browser like CKFinder (http://ckfinder.com),
by using modules like IMCE, WebFM, Image Browser or by using the core upload module.
To select preferred file browser, under "Administer > Site configuration > CKEditor", adjust
CKEditor profiles. In each profile you can choose which file browser will be used (in "File browser settings" section).
Note: to choose IMCE, WebFM or Image Browser you should install an appropriate Drupal module first.
Clarification
Just to clarify --
you *don't* need CKFinder to be able to upload files,images, flash, or whatever else you might need, IMCE can do that with no prob.
However, with IMCE you only get the "Browse Server" button by default, which is confusing for most users who just want to upload a file from their computers. CKFinder adds a new tab named "Upload".
What the above does essentially, is to create the "Upload" tab with CKFinder, and use IMCE to do the actual file handling.
Hope this clears things up a bit.
It's nice to be important,
but it's more important to be nice.
Further clarification
Note that without CKFinder users can still upload their files from IMCE - the 'Upload' button is found inside the IMCE window which is launched by hitting the 'Browse Server' button. So IMCE without CKFinder works, it just requires the user to hit 'Browse Server' before they can hit 'Upload'.
HTH
Lee Rowlands
Yes larowlan you are correct.
Yes larowlan you are correct. Though i can understand the confusion. As it has taken me hours to understand why i dont have the 'Browse Server' button.
Can the wording 'Browse Server' be changed to 'Browse'?????
In the Wysiwyg profile, Input Format (both of them at a time of course), Buttons and plugins. Tick the IMCE option.
Though i have had to install ckeditor into sites/all/libraries folder not the module folder for the wysiwyg to acknowledge ckeditor!!!!
I think i will re-try tinymce again now i have understood this far.
Still very lost in how to get the image and text layed out in ckeditor to be shown in the story content???
Can you post similar instructions without CKFinder
Hey John54,
I have tried many times to get this working with just IMCE and CKEditor but failed everytime. Can you post a quick step by step? I don't think it should be required either but I can make these steps work where setting up CKEDitor and IMCE doesn't seem to.
There is an instruction on README.txt inside installation dir
Mention the howtos.
brief with this:
1. edit ckeditor.config.js inside /modules/ckeditor
#nano /var/www/modules/ckeditor/ckeditor.config.js
uncomment the following lines (remove "//") in ckeditor.config.js:
//config.extraPlugins += (config.extraPlugins ? ',imce' : 'imce' );
//CKEDITOR.plugins.addExternal('imce', Drupal.settings.ckeditor.module_path + '/plugins/imce/');
2. Set up toobar.
There is toobar config section in this "ckeditor.config.js" file
Look for section "// This toolbar should work fine with "Filtered HTML" filter config.toolbar_DrupalFiltered"
there are several toolbar definitions, add 'IMCE' toolbar format:
['Image','IMCE','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
3. Then go back to CKeditor, you will get a IMCE button beside Image button with Drupalfiltered or other toolbar style respectively.
IMCE only
I just downloaded, installed and enabled IMCE and the browser button displayed without the need to install CKfinder. But I'm using Drupal 7.
imce_wysiwyg
If you installed IMCE and WYSIWYG you probably need the imce_wysiwyg bridge module. Otherwise the browse server button is absent. This also puts the IMCE button in as an option.
That was my problem anyway.
My experience using Drupal 7.15
I am running Drupal core 7.15.
I installed:
Note: Do NOT try and use the module called WYSIWYG at the same time as the CKEditor module. The CKEditor module and the WYSIWYG modules fight with each other!
To get CKEditor to use IMCE as the file manager, I did the following:
Select the IMCE value
This took me absolutely hours to figure out, but is only about 5 mins work.
drupalshrek
Thanks for your work!
save me a lot of time and works for me.Thanks.
Potential problem: advanced content filter
Lest anyone be tearing their hair out like me when trying to integrate IMCE and CKEditor (in Drupal 7): when editing your CKEditor profile, in the Advanced content filter tab, you have to select "Disabled" for the advanced content filter. Otherwise, like me, you will be trying to insert images with IMCE only for nothing to happen. Once I disabled this it worked like a charm.
Everyone
Everyone has to tear their hair out when trying to get the whole WYSIWYG editor suite working on Drupal 7. In theory everything should work out of the box with Drupal 8...
drupalshrek
"advanced content filter" ?
I'm sorry, but I don't see which "advanced content filter" you're speaking about in admin/config/content/ckeditor/edit/Advanced;
security filters, security settings, ... ?
my problem is the file seems to be uploaded
"myfile.jpg is uploaded" or something like that)
and then
"myfile.jpg is not an image"
auto-edit : I think I found it:
"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."
but whatever I write "config.allowedContent = true;" or "config.allowedContent = false;", it doesn't work
(but something "happens" because I get myfile-1.jpg, and then myfile-2.jpg, but finally no image on the server)
CC