Skip to content →

Tag: WYSIWYG

How to install WYSIWYG and CKEditor on Drupal 7

To install WYSIWYG successfully, it is helpful to understand that works at three levels: text filters, WYSIWYG and Editor.

Text filters

Drupal 7 arrives with pre-installed text filters.  If you have a fresh install (and even if you don’t), got to the admin bar at the top of screen and select Configuration.  On the left hand side, close to the top, you will see Text Filters.  Have a look at these.  You will see Filtered HTML, Full HTML and Plain Text.

The filters give you control over three things:

1.  Who can use Full HTML, or Filtered HTML and who must use plain text.

When you are new to Drupal, leave everything on default.  You can see that with the default settings only administrators can use Full HTML.  Later on, you might want to limit anonymous users to plain text as Drupal attracts spam.

2. Which Filter is used by default

Also, note that Filtered HTML is at the top. That means that is acts as the default, even for administrators. If changing the filter manually becomes annoying when you need Full HTML, change the order.  You can change the order back again later, if you wish.

3.  The exact functions of the filter and the order in which they work

As a general rule, do not play with the settings. There are several of them and when you fiddle, you are fiddling with relationships to the underlying code and to the effect of combinations of settings.  When in doubt, don’t touch!

There are three settings that you will probably want to change though.

  1. When you add the Media module, you must check the box for “Convert Media tags to markup” (and Save).  The Media module will remind you if you forget. You must check this box in both Filtered and Full HTML.
  2. When you add the WYWIWYG module, you are recommended to uncheck “Convert line breaks into HTML (i.e. <br> and <p>)”.  Uncheck this box in both Filtered and Full HTML.
  3. Additionally, when you add the WYSIWYG module, go to “Limit allowed HTML tags” under Filter Settings near the bottom of the page, and add <p> and <br>.  You only need to add these tags in Filtered HTML.

Text Filters is the first level of setting up WYSIWYG.

WYSIWYG module

You can install and enable the WYSIWYG module in the usual ways.

  • Either, use drush (drush dl wysiwyg) and (drush en –y wysiwyg)
  • Or, go to the admin bar/modules and insert the url that you retrieved from the WYSIWYG page. When prompted, enable the module.

WSYIWYG should now show up on the Configuration page under Text Filters. If it does not, then clear your caches.

  • Either, use drush (drush cc, followed by 1 when prompted)
  • Or, go to the admin bar/configuration and performance where you can clear all caches.

Go to WYSIWYG at the Configuration page and you will see the three Text Filters you saw in the first stage above, with a drop-down box that says “No Editor”.

Your next task, is to go to the “third level” and install an editor. Then we will configure a combination of WYSYWYG and the editor you have installed.

CKEditor

Drupal will prompt you with a list of editors and highlight one in particular, CKEditor, in pink.  CKEditor is very well established but I must begin with two warnings.

  • Do not install the CKEditor for Drupal.  Install the normal CKEditor.
  • Do not install the most recent CK Editor, because Drupal/WYSIWYG will insist that it cannot see it.   You can install the latest development version of WYSIWYG (by downloading it manually into the WYSIWYG folder), but it does not play nicely with DRUPAL and destroys the Edit layout and does not render a tool bar.  Install an older version, say 3.5.
  • Do not fuss about all the instructions about where to put the CKEditor. Download the zip file and unzip it into /www/yourwesbite/sites/all/libraries. If this is the first library that you are installing, then you must create the library folder.  CKEditor will unpack itself neatly.

Once you have an (old) version of CKEditor, when you go to WYSIWYG on the configuration page, you should now see CKEditor in the drop-down box where you once saw No Editor. If it doesn’t show up, try cleaning your caches before you panic.

Now you can configure your WYSIWYG/CKEditor.  You only have one task to do but you must do it for Filtered HTML and Full HTML. And remember to save each time.

Click on Configure and go to Buttons and Plugins. Check all the buttons that you want on your tool bar. Be mean, rather than extravagant but remember to check “HTML Block Format” which give you a drop down list for headers and “Media Browser” if you are going to add the Media Module (near the bottom).  This may feel like a tedious chore, but enjoy – when you are done with this you will have working WYSIWYG.

Summary

WYSIWYG requires you to think at three levels.

  1. Set up your text filters and prepare for the addition of WYSIWYG and Media as I described in the first section above.
  2. Install WYSIWYG and go to the configuration page where you are prompted to get an editor.
  3. Get an old version of CKEditor and set up the buttons for your tool bar with the configure button.

 

 

 

One Comment

Install a WYSIWIG editor on Drupal in 6 clear steps

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?

2 Comments