Installing CKEditor in Drupal 7

tutuploads1._Download_the_CKEditor_Wrapper.png

By default, Drupal does not install any type of editor for adding styling to content. The good thing about that is you get to choose which one you want to use.

The CKEditor is one of the most popular WYSIWYG editors and with version 3.6.1 the installation is a little simpler than previous versions. Here’s how to do it.

1. Download the CKEditor Wrapper

tutuploads1._Download_the_CKEditor_Wrapper.png

Download the wrapper from http://drupal.org/project/ckeditor

On drupal.org, when you download 7.x.1.2 (or the the most current version) you are only downloading a module that creates the directory structure and prepares Drupal for the installation of the CKEditor.

2. Download CKEditor

tutuploads2._Download_the_CKEditor.png

Go to http://ckeditor.com/download and download either the .tar or .zip version of the CKEditor. Save it to your hard drive.

3. Install the Module

tutuploads3._Go_to_the_Modules_page_to_begin_the_installation..png

Click Modules >>Install new module on and upload and install the module.

4. Upload and install CKEditor 7.x

tutuploads4._Upload_and_install_the_CKEditor_7.x.png

Click the browse button, find the file you want to upload, then click Install.

When you get the completion message, you can click “Enable the module”, but don’t enable yet. You can’t enable the module until you’ve uploaded the CKEditor itself.

5. Use FTP or a file manger to access your sites/all/modules directory

tutuploads5._Use_FTP_or_a_file_manger_to_access_your_sitesallmodule.png

When the CKEditor wrapper is installed you will see an additional folder called ckeditor in your sites/all/modules directory. Note that there are two ckeditor folders. There will be one at sites/all/modules/ckeditor and another at sites/all//modules/ckeditor/ckeditor. The second one will be empty except for a text file named COPY_HERE.txt.

6. Uncompress the CKEditor you downloaded, and upload it to the empty folder sites/all/modules/ckeditor/ckeditor

tutuploads6.png

7. Enable the Module

tutuploads7._Enable_the_Module.png

Return to the Module list page on your site, and there will be a new section called User Interface. Expand it, if it’s not already, and check the enabled check box. Be sure to go to the bottom of the page and Save configuration.

8. Configure the Module

tutuploads8_868daa133ead471edda17fd1f72845b9.png

After you have enabled the module you will see some additional links on the module list page.

  • Permissions: this is where you well set user permissions and grant access to different user levels.
  • Configure: This is where you will activate the modules features.

9. Set Permissions For Users

tutuploads9._Set_Permissions_For_Users..png

When you click Permissions there will be an additional section added to the list for the CKEditor. There will be a column for each user level, and putting a check in the box activates the editor for that user level. Defaults are Anonymous User – OFF, Authenticated User -OFF, Administrator-ON. Administrator will already be checked by default. You assign permissions to other users.

10. Configure the Editor

tutuploads10.png

On the module list page, choose configure and you will see the Profiles and Global settings. Click edit on each of these and adjust your settings for each option.

At this point you will be done with the basic installation, but you may want to add an image finder for inserting images and links to content. That functionality is available in CKFinder, which you can add to CKEditor. Click here to read our tutorial on installing CKFinder.

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Anand kumar
Anand kumar
11 years ago

Its realy great!

Nurcan
Nurcan
11 years ago

I want to organize my content the way that ı but because of the ckeditor property ı could not:((

for example ı want to add picture near of texts and shape it but it could not.

Can you suggest any ckeditor for me?

SSBUSINESS
SSBUSINESS
11 years ago

Thank you for your help, this is so precise and complete, you have made my day, thank you again

stive
stive
10 years ago

Instead of CKFinder I recommend you Quick Image Uploader: [url=http://doksoft.com/soft/ckutils/index.html]http://doksoft.com/soft/cku…[/url]

Lillyfoot Rosewater
Lillyfoot Rosewater
8 years ago

Thank you, this was awesome! I had to keep looking for help theming CKEditor and found this: [url=http://bitcookie.com/blog/drupal-ckeditor-setup-development-tutorial]http://bitcookie.com/blog/d…[/url]

Stephanie Lording
Stephanie Lording
8 years ago

I want to arrange my material the way that ı but because of the ckeditor residence ı could not:((

for example ı want to add image near of text messages and form it but it could not.
Can you recommend any ckeditor for me?
[url=http://iphonespywithoutjailbreak.com/]iPhone spy without jailbreak[/url]

hoang phan
hoang phan
7 years ago

it’s really great! Many thanks

ren
ren
7 years ago

why nothing happen when I following that step?

my text editor not change and still default.

ren
ren
7 years ago
Reply to  ren

I’m in localhost

9
0
Would love your thoughts, please comment.x
()
x