WYSIWYG editor usability tip
Written at 14:29, on Wednesday 19 September 2007. Tags: drupal usability webdesign .
Open Source WYSIWYG editing in CMS still sucks, but with developments like the WYMeditor (“What You Mean” editor, built on jQuery) the situations is improving steadily. This editor lets content writers focus on the structure of their document instead of visual layout. As you can see, this editor provides subtle clues about the type of content you’re currently editing with a clever stylesheet. Unfortunately, the WYMeditor is still in early beta, and Drupal’s module lags a couple of versions behind.
Until it’s finished though, it’s very use to use the WYMEditor stylesheet in your current editor (I mostly recommend FCKEditor in a stripped configuration, but TinyMCE works just as well). The stylesheet used by WYMEditor makes it very clear wether you’re editing a block level element or an inline element. It adds little icons to signify the semantics of the elements. This makes it very easy to determine if there are any stray headers or paragraphs in your content, a problem that often occurs after copious editing but that is nearly impossible to fix without editing the source code.
Using this stylesheet in your own editor is very easy. Just download a copy of WYMeditor, extract it and copy the entire contents of the iframe/default/ directory to a speficic location on your webserver. In FCKEditor, you can edit the file fckeditor/fckconfig.js and edit line 32, which states:
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
The last part (css/fck_editorarea.css) points to the location of the CSS used by FCKEditor’s textarea. Adjust it to reflect the location of WYMeditor’s CSS file, which is called wymiframe.css.
Note that it’s not necessary to manually adjust this file if you use the Drupal module for FCKEditor. Just go to admin/settings/fckeditor and put the location of wymiframe.css in the Custom stylesheet field, like this:
That’s it! Happy editing!
Add comment. (2 total) | Permalink
This is a such a huge issue in training users of CMS systems whether it’s Joomla, Drupal or anything else. I would like to see a system that works as close to Microsoft Word as possible. When I talk with end users they all want the ease of use associated with MS word in their CMS editor.
Thank you for good script.
Post new comment