Last updated on March 26, 2017
I hope these instructions will save other people that many hours I spent.
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.
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.
Copy all the files from the lower folder (ckeditor/ckeditor) into the upper folder.
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!