Skip to content →

Install a WYSIWIG editor on Drupal in 6 clear steps

Last updated on March 26, 2017

Print Friendly, PDF & Email

I hope these instructions will save other people that many hours I spent.

Situation

I am setting up a blog with Drupal and I want to add a WYSIWYG.  If you blog already, you will recall that WordPress, and very likely other blog progams, allow you to write directly onto the screen.  This is called “Visual”.  Alternatively, you can write in plain text and add HTML (e.g., mark a heading with  <h1>).  This is called HTML.

The core of Drupal comes with HTML only.  I am trying to add a WYSIWYG or Visual option.

Overview

Basically, we have to

  • Download and install the WYSIWYG module.
  • Go to Configuration and look for WYSIWYG profile.  Select it.
  • Look at at the choice of WYSIWYG editors.  I chose CKeditor.
  • Make a new folder in the root directory of your website.  More  just now.
  • Download and unpack the CKeditor following the link provided.
  • And now for the trick.  Rejig the position of the files of CKeditor.

Taking these steps one-by-one.

#1 Download and install the WYSIWYG module

You have two choices.  Install the WYSIWYG module manually (go to Modules in the top tool bar) and then remember to install the module which requires only that you check a check box.

Alternatively, if you have already installed Drush, go to your Windows Command Line (at Start, All Programs, Accessories), check Drush is working by typing “Drush Status”, and then change your directory to your website.  “cd c:wampwwwmywebsitenamesitesallmodulescontrib”.

Use Drush by typing

drush dl wysiwyg

drush en –y wysiwig

Note the module name is typed in lowercase.   The commands just mean “use drush to download wysiwyg” and “use drush to ‘enstall’ wysiwg”.

#2 Find the WYSIWYG Profile

Don’t use the profile on the Modules page.  Select Configuration on the top tool bar and look for the WYSIWYG profile on the left.  It should be immediately under “Text formats”.  If you cannot see it, go to your modules folder, delete WYSIWYG and start again. At least, that was my solution.

#3 Choose a WYSIWYG editor.

If you see the WYSIWYG profile, select it and you should see a long list of WYSIWYG editors all highlighted in blue.

I chose the first one, CKeditor.

Now, don’t rush.  This is not a module.  It is a library.  So, the download instructions are different.

#4 Make a folder to store the library

Using Windows Explorer, make a folder to receive the library.

I am working in WAMP and I will make a library folder at “sites/all.”  So I create C:/wamp/www/sites/all/libraries.

#5 Download the WYSIWYG editor library

Now go back to the screen where you had the choice of editor (highlighted in blue), download the library, and unpack it into your library folder.

#6 Rejig the files in the library

And now the catch which I will try to explain well as it caught me out for a while.

You will know have two folders, both containing files.

C:/wamp/www/sites/all/libraries/ckeditor

AND

C:/wamp/www/sites/all/libraries/ckeditor/ckeditor

Copy all the files from the lower folder (ckeditor/ckeditor) into the upper folder.

Summary

Now when you go back to the top tool bar and select configuration, and go to the WYSWYG profile, you will see a boring white and grey table containing the label “Input Format”.  Congratulations!  You have done what defeats many – activated the CKeditor on Drupal.

Use the drop-down lists to pick the CKeditor and save.  Nothing happens, so go back to the WYSIWYG profile and you will see a new screen where you can “edit” the settings.  This is where you set up your WYSIWYG editor.  Reward yourself. Here comes another learning curve!

Have I written on a similar topic?

Published in Drupal

2 Comments

  1. Shon Shon

    Hello,

    Thank you for writing this article. I can’t figure out for the life of me how to make this “Folder”. I’ve tried using my Google chrome browser, creating a file folder on my c drive, and looking for whatever may resemble this in Drupal all to no avail. Could you please explain how to do this on Windows 7? Also, do you know what this means in the blue box with the installation instructions: Do NOT download the “CKEditor for Drupal” edition.”

    This is the message I keep receiving:
    The CKEditor component is not installed correctly. Please go to the CKEditor homepage in order to download the latest version. After that you must extract the files to the sites/all/modules/ckeditor/ckeditor or sites/all/libraries/ckeditor directory and make sure that the sites/all/modules/ckeditor/ckeditor/ckeditor.js or sites/all/libraries/ckeditor/ckeditor.js file exists. Refer to the README.txt file for more information.

    This also: If you have CKEditor already installed, edit the CKEditor Global Profile and update the CKEditor path.

    I tried changing the “path” to the sites/all description but of course it couldn’t find it because I don’t know how to create it.

    Well, thank you in advance for your assistance.

  2. Shon Shon

    Er Muh Gosh, I figured it OUT! eek! I can’t believe I spent four hours on one c + p function. Turns out I didn’t realize where the original durpal file was saved and stumbled across the location looking at acquia desktop control panel. I followed my hunch and last desperate attempt and waahh-la. After fighting off fatigue enough to copy and paste the folder in the right spot, I finally got it to function properly! Once I discovered the software file location, I was able to follow your directions step by step until success! I def deserve that reward: a drink! Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: