Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal WYSIWYG editor configuration tricks

Parent Feed: 

Most of the clients I set up Drupal web sites for are not experts at hand-editing HTML, and prefer to use a WYSIWYG (What You See Is What You Get) or Rich Text editor to create their content. I generally set them up with the WYSIWYG API module, and use the FCK Editor or CK Editor plugin. Over the couple of years I have been using this module, I've learned a few configuration tricks, so I thought I'd share them here.

Why choose the WYSIWYG API module?
The main reason for choosing to use the WYSIWYG API module rather than other editor modules available to Drupal is that it's smart about where to display the rich text editor: It only displays on a text area if that text area can contain formatted text (which it can detect automatically by whether the text area has an associated Input Format field). With other editor modules, you have to go through a lengthy process of defining which text area fields on which pages should have the rich text editor enabled, but WYSIWYG takes away this headache.
A secondary reason for choosing this module is that it allows you to use different editors and different editor profiles for different input formats, which is quite convenient.
Installation
This is fairly straightforward: install the WYSIWYG API module in the normal Drupal way, and follow the on-screen instructions on the WYSIWYG configuration page to download the desired editor plugin to the correct directory on your web server.
Basic Configuration
After installing the editor plugins you want to use, you have to define WYSIWYG editor profiles for each of the input formats on your system that need to have rich text editors. To do this:
  • Visit the Input Formats configuration page, and set up your input formats (choose which HTML tags should be usable in which input formats, and who should be able to use which input formats).
  • Visit the WYSIWYG configuration page.
  • Choose the FCK editor as the editor of choice for each input format that needs rich text editing, and save the configuration.
  • Click "Edit" next to each input format that is using an editor, to configure the edtior profile.
  • On the configuration screen, choose the buttons you want to use and set up other desired parameters. For instance, you might consider just enabling the "Paste Text" button rather than the other paste buttons, because people often end up with garbage in their HTML if they paste in rich text. Also, you should probably just turn on the buttons that correspond to allowed HTML tags for each input format.
  • Save the configuration.
Skins
The CK Editor plugin has a concept of editor "skins", which add styling to the editor. If you have a client that cares about such things, you can force the CK Editor within the WYSIWYG module to use the skin you want by deleting the other skin directories within the sites/all/libraries/ckeditor/skins directory. Otherwise, you're likely to get a somewhat random skin chosen.
Random-placement images
Sometimes clients want to be able to insert images directly into the body of their content (like the way WordPress lets you insert images), rather than having a structured page template (where you would define ahead of time where images should appear and have separate fields for uploading them). This can be accomplished by using the IMCE module, along with the IMCE WYSIWYG Bridge module. To set it up:
  • Install and enable both additional modules in the normal Drupal way.
  • Visit the IMCE configuration page. Set up at least one IMCE profile, and assign your profile(s) to the user roles that you want to be able to use IMCE.
  • Visit the WYSIWYG configuration page. For each input format that allows image tags, click the "edit" link to configure the editor profile.
  • Enable the IMCE plugin and the Image button, in the Buttons and Plugins section.
  • Save your configuration.

Now, when you are editing, you can click the Image button, which pops up an image dialog box. From there you can click the "Browse server" button to find an uploaded image, and then click "Upload" to upload new images to the server directory you configured in your IMCE profile. After selecting the image you want, click "Send to FCK Editor" to return to the image dialog box. You can then align the image, define the size, etc. The process is a bit counter-intuitive, but you (and your clients or other users you train) will get used to it fairly quickly.

Flash
The IMCE module also allows you to embed Flash files directly in the editor. To configure this, you need to follow the steps above to configure IMCE for images, with these additional steps:
  • When you are on the IMCE profile configuration page, add "swf" as an allowed file extension.
  • When you are on the WYSIWYG profile configuration page, enable the "Flash" button.

Inserting Flash files then works the same way as inserting images, except you start by clicking the Flash button.

That's all I can think of at the moment -- hope you find this helpful!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web