Skip to main content

Building a better node edit form, using WYSIWYG JavaScript editors

Anyone, who has used Drupal for more than five minutes, will likely have noticed, that actually writing something, using the standard node edit form, lacks a certain amount of comfort.
The input format is set by default to a save, but very limited subset of HTML and changing the default to "Full HTML" is most certainly not, what should be done, when anonymous users are allowed to post comments. Besides, who wants to write in HTML these days any longer?

The problem is not, that Drupal does not support WYSIWYG editing, but that there are in fact many different options available, each having their own quirks and level of sophistication, so that none has made it to be the default choice, yet (and as matters are, it is not likely, that one will emerge any time soon).

As far as blogging is concerned, three methods of data entry would be desired:

  • A comfortable WYSIWYG JavaScript editor for the blogger, that completely removes to need for writing any HTML markup at all. The editor should especially be able to handle image uploads.
  • A way to bypass the WYSIWYG editor and write HTML code directly, just in case, either full control is needed, or using an editor is otherwise not desired.
  • A plain text box for submitting comments, that only allows a save subset of HTML to be used and does not waste bandwidth by downloading the WYSIWYG JavaScript library.

Implementing this setup starts with setting up the input formats properly (admin/settings/filters). Make sure to resist the urge to modify the input formats, Drupal comes with by default. Instead, just add three new formats, called "Save HTML", "Markup HTML" and "WYSIWYG HTML". The first, "Save HTML" should simply be a clone of "Filtered HTML" and replace it as the default input format. For the "Markup Filter", optionally download and install the markdown module. Otherwise make it just a clone of the "Full HTML" format. Finally, "WYSIWYG HTMTL" should be a clone of "Full HTML" as well. Naturally, the markup and wysiwyg variants should only be accessible to the blogging user.

Next thing to do is to install the actual editor, plus helper modules. For this download and enable the WYSIWYG API, the IMCE module and the IMCE WYSIWYG bridge. The actual editor must be downloaded separately. Instructions for doing so are given in the WYSIWYG Api setup ( admin/settings/wysiwyg). Choose the tinyMCE editor and bind it to "WYSIWYG HTML" format. Configure settings for editor and imce as needed.

At this point, switching to a comfortable editor is simply a matter of switching the input format on the node edit form. The only problem remaining is, that the editor is not enabled by default, since the "WYSIWYG HTML" input format cannot be made the default input format without granting anonymous users too much power. To remedy that situation, add the better formats module, which allows for automatically selecting an input format, based on the type of the node, being created.