Using the WYSIWYG API with TinyMCE

[level: Beginning, Intermediate]

So what's the Wysiwyg scene in Drupal 6.x, now that most serious developers agree the foundation of choice at this point is to move on to the current Drupal release?

I headed over to good old tinymce project page ( http://drupal.org/project/tinymce ) where I was told immediately in no uncertain terms (in factory-occupied-by-the-workers-to-defend-their-jobs red, no less) to forget that and go with the new rich text editor agnostic Wysiwyg API.

[level: Beginning, Intermediate]

So what’s the Wysiwyg scene in Drupal 6.x, now that most serious developers agree the foundation of choice at this point is to move on to the current Drupal release?

I headed over to good old tinymce project page ( http://drupal.org/project/tinymce ) where I was told immediately in no uncertain terms (in factory-occupied-by-the-workers-to-defend-their-jobs red, no less) to forget that and go with the new rich text editor agnostic Wysiwyg API.

So I’m just a working stiff and no individualist, and enjoy standing on the shoulders of giants, so I headed over to http://drupal.org/project/wysiwyg and got a pleasant surprise (not really, I had already boned up on Kathleen Murtagh’s thorough as usual Review of the current state of TinyMCE, FCKeditor and WYSIWYG API at http://ceardach.com/blog/2009/01/review-current-state-tinymce-fckeditor-and-wysiwyg-api)! I could install the WYSIWYG API aaannnddd then get to choose which embedded rich text editor I wanted, as long as it was supported (or write a plugin to support as yet unsupported favorite).

So, I downloaded and installed the current stable recommended version (6.x-0.5 as of this writing), conservative as I am.

Then I compared the README file to the instructions written on the project page. The difference was that on the project page there is a cool and enjoyably time-consuming “Choose which module to use” link which took me to http://drupal.org/node/358296. After being warned that the handbook was a “work in progress” I was forced to choose between Active and Passive user orientation… hey, I’m not ashamed… the answer is both! I’ll swing both ways, I will test the latest and greatest version and report bugs and troubleshoot stuff and answer support requests from other users… but you know, I need a stable version for my blog blog today, so … I guess I’ll go passive for the present, and pursue active pleasures for after seeing how the recommended version pans out…

So I retreated to the README recommendations for release 6.x-0.5, let’s try that first.

I downloaded and installed the module and headed to Administer > Site building > Modules, and enabled the Wysiwyg module in the User interface section. I clicked on the Save configuration button, and was informed:

  • TinyMCE module can be safely uninstalled now.
  • The configuration options have been saved.

Cool. I padded over  to Administer > Site configuration > Wysiwyg, and was dazzled immediately by the choice of no less than 6 rich text editors I could download and install.

I’ve been using for quite some time and like the TinyMCE rich text editor, which, in its later versions formats and indents HTML splendidly by the way, so I decided to go with that.

I really enjoyed the explicit instructions as to where to place the contents, plus the handy download links, for all of the options. That’s soooo Drupal 6.

So on my Linux based hosting I went into ./sites/all/modules/wysiwyg/ on the command line and did a “wget http://prdownloads.sourceforge.net/tinymce/tinymce_3_2_1_1.zip?download” (got that by right-clicking the download link on the download page and selecting Copy link location) then, still in the wysiwyg directory, did unzip tinymce_3_2_1_1.zip which coolly placed the editor library exactly where it was supposed to go. Sometimes I think the command line right on the host beats GUI interfaces by a kilometer.

I then refreshed the Administer > Site configuration > Wysiwyg page, which immediately whisked me over to https://awebfactory.com.ar/admin/settings/wysiwyg/profile (Being in passive user mode, I didn’t mind at all). There I learned that this incredibly cool module can associate a Wysiwyg profile (defining wich client-side editor is loaded, buttons, themes, display options and the like, just as I was used to with the old TinyMCE modules) with an input format. So I opted for “No editor” for Filtered HTML, and the automagically created “TinyMCE 3.2.1.1 option for Full HTML (hey, it’s a blog site, only trusted blog bloggers get to use it) and hit the Save button (just before I did I realized that I hadn’t been whisked anywhere, simply the Installation instructions had been collapsed and the new options inserted upon detecting the presence of the downloaded editor library).

You mean???? I can download different editor libraries and assign them to different Input formats!!! Cool!

OK, like I said, I hit the Save button.

I then went to create this very blog post and since the filtered input format is set for blogs (cunning, don’t you think?) in my convoluted case I had to select the Full HTML format and then refresh the page… and there it was, just beneath the Body field: an “Enable rich-text” link. I clicked on it, and there was a default TinyMCE content editor more than sufficient for this post!

Cool!!!