I've written before about the idea of a WYSIWYM editor. Something to bridge the gap between the semantic clean code we write as web developers and what our clients and users generate via rich text tools. There are projects out there, such as WYMEditor, but they still seem to fall short of what I think is needed.

When we design a content managed site using CSS we invent classes and structures for the sort of data that will be used. An example of this might be a blockquote with quote images either side, this would use a blockquote tag containing a div, CSS would then apply two background images aligned top left and bottom right. Using a standard rich text editor the client would have to go into source view to recreate this! You could have another structure for inserting images into content with a caption, the surrounding block might have a class that decides whether it is left or right aligned. Same goes for headings or complicated structures like an address (microformat!)

I've been working on a new rich text editor where the web designer can template these structures and add them as buttons onto the toolbar, and the user will be kept within the styles available. What I want to do though is gather some more information on how this would be used.

These are what I think the basic objectives should be, but please do comment to refine and focus these a bit.

• End user works in WYSIWYG, actual site styles applied
• Conventional word processor or email editor look and feel
• Simple configuration of templates for web designer to use
• Support multiple style contexts for different site sections
• Generate XHTML
• Hides all technical aspects from end user

Labels: html, posh, richtext, semantic

None of us techie types like wysiwyg editors, we all know they generate awful HTML, some of them even use FONT tags still! The problem is clients need to add text to their sites, they need to format it, and they really don't want to learn HTML.

Most modern content management systems, including our own, rely on the browsers built in wysiwyg editor. These are some of the worst offenders for bad HTML, the problem is helped slightly by JavaScript components like FCKEditor that try to clear it up.

The problems really start when you try to ensure a good seperation of content and design, using carefully constructed CSS rules around semantic HTML and a rigid CSS class vocabulary. For example on our site, surrounding content with a div and blockquote results in the text being padded and surrounded with pretty quote graphics. This is great when the content author knows this, dips into HTML mode in the editor and enters the couple of tags needed.

Of course, you can't expect your clients to do that. What is really needed is an editor tightly integrated into the sites stylesheet, that helps the user markup their content in the right way without even knowing it. It needs to be easily configured by the web designer who defines the markup structures, and it needs to be context sensitive to different areas of a site.

I've tried to do this in the past, we had something similar where I used to work. What I'm imagining is a little more complicated, so it can be used to generate complex sets of data. Definition lists, site specific structures, hCard and hCal microformats. I think FCKEditor is probably a good platform to build this off but I need to have a look around first, check it doesn't already exist!

Labels: html, microformats, posh, wysiwyg