Wednesday, 13 January 2016

WYSIWYG editors

One of the most consistent features among all types of CMSs is a WYSIWYG editor. In most cases, the WYSIWYG editor forms the core of almost all CMS content-editing interfaces. This ubiquity tends to make people overlook these editors when researching a CMS, and that's a shame because they are such an important part of how teams and clients work with a CMS, they should be examined closely as part of the selection process. A WYSIWYG, or What You See is What You Get, editor allows users to add, edit, and format content without having to code HTML or CSS.

Most of the time, they look and feel very similar to a word processor, making it simple for anyone with basic word processing skills to add or edit content on a CMS. Here, for example, is the WYSIWYG editor for WordPress. Notice that it has a toolbar, and it allows me to do things like bolding my text and maybe italicizing it. I can format links. I could change the color of the text. All sorts of things. Really, all I have to do is type in my text, format it the way I want it using the toolbar, and simply publish it.

This simplicity leads people to believe that all WYSIWYG editors are the same, or at least produce the same results. That of course is simply not true. Perhaps the most obvious difference them is simply the amount of things they allow you to do. Some, like this one, are very minimal and only give you basic formatting options. Others offer a huge range of formatting options as well as advanced functionality like allowing users to print content, create tables, insert images, video, and other media directly into your content.

Looking for an editor that gives users the formatting options they need is a very important consideration when choosing a CMS. Keep in mind that you'll need to train your clients or your team members to use the editor. If you have too many options up there or a WYSIWYG toolbar populated with features that you don't need, that can prove difficult for non-technical users to grasp, or worse, result in pages that aren't formatted to your site's standards. Too few options could result in frustrated users who simply can't format content to match the rest of the site.

There's another capability that you need to examine when looking at a CMS's WYSIWYG Editor, and it's one that's really actually pretty easy to miss. Although they look and act like a word processor, they are in fact still generating code and then inserting that code into your site. Because of this, it's very important that you examine the code created by the WYSIWYG editor to make sure it generates clean code and meets the level of standards compliancy that you need for your site. Many of the editors give you the ability to switch from formatting text to writing code, and this allows you to see the code that's being generated and then tweak it if necessary.

If you are demoing or trying one of these editors out, format some text and then switch over and take a look at the code. Depending upon the editor, some of the formatting options will result in structuring the text with HTML, while others might result in the creation of inline styles. If your site has strict rules about the use of inline styles or strict guides on when and how structural tags should be used, you need to understand how the WYSIWYG editor formats your text and then train your clients or staff to use it in a way that generates clean code with the formatting that you need.

In many cases, CMSs use the same WYSIWYG editor. If you want to take a closer look at some of the more popular editors and their capabilities, go check out TinyMCE, CKEditor, Open WYSIWYG, and InnovaStudio WYSIWYG editor. These sites will give you insight into the features and functionality behind the WYSIWYG editors found in some of the more popular content management systems, and hey, if you are a developer, give you some great options for integrating a WYSIWYG editor into your own projects.


No comments:

Post a Comment