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
Comment Feed
Vicky
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!
Tim
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.
Tim
thom
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