Visually Editing Semantics – What You See Is What You Mean

Many CMSs (content management systems) come with some kind of visual editor that allow editors to create and format content without knowing the markup involved. I evaluated some of these WYSISYG-editors back in March and found most of them lacking in features for semantic markup. One of the more commonly found problems is that they have a lot of features for visual formatting like font selection, font color, indentation etc. In most CMSs these are features you would like to avoid (ask your corporate communication department if they would like to have features that allow editors to go crazy with colors on the website…).

Som of you will argue that one should never use a WYSIWYG editor and instead deploy a wiki-style editing syntax like e.g. Markdown. This typically solves the problem, but in reality this type of syntax is very difficult for content editors to learn and becomes increasingly difficult if you want to do more advanced editing.

WYMeditor to the rescue

I was planning to start working on my own inline editor by forking TinyMCE and correcting what I thought was wrong with it when I found this comment from Jean-François:

[...] I’d like to present WYMeditor: WYMeditor is a web-based XHTML editor, not WYSIWYG, but WYSIWYM: the end-user can concentrate on rich content, while layout and design are handled via style-sheets.

This sounded almost too good to be true. WYSIWYM (What You See Is What You Mean) is of course how content for the web should be edited. WYMeditor is in an early stage of development, but after playing with it for a while it looks very promising. If it guarantees well formed XHTML it is an easy task to convert it to HTML 4.01 or any other representation you can think of.

WYMEditor interface showing the markup structure of a text.

Currently it works in Internet Explorer and Gecko-based browsers such as Firefox. You can try an online demo of WYMeditor here.

If content management systems were to use editors like WYMeditor web accessibility would get and instant boost. There are some issues that hopefully will be solved soon:

  • icons for strong emphasis and emphasis look like bold and italics,
  • heading levels can be mixed in a non-logical way (like inserting h5 after h1)
  • support for som elements like acronym, abbreviation and definition lists, are missing

But, if I was developing a CMS I would definitely monitor the progress of WYMeditor.

Could WYMeditor make content editors aware of semantics in a way currently impossible in other inline editors? Will this type of inline editing merge with visual presentation à la XStandard?

Comments

  1. Phil Thompson says at 2006-12-06 18:12:

    This looks very interesting and I’d be even more interested to see how people interact with it.

    I don’t know whether they’d understand the concept of it or whether they’d be flummoxed, but I’d predict the latter.

  2. Kevin Cannon says at 2006-12-07 12:12:

    Nice idea, but the interface for it it pretty rough at the moment.

    I think setting it up, so it’s framed correctly within the CMS would be crucial in order to make it usable.

    Will keep an eye out on it.

  3. Mark says at 2006-12-07 13:12:

    I don’t see what this has over TinyMCE to be honest, styling the tags inside the editir is possible in TinyMCE as well (just css). After trying WYM for a while I encountered several problems, tables broken, just very invalid/broken HTML where for example TinyMCE would clean it up making it “ok” (no perfect). There are other things to consider, like the structure and quality of the js code for example.

  4. Hrvoje says at 2006-12-07 13:12:

    IMHO it’s a very good editor.
    I’m frustrated to see a site fall apart when someone pastes a whole Word document into a WYSIWYG editor witch picks up every bit of Word formatting.
    I will give it a try in my next project, or modify some curent to see how it works.

  5. Peter King says at 2006-12-12 04:12:

    TinyMCE is a great WYSIWYG but prof sites don’t want WYSIWYG. We need WYSIWYM. What I want to find is an inline editor that allows users to insert simple XML tags from a site specified (cut down)Relax NG schema. If the schema is DocBook for example it will provide one way to markup the text, if it is another it will use that. Ultimately all tags should come from a schema not HTML. WYM is the closest to that I’ve found so far.

  6. Peter Krantz says at 2006-12-12 12:12:

    Peter: If you want schema control of the editing environment you should have a look at EditOnPro by Realobjects. It allows for custom schemas to control what the user can create. I had a look at an earlier version in the article Evaluation of WYSIWYG editors.

  7. Tim Wood says at 2007-01-12 08:01:

    Wym looks great, tests great … until you try and integrate it in a page/site with other javascript. It turns out that the code uses many common function names (for instance “init()”). Caution to developers, preface your function names so this doesn’t happen. For instance, function names in TinyMCE begin “TinyMCE”. Amazing how this reduces naming collisions (and the resulting weird errors).

  8. Arundel says at 2007-01-23 22:01:

    This kind of thing makes me giddy! Thanks for the pointer, and I’ll certainly be using it ASAP.

    Glee!

  9. Scott Lewis says at 2008-07-15 14:07:

    I don’t know if anyone is still following this thread but I’d like to bring to everyone’s attention that Jean-François has released a new version of WYMeditor – v0.5 Alpha. The code has been re-written using the jQuery JavaScript library and properly namespaced to avoid collisions. Additionally, we are in the prototyping stage of a new architecture – I mean “from scratch” – for WYMeditor as well. You can learn more about v0.5 at http://trac.wymeditor.org/trac and v0.6 at http://trac.wymeditor.org/trac/browser/branches/scott/0.6-a4

    Cheers,
    Scott Lewis
    WYMeditor Development Team

  10. شات صوتي says at 2012-01-22 04:01:

    written using the jQuery JavaScript library and properly namespaced to avoid collisions. Additionally, we are in the prototyping stage of a new architecture

  11. Fyodor Sheremetyev says at 2012-05-21 18:05:

    Hi! I would appreciate your opinion on Texts – a new WYSIWYM editor for Windows and Mac OS X.

  12. community services for children says at 2014-03-30 08:03:

    I study some terrific things listed here. Unquestionably price tag bookmarking with regard to returning to. We astonish just how much energy you place to build such a superb beneficial site.

Trackbacks

Leave a comment

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Peter Krantz, peter.krantz@giraffe.gmail.com (remove giraffe).