WYSIWYG Needs Help

WYSIWYG editors (what you see is what you get) have always bothered me a little bit because what you see isn’t always what you get. Because you’re not seeing the content within the context of you entire page theme (in most cases), you could see differences in line wrapping due to page width, styling, and other minor issues. The biggest issue though is that you simply don’t see how your content looks with the rest of the page content.

I have found a pattern to fit this though! I’ll call it the “active preview” pattern in honor of the WordPress plugin I just created with this pattern. Basically you enable a preview window to be opened up and hook it up to receive updates from the WYSIWYG editor (or just text area). That way you can view your changes as you make them without having to hit the preview button each time you make a change and want to see if it fits. In its simplest form it would just be pure javascript (which I’ll show below). But if you needed to pass the text through some back-end processing first to do something like render some business specific tagging or something else you could expand this to some Comet work (maybe you could pull it off with just plain old AJAX though).

Here is how it would look roughly in javascript using jQuery and a tinyMCE WYSIWYG editor

//Hook into your preview button or link's onclick.
var activelink = jQuery('#yourpreivewbuttonorlinkselector');
activelink.click(function (e) {
//Open up the window but keep a reference in the windows DOM.
window.communicator = window.open(this.href,'activepreview','menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
//We need to hook into onKeyUp to catch key strokes.
//If your not using tinyMCE change this to hook into the input in question.
tinyMCE.activeEditor.onKeyUp.add(function (ed, l) {
var jcommunicator = jQuery(window.communicator.document);
var post = jcommunicator.find('selector to get the content area changing');
//Update the content area on the preview page with the data entered into the editor.
return false;

This pattern works pretty well hopefully you can see how this would change if you weren’t using tinyMCE.

There are two scenarios where this isn’t going to work (at least without some more work)…

  • When content has to be sent through some processing before being displayed on the page.  With some more work on the server side you could work through this issue though.
  • When you cannot reliably identify the area on the rendered page that is being changed.

In the right situation this solution provides a true WYSIWYG experience for users.


Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: