Today, HEATWAVE 2008 brings you a host of improvements to the built-in WYSIWYG editor on Water, Sky and LightCMS. This editor is used whenever you manage content on a text element, a blog post, or the detail page of a calendar event. The upgrades are now live across the system so you are free to explore. NOTE: if you see some messiness the first time you load the editor, you may need to refresh your browser to force a CSS reload.
Here's a quick look at what is new.
New image manager offers built-in crop, resize and more
The completely reworked, built-in image manager now offers a host of functionality that saves you from having to use external image editing software for most of your image editing needs. Simply open up the image manager, upload or select the image you want, and click the new "image editor" button and you'll see the screen below:

Your image is loaded to the left with controls on the right allowing you to change opacity, resize (with or without constraining proportions), flip or rotate, and crop your image. The editor then allows you to save the edited image back to the server as a new file which you can then quickly add to your page.
Other significant improvements to the image manager include:
- Use of internal dialog windows rather than browser-dependent windows. This offers more consistency of experience across browsers and avoids the "pop-up" blocker issues with previous controls. In fact, all dialog windows in the editor now use internal controls.
- The image manager now defaults to your previous location in the directory tree whenever you load it up so you don't have to continually drill down to a subfolder each time -- a nice time-saver.
- The "image map editor" icon has been removed from the toolbar to simplify and reduce clutter. Image map functionality is still available by right-clicking on any image and selecting the "image map editor" that way.
Cleaner, simpler default interface with new module manager
The user interface has been cleaned up and simplified by hiding some of the less-used controls, but still giving advanced users the ability to use them through the new module manager tool. The tag inspector, properties inspector and statistics bar, which previously appeared by default at the bottom of the editor, are now hidden by default, but you can bring them back if you wish. Just look for the new module manager icon
on the top toolbar.
The new module manager also offers one new option not available before. Real-time HTML view will split your editor into two parts showing visual editing and HTML code at the same time and allowing you to quickly work on both views.
Oh, and one more thing. The editing window is now resizable. Just look for the handle at the lower right and you'll be able to drag to increase or decrease the size of your window. This is really helpful, especially when using the real-time HTML view. Of course, the full-screen mode is also still available (though its icon is now moved to the top toolbar).
Improved user experience across all browsers
The new editor has industry-leading cross browser compatibility. However, there are still some differences in the way the editor works across browsers. This is because rich-text editors always depend on the browser itself to provide some of the controls, and each browser handles these things somewhat differently. Let's take a look at the major browsers and what improvements have been made.
- Internet Explorer 7. IE7 continues to offer the best user experience when using the editor. Though IE has its weaknesses, one of its strengths is in the way it handles rich-text editing functionality such as the WYSIWYG editor. The previous version was quite solid in IE and the new version is equally as solid. If you have a choice, IE7 is a great tool to use when editing content on your site (or most any WYSIWYG platform for that matter).
- Firefox. Of course, if you're like me, you don't use IE much. I prefer Firefox and, fortunately, it works very well with the editor too. Next to IE, it is the best performer and it has the added benefit of being available on the Mac platform as well making it a great choice on either PC or Mac. This new release improves the experience in Firefox significantly. Most notably, it corrects an issue that required the user to enter a carriage return before typing in order to wrap their content in paragraph tags. Now, when the user begins typing, their content is automatically wrapped in paragraph tags. This will ensure that paragraph styling is applied to all content the user enters and make things less confusing.
- Opera. For Mac and PC users, the Opera browser performs very well with the editor and is a good choice when editing your website. The previous version of the editor worked well in Opera and the new version continues to perform well.
- Safari. Unfortunately, Safari does not perform as well as the other browsers with the editor. It should be noted that Safari has issues with many WYSIWYG editors because of the built-in way it handles these controls. Safari is compatible and will work with our system, but the code output by the editor, while valid, is not as semantic or desirable as what is produced when using other browsers. A user editing their content would likely not even notice these discrepancies, but standards-based developers looking at the code view would often not be pleased. This new release does improve Safari's performance by correcting the same paragraph issue described in Firefox and wrapping them as paragraphs instead of using div tags. The use of internal dialog windows described above also creates a better experience in Safari. These are nice improvements, but it is still desirable to choose a browser other than Safari when editing your content.
A few other enhancements
- The new editor now enforces XHTML compliant code output across all browsers. This is a major improvement over the previous version.
- The new editor includes a host of improvements to the efficiency of the code which results in faster load times and responses, improving the overall user experience.
- A new "find and replace" icon
is included on the toolbar.
More to come
WYSIWYG editing is the foundation of any CMS and it is a constantly evolving technology. We believe this upgrade takes some major steps forward in usability, functionality, and compatibility, but we also believe there is more than can be done. We still have more ideas on the table for future releases and you can rest assured that we will continue to listen to your feedback and make improvements as needed to ensure that our CMS balances simplicity with functionality in a way that benefits all of our users.
Posted on
Wednesday, June 18, 2008
by Tim Wall