thoughtfully studied

follow me on Twitter!

Semantic rich text editor

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: , , ,

3 Comments - Post a comment


The king of WYSIWYM is LyX which whilst not really web related (it's a LaTeX front end) it is the same idea; and it does it very well.

Quite possibly this would be a good model to start from. The other is getting over the idea to contributors and moderators that you're not meant to create a really fancy document like you might create in Word (which often they don't but they think so with their 50 liberally applied fonts and colours...) but rather the website will do all the work to make it fit in.

I think this could be an excellent idea and is more along the lines of what I have been trying to get across to our CMS vendor at the moment, as well as supporting the creation of floated images for word wrapping, rather than just an image button which leaves the user having to style it themselves, that needs knowledge etc, of which only I have here.

As for semantics; one thing I really wish is that damn IE would support the <q> tag!

Good ideas there!


When you are talking about Adding semantic context to a users content, the first thing you have to do is persuade the user that there is a point to adding the extra effort to add the semantic data.

You also need to educate the user: they need to know that they *ought* to be adding data with semantic context.

It might be as simple (ha!) as recognising an address or a name as a user types it and then offering to the user the choice to add context or not. Perhaps similar to the way that MS word recognises an address and smart tags it.

But maybe the data the user is adding is not easily recognisable? say a book title or a product review?

This leads me to think that the BEST type of editor would be one that knows a bunch of ways of adding a whole bunch of information, but can clearly express to the user how they should add that information, without detracting from the workflow.

This leads me to conclude that the code view is as necessary as the WYSIWYG/M preview. The user can edit either and see their data in both raw and finished modes.

I was working on an editor a while ago (which I know is extreeeeemly rough and ready), that uses a two pane view.

have a look at self description editor
Tell me what you think.



Yes absolutely, you can go a long way with offering functionality to help people add semantic content. What I'm thinking though is the web designer/developer who builds the website will do a lot of the work, they will dictate the context and types of data that can be displayed. The user will be encouraged to use the right semantics because they will offer automatic styling that fits into the website, and they will have few other options for adding their own design (no comic sans!). There will also be some education from the designer to explain why they can't have comic sans, and that it's for everyone's benefit.

I want my client to be able to put quotes into the page and have them look nice like the quotes I put in, I want them to add contact details or addresses that have a little "get vcard" button and so on