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.
- 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.
- 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. - 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.
- Set up your text filters and prepare for the addition of WYSIWYG and Media as I described in the first section above.
- Install WYSIWYG and go to the configuration page where you are prompted to get an editor.
- Get an old version of CKEditor and set up the buttons for your tool bar with the configure button.
One Comment