Smart(er) TinyMCE Configuration for Drupal

A WYSIWYG editor can be a blessing and a curse on a Drupal site. Give your users too much control and they'll make right-aligned, purple h1 tags inside of three levels of tables they made.

Still, users expect to be able to control basic formatting, link to nodes within their own site easily, and easily link images and documents.

With the help of four modules, you can craft a great experience for your users. I'll show you how to build this using TinyMCE, which I use on all my Drupal implementations.

I was very pleased to find a module that automatically creates three intelligent profiles for TinyMCE. I now use this module on every site I start with Drupal. It will create three profiles: Comments, Basic and Advanced. It is usually best to assign the Comments profile to anonymous users, Basic to authenticated users, and Advanced to your main content creators and editors.

With those profiles set up and assigned to the given roles, your visitors will get basic formatting control, but not enough that they can really hang themselves with the markup they create. The Advanced profile is still missing a few features like image and file upload, easily linking to nodes on the site, and the ability to easily specify the teaser break without disabling TinyMCE to type in the <!--break--> yourself. In addition, TinyMCE doesn't show up when creating new HTML blocks, only in the comment and node forms. No big deal - here's how you can solve all of these issues.

First off, to get the Advanced profile to show up when creating or editing HTML blocks, edit the Advanced profile. The settings under Visibility will look like this:

node/*
comment/*

Add the following two lines:

admin/build/block/add
admin/build/block/configure/block/*

Voilà! Your Advanced profile will now show up when editing HTML blocks.

As for solving the other issues, here are the modules or TinyMCE plugins that can solve them (which I may expand upon in a future post.)

• Easily upload files and images - Use the IMCE module to extend the image and link dialogs with a file browser. Make sure that you select the JavaScript "extras" package in the IMCE configuration to get nice sorting and filtering of your files, and ability to work in sub-folders.
• Easily link to nodes on your site - Use the linktocontent module to get a (sadly non-sortable) list of nodes, filterable by taxonomy.
• Put Drupal breaks into nodes in TinyMCE - Install the drupalbreak plugin that's included with the TinyMCE module.

As a bonus tip, I find that using the Default Filter module can be useful. I tend to make Filtered HTML the default input format, and then use Default Filter to make it so that the administrative role(s) default to Full HTML for all node types. (Of course, this might also result in your administrative users being denied access to certain nodes for no easily-apparent reason, so make sure you give the administrative role(s) access to the Full HTML format before you set up Default Filter.)

I hope this helps you create better experiences for your content creators. Are there other useful TinyMCE plugins or Drupal modules that you use on your sites? Leave a comment and let us know!