WYSIWYG Hell

Last Friday I had the pleasure of meeting Roger Johansson, who was visiting our beautiful capital, Stockholm. He was attending a usability conference (with Jakob Nielsen, amongst others). We met up for a short “fika” (something like having a cup of coffee/tea with optional cookie/cake to go with it), and talked about web development. Roger has gotten some attention here in Sweden recently, bringing up the discussion about (the lack of) accessibility when it comes to web sites in the public sector (article: Webben är inte öppen fâr alla ).

Something we really agreed on is the lack of respect CMS manufacturers show their clients when they create administrative interfaces that only work in IE on a PC. As if that wasn’t enough, their WYSIWYG editors generate terrible and invalid code that cannot be presented as strict HTML or XHTML. We’re talking about editors that generate deprecated tags, upper-case tags, attribute values without quotes, invalid attributes and so on. Basically, worthless code that also (as to top it off) isn’t well-formed, hence impossible to use in a stricter XHTML/XML scenario.

Why do they do this to us? Is it because of a lack of knowledge, or out of laziness, taking the easy way out? Maybe I’m cynical, but I’m apt to believe in the latter. I’ve met many developers that just think it’s a hassle to produce valid code, and their beloved Microsoft makes it oh so easy for them, so why should they bother going the extra mile?

With all the different web browsers on the market now, be it for computers, cell phones or PDAs, the initiative and responsibility to make the web accessible for everyone has to be taken seriously.

For those of you who read this, let’s start with the WYSIWYG editors. Say no to IE-specific ones, and look at the alternatives. One of the best ones I’ve seen so far is the open source alternative, TinyMCE by Moxiecode. It is solely based on JavaScript, which means that it doesn’t require any plug-ins or extra programs to run (the way it should be, in my opinion). For the moment, it works in IE and Mozilla/Firefox, meaning that with the Gecko support it is also available on the Mac and Linux platforms, as well as the PC platform. And, of course, they’re Swedes! πŸ™‚

Another alternative is XStandard, which uses a plug-in for advanced control over the editing. Unfortunately, it only works on PCs.

 

Using a WYSIWYG tool in your application/-s? Please take your responsibility and make sure that it generates valid (and hopefully semantically correct) code!

92 Comments

  • Tomas Jogin says:

    Thanks for the tips on XStandard and TinyMCE (especially). Do you by any chance have any other tips on similar solutions?

  • It was nice getting a chance to chat with you πŸ™‚

    I totally agree with you here. It's so backwards to require a specific browser on a specific platform. The vendors that are locking themselves into Microsoft face a very real risk of losing business because of that.

    XStandard is great, and I hear they're working on a Mac version.

  • Robert Nyman says:

    The dream scenario is, of course, that all WYSIWYG tools would create standards-compliant, well-formed and semantically correct code. πŸ™‚

    We're definitely not there yet, but I really do hope that Microsoft shape up the way editing works in Internet Explorer, otherwise they deserve to lose some business with that attitude.

    Good to hear about XStandard! However, the scenario I prefer, if possible, is not using any plug-ins at all. Just all ready to go from any computer at all, as long as it has got a competent web browser.

  • Paulo says:

    TinyMCE seems cool, too bad it doesn't seem to be working with Opera8.

  • Robert Nyman says:

    Tomas,

    No, not really. Those two are the best ones I've come across so far.

    However, this URL might help you.

    Paulo,

    The thing with TinyMCE is that it is based on the built-in content editing in the supported web browsers; contenteditable in Internet Explorer and the Midas editor in the Gecko rendering engine. As far as I know, Opera doesn't support content editing.

  • You might want to check out widgEditor: A simple, standards-compliant WYSIWYG HTML editor by Cameron Adams.

  • Robert Nyman says:

    Tanny,

    Interesting, thank you for the tip!

  • Erwin Heiser says:

    Thing is: a lot of end users just want to see something similar to a MS Word interface when they are updating their pages. Anything different and they panic because they are taken out of their comfort zone. I had a client once who updated my completely valid XHTML Strict code using Frontpage because that was what he was used to using. Cared to guess how that site looked after a few updates? πŸ˜‰

  • Robert Nyman says:

    Erwin,

    I feel your pain! πŸ™‚

    Preferably, one can customize the look of the WYSIWYG tool according to one's target audience, and then they actually might use it and one gets valid output. πŸ™‚

  • Jeremy Flint says:

    The reason that you see so many WYSIWYG editors for CMS' that run only in IE and create crappy code is because the CMS authors are taking the easy way out. IE contains a FrontPage-like control called MSHTML, and it writes code like it's 1996.

    I have seen a few CMS products that use this, but do a lot of processing on top of it to wrangle the code into being compliant XHTML (or at least compliant HTML).

    XStandard does seem like a good alternative, but it isn't really a CMS out of the box. It is just a piece of the puzzle that can be included in custom-built CMS applications.

    The absolute worst thing about those IE-only WYSIWYG editors is that when you paste something in them from MS-Word, it treats the content just like an HTML file exported from MS-Word, crappy code and styles included.

  • Bryan Peters says:

    I've used widgEditor in a couple of locations and I can definitely vouch for it. It's simple and elegant, and the code it spits out is squeeky-clean xhtml.

    I would put TinyMCE in second place, only because it has a lot more options than I need. And that only adds to the file size and possible problems. Simple is better. Give widgEditor a try!

  • Stuart says:

    Html Area 3 is another good one for Mozilla and IE. Overall I prefer Tiny MCE as the API is much better documented.

    I think both TinyMCE and HTMLarea have some abilities to remove the Junk from content pasted from word if memory serves.

  • Robert Nyman says:

    Bryan,

    Seems like I have to try it out!

    Stuart,

    I haven't really tested HTMLArea that much, but yes, I also really like TinyMCE's thorough documentation.

  • Column Two says:

    WYSIWYG hell

    Robert Nyman has written a blog entry about the inadequacies of WYSWIWYG editors in CMS products. To quote: Something we really agreed on is the lack of respect CMS manufacturers show their clients when they create administrative interfaces that only…

  • Robert Nyman says:

    Jeremy,

    I think you're correct when you say that developers take the easy way out, that's normally the case, in my experience.

    MSHTML is terrible, no doubt about it.

    I really look forward to the first complete CMS system that also has a WYSIWYG tool that generates valid, well-formed code.

    Regarding the pasting issue: an onpaste event handler and a fairly simple regular expression will do the trick to remove the MS Word-specific code.

  • Historically, only IE offered the ability to use javascript to create a wysiwyg editor. MSHTML since v5 and DEC since v4. I think that's certainly the reason a number of editors out there are IE/Win only. But because the CMS touted easy-to-use editor, it locked users into an IE/Win interface as well.

    With Firefox and Mozilla finally offering Midas, we've seen editors jump on board but it's a slower effort to port an entire application over to cross-browser. In which case, as a consumer, it becomes more of an uphill battle to find a quality, proven, cross-browser CMS.

    While it may seem like developer laziness, it really has more to do with the development costs of developing a quality cross-browser product. If you started today it wouldn't be a big deal but if you've already got an existing product, there's certainly less incentive to do so.

    I've done a little MSHTML programming in my time…

  • mateo says:

    Actually, I don't think it's just a question of taking the easy way out; most developers (and indeed, many web designers) are completely unaware when it comes to web standards.

    Personally, I programme my web apps to use Markdown, and I've yet to get a single complaint about it.

  • Robert Nyman says:

    Mateo,

    Yes, many developers are unaware of web standards and accessibility. But I’ve also worked with many different developers, project managers etc, and when being presented the problem, it has been down-prioritized so much that it wasn’t seen to at all.

    It was too much of an hassle for the developers to create something valid, some more working hours that was unacceptable for the project managers in the overly tight project plan, who were not seeing the big picture in the long run.

    Of course there are many developers out there who actually does care, and maybe I’m just sounding judgmental now, but there are also many developers who are too lazy (if it ain’t out of the box with Microsoft/tool of choice, it’s too much work) and many project managers being oh so short-sighted.

    Good to know about Markdown, it definitly deserves a look.

  • Andrew Green says:

    I’m using HTMLArea in a number of projects, largely because licensing XStandard to be able to customise it is so darn expensive. The output from HTMLArea is the same horrible MSHTML as everything else, largely because hooking into IE’s ability to make content editable just does that. HTMLArea itself doesn’t produce the bad code, IE does. I have no idea how XStandard avoids this.

    The solution we’ve taken to this problem is to take the output from HTMLArea, run it through Tidy, and run that through a whole bunch of XSLT to clean everything up. We also insist that users upload Word content through a customised tool rather than use cut-and-paste. Again, it’s Windows and IE that pastes Word’s repellant HTML, not the editing tool.

    Markdown is lovely, but Erwin above is absolutely right that publishers in a CMS environment are only comfortable using something visual. A couple of years ago, one client of mine moved from a CMS that used a Markdown-like syntax to one with a HTMLArea-based visual editor, and the number of publishers willing to actually publish something increased about tenfold.

    And even then, they complain that there isn’t a mini-photoshop built in so that they can adjust images they’ve uploaded!

  • Robert Nyman says:

    Jonathan,

    Good to see that you are visiting! πŸ™‚

    Absolutely, Micorosft being the first one out, in conjunction with its market share, is one of the main reasons we have such a situation today. I remember building my first WYSIWYG editor for a client back in the end of 1999/beginning of 2000.

    I definitely don't disregard the development cost aspect, but if we're talking about only the editor part of an admin interface, it won't take long to replace it with something like TinyMCE. In my company, we developed a basic admin interface with simple editing functionality using TinyMCE within a week.

    Sure, that's still some time, but really not much at all in the big picture.

    My hope is with more and more people (read:customers) opening up their eyes for WAI, portals that need to have well-formed XHTML code in stand-alone modules etc, it should become an incentive to upgrade their exisiting tools for the manufacturers. Customers requesting it equals money, which will definitely cover the development costs.

    One more angle is the bad-will and bad press web sites get when excluding all other users than the ones using IE on PC. The people making the business decisions seem to start reacting to this, and I believe/hope that the process has started in reaching tools that produce valid and well-formed code.

  • Robert Nyman says:

    Andrew,

    Thanks for the information!

    In that case, HTMLArea doesn't sound like a good option, if one needs to take all those extra steps to ensure the quality of the output.

    Regarding the paste problem, as I wrote in a comment above:

    …an onpaste event handler and a fairly simple regular expression will do the trick to remove the MS Word-specific code.

    Also, I really recommend that you take a look at TinyMCE, I think you will be pleasantly surprised! πŸ™‚

  • You've mentioned TinyMCE and Xstandard…

    The other two that I know of and are trying to make a good product is FCKeditor and Editize.

    The difference betwen Editize and the rest of the editors is that it is a Java Applet instead of a JavaScript. The only problem is that it isn't open source and you'll have to pay for a license to use it online.

  • You'll be glad to know that my CMS works great on Windows, Linux and Mac (OS X), I reckon. πŸ™‚ It's a business-oriented CMS, btw, not "just a weblog system" πŸ™‚

  • Fred says:

    Thanks Robert about this article.

    I discover some other editors.

    Some times I use FCKEditor available to this uri:
    http://www.fckeditor.net/.
    but it's not the perfect tool !

    Then, I think more and more to create a wysiwyg editor in Flash.

    May be this is another solution ?

    FRed

  • Robert Nyman says:

    Faruk,

    That was really some piece of marketing! πŸ™‚

    Strange that WordPress didn't catch it as spam… πŸ˜‰

    Seriously, though, good work! We need to push the market towards more standards-based products.

  • I deliberately didn't add a URL because I don't want to spam it πŸ™‚

    No use doing so already anyway, as it's Dutch-only right now. ^_^'

  • Robert Nyman says:

    Fred,

    Yes, I've heard of it, but I've never had the chance to test it.

    Personally, I'm not a big fan of Flash in general, but if you create something good, I promise to test it! πŸ™‚

  • Robert Nyman says:

    Faruk,

    Let me know when it is in English and released, so I can test it!

  • Don't bother trying a rich text editor in Flash. Untill Macromedia/Adobe fix the HTML bugs in the textfield object it is just too much hassle. We have tried to do it in our CMS since we wanted one interface technology to handle the whole interface and not break out of it by having a IE/Midas editor. However Flash just isn't made for rich text handling, even though it does offer excellent user interaction possibilities (like drag'ndrop etc).

    Thanx for the tip TinyMCE.

  • Robert Nyman says:

    Stefan,

    Thank you for sharing your experiences.

    Good luck with trying TinyMCE!

  • Adrian Bengtson says:

    Since version 1.3/2.0 there is support for WYSIWYG editing in Safari too, and TinyMCE developers are working on implementing it.

  • Fred says:

    Stefan,

    Thanks a lot for your experience shared.

    I don't know many things about flash.

    It's just an idea.

    Actually for me, the best editor is a wiki editor.

    But I know it's not really useful for basic user !

    ps: excuse my french

  • Robert Nyman says:

    Moises,

    Thanks for the tips (and sorry for not approving your comment earlier, I missed it).

    The thing about Editize is that requires a JVM (Java Virtual Machine) installed, and I prefer when one doesn't have to install anything extra (however, many people already have a JVM installed, I know).

    Maybe I should check it out. πŸ™‚

    Adrian,

    I knew about WYSIWYG editing in the latest version of Safari, but it was certainly good news that the TinyMCE developers are looking on implementing it for Safari too!

    Fred,

    All ideas are welcome! πŸ™‚

  • meint post says:

    there's a different angle possible: web based xml editors

    xml editors don't suffer from the output inconsistencies that the mshtml editors have.

    Bitflux (Open Source): http://bxe.oscom.org/
    Xopus (Commercial): http://www.xopus.org/

    cheers,

    Meint

  • Hiya there, Robert!

    I decided to wait out a day or two and see if I can finally understand why "WYSIWYG editors […] require Internet Explorer for Windows and generate crappy code."

    IE itself does not generate code, messy or tidy. IE does not force you to use ActiveX controls either. It's a choice of each developer. I come from heavy C++ background and have written plenty of COM objects—none of them ActiveX controls. I don't like ActiveX controls myself and never wrote them.

    The fact that people paste chunks of ugly Word goo has nothing to do with IE either. Rich Edit controls are the ones who do it!

    Jonathan up there hit the nail on the head: it's about development cost.

    It so happened that IE allowed to tap into the Windows clipboard and such straight from JavaScript. People jumped on it because it allowed them to build truly rich WYSIWYGs—something they couldn't do in Mozilla or Opera or Safari at the time. The fact that Word markup wasn't cleaned up right away was developers' fault, not the browser's. When a drunk driver slams into a tree, whose fault is it? Do you blame the car (yes if it's a Ford with Firestone tires) or the driver with retarded reaction?

    The end goal was to give people a familiar interface and make it easier for them, which should always be our goal because people don't give two sh##ts about JScript vs XUL, ActiveX vs XForms.

    On a related note, I think XStandard comes the closest to what we all desire.

  • pixelEngine says:

    Best wysiwyg editor we have ever used is the FCK Editor.

    http://www.fckeditor.net/

    no doubt about it.

  • tim says:

    fckeditor is the best. for best results combine with htmltidy (background serverside cleanup, do this async (eg ajax))…

  • Robert Nyman says:

    Meint,

    Interesting angle, but are they offering functionality that is attractive enough to a lesser advanced user?

    Milan,

    Long time, no comment! πŸ™‚

    I definitely agree with you that it's not the environment's fault when users paste in Word-formatted code and developers don't handle that in their code.

    But the big problem has been the MSHTML editing option, that by default generates terrible HTML code. Sure, you can parse it before saving (which very few developers do), but the original code generated is what we see in many web sites today.

    Development cost definitely is a factor, but I don't think it has to take so much extra time to use any of the good tools/add-ons available on the market and implement them. I truly think another huge factor is that responsible project managers/system developers just don't care and/or have the competence and knowledge to see the benefits of doing it correctly.

    I root for TinyMCE for the moment, but I've gotten a lot of good tips here to try out.

    pixelEngine, tim,

    Thanks for sharing what you have had good experience with. It seems very interesting and now I just have to test it! πŸ™‚

  • But the big problem has been the MSHTML editing option, that by default generates terrible HTML code. Sure, you can parse it before saving (which very few developers do), but the original code generated is what we see in many web sites today.

    Reparsing the IE DOM in order to extract a usable, standards-compliant version of the markup is a non-trivial execise. Coincidentally, I posted about just one of the problems one will probably run into a few days ago at my site; there are quite a few other gotchas out there waiting to be avoided.

    I’m currently working on a JavaScript class which will do the horrid work necesssary to convert (for example) a pasted Office document into valid XHTML, but I’m not planning to bother incorporaing the presentational markup which is so inextricabally intertwined with MSOfficeHTML; the vast majority of it is unnecessary anyway.

    One answer I would like from MS though: why does a bulleted list in a Word document become an unholy mess of styled spans surrounding obscure HTML entities representing bullets, when they could just use <ul>? I don’t suppose we’ll ever know.

  • (Oops, sorry, I've just realised that wasn't a Preview button; I would have corrected all my typos beforehand otherwise. I can spell, honestly. Mea culpa.)

  • Robert Nyman says:

    Nick,

    Thanks for the comment! The spelling’s fine! πŸ™‚
    And no, we will probably never get to know what happened to the poor bulleted lists.

    In general, there’s one thing to remove invalid attributes etc in pasted Word code or the HTML code generated within IE with MSHTML, a totally other to make sure the code is well-formed structurally.

    I have written a tiny script that transforms invalid HTML to correct XHTML, which does the trick for the former.

    Removing the tons of extra code from a Word document is no small feat, but definitely plausible. It totally depends on what your ambition level is, but one angle might be to remove all attributes on the tags and also completely remove non-valid HTML tags.

    If you aim higher, you need to specify all allowed/(or attributes you want to allow) for every specific tag.

    But that’s what this whole discussion is about, really. Instead of trying to be content with the code being generated, let us, and make CMS manufacturers and their likes, use tools that create code that we don’t have to parse, code that we can expect to be correct.

  • G. I. says:

    FYI 'fika' means snot in Hungarian language.

  • Jarkko says:

    Robert,

    Haven't looked into the inner workings of TinyMCE, but it's used by a CMS I'm working on and I was a bit disappointed for two things:

    1. It sometimes, for some reason, mungles the html I put into the html source editing widget. This happens not always but often enough to make it really frustrating to transform pages from legacy systems to the new CMS.

    2. It doesn't seem to produce valid xhtml either:

    <code>luhjklgkuyfkfkgfhkuyfkjfkjh </code>

    I don't know, maybe there's some html/xhtml switch in it. If so, I'd be happy to hear about it (or any other means to ensure valid xhtml easy to integrate into a CMS).

  • Robert Nyman says:

    G.I.,

    Thanks for letting me know! πŸ™‚

    Jarkko,

    Thanks for your input.

    I also found <a href="http://tinymce.moxiecode.com/forum/viewtopic.php?t=51&highlight=xhtml+switch&quot; rel="nofollow">your question in the TinyMCE forum.

    I would be happy if one of the TinyMCE developers would give us a reply here to this.

  • There's this myth that GoLive doesn't create clean code. Now you've never even mentioned GoLive or Dreamweaver in the article but these are the two main tools out there, so i guess you mean these. Or maybe you didn't but others have blamed GoLive for bloated non-compliant code before, so i just feel like i have to set things clear:

    With GoLive you can specify wether you want to create an HTML or XHTML page, you can tell it to only show you XHTML-valid objects for you to use, you can even validate all your pages against any HTML or XHTML DTD, you can tell it to surround and -elements with CDATA, convert HTML-pages to XHTML and so on. It will generate shorthand code for CSS. It always uses lowercase for attributes and puts the values in quotation marks.

    GoLive CS2 will default to creating XHTML pages amongst other standards-oriented new features.

    GoLive also creates code that only GoLive understands such as csclick="5D19020" but you can tell GoLive to strip out all these authoring-oriented tags and attributes when uploading to the server.

    So… no need to rant about GoLive. Please keep this in mind.

  • Joakim says:

    Im not exactly sure what you mean by "mungles the html", everything on 1 line? You can always hook in your own cleanup function, just a basic add
    on and ending block tags should produce quite nice end result. We have plans on improving the cleanup functionality, beeing able to "chain" several cleaups after eachother etc.

    The not correct tags sounds like a configuration thing, if you try the examples at the website and submit what you type in the full example editor it produces with ending slash.

    There are config options to turn this feature off/on.

    I think we may have to many options!

    Visit the website forum for community support.

  • Robert Nyman says:

    Pascal,

    I take it that you like GoLive? πŸ™‚

    But no, the targets for this post were mainly CMS manufacturers and their administrative web interfaces.

    Anyway, it's always good to hear that there are programs out there as well that creates valid code (however, is it semantically correct?).

    Joakim,

    Thank you for your reply!

    And I agree, any further support for TinyMCE should be discussed in the TinyMCE forum.

  • yes, i really like GoLive. I'd even love it if it didn't keep crashing.

    However, the semantics are up to the user, no program can know which text has to be h1, what should be declared as a list and so on, neither will it tell you when "strong" should be used instead of "b". But if the user does it right, of course, it can create semantically correct code too.

  • Robert Nyman says:

    Pascal,

    Yes, it's definitely up to the user. But what I was going for was that if, for instance, you want to create a heading and mark some some text and click the heading button, it would create a <code>h1</code> tag instead of a styled <code>div</code> (as you can see, I'm not familiar with the interface in GoLive).

  • Meint says:

    xml editors user friendly … I think they are but I find it very hard to determine this for the average user as I'm not an average user. Best way to determine this is to look at the Bitflux demo, http://cvsdemo.bitfluxeditor.org/examples/inlineX…. I think it's quite straightforward but maybe I'm not a good judge on its usability.

    An entirely different angle (again) is to use a conformant standalone xml/xhtml editor and use a webdav connector to upload your content to the content management system. I know that eZ publish and Plone have webdav support and several commercial cms systems. I wrote a webdav interface for Mambo but never got around to finish it off but it still works fine. You can use OpenOffice as your editor which is a much more familiar interface for most content editors and be assured of quality input. afaik Plone has an OpenOffice/webdav interface so the concept has proven itself πŸ™‚

  • Robert Nyman says:

    Meint,

    Thanks for the link. However, I can't seem to run any demo and most links on that page are dead links.

    Using webdav might be an option, but, if possible, I prefer doing the WYSIWYG editing in the web browser, without having to install anything extra.

  • Meint says:

    hi robert,

    there's an "edit article" link in the left upper corner that you need to click before being able to edit anything (and see bitflux editor in action).

  • <blockquote cite="Robert Nyman">But what I was going for was that if, for instance, you want to create a heading and mark some some text and click the heading button, it would create a h1 tag instead of a styled div (as you can see, I’m not familiar with the interface in GoLive).

    Yes, of course it would create an h1 tag. h1 is the semantically correct way for marking a heading, isn't it? Why would you want to use a div instead?

  • Robert Nyman says:

    Meint,

    Ah, thank you! πŸ™‚

    Pascal,

    Yes, of course, that's the obvious question. Why I was asking is that there are some editing tools (mostly custom-built) and programs out there that use styled <code>div</code> elements instead.

  • vreemde eend says:

    Hi,

    Has somebody any tips how to implement HTML-tidy to clean up HTML of a WYSIWYG-webeditor like Tinymce?

    thanks,

    vreemde eend

  • Meint says:

    using tidy to clean up wysiwyg code requires server side filtering (if you want to use tidy). There are several implementations available depending on the server side language you want to use. Assuming that you're using php you could use phptidyht (http://sourceforge.net/projects/phptidyht/) to clean the wysiwyg output. I don't know where or how you're going to use it but the general strategy is to determine where the editor output is posted to and in the receiving server side logic make a connection to phptidyht.

    hth

    Meint

  • vreemde eend says:

    uhu, I think I've got to take a good look at these:

    Tidy for PHP 4 and PHP 5

    php tidy Functions

  • Robert Nyman says:

    Meint,

    Thank you for the answer, and vreemde, thanks for the links.

    My question is: is it necessary to use HTML Tidy in conjunction with TinyMCE?

    Also, I found this link discussing Tidy and .NET: HTML Tidy should support ASP.NET.

  • vreemde eend says:

    I think Tidy can only improve the code. WYSIWYG is meant for inexperienced users. In a cms you have no control of the way they add content trough the WYSIWIG-editor and they do strange things. Often I get multiple nested tags like:

    [strong]th[/strong][strong]e duck[/strong][strong][/strong]. Or they paste Word-HTML, or multiple lists, where there should only be one:

    [ul][li][/li][li][/li][li][/li][/ul]

    [ul][li][/li][/ul]

    [ul][li][/li][/ul]

    There will always be things TinyMCE can't handle, but HTML-tidy can. Html-tidy also inserts linebreaks an indent, so the html-code is well structured.

  • Robert Nyman says:

    vreemde,

    Yes, I agree, it won't hurt using it as a complement.

    I just wanted a more thorough explanation, I guess… πŸ™‚

  • Excellent post. This is a topic that’s been on my mind a lot lately, as I’ve been trying to introduce myself more to the concept of accessibility. Finding new, simpler ways to make it easier to take accessibility aspects into account isn’t easy, so eliminating bad practises from the beginning – just like this – might be just what we need.

    Like you said, the ideal scenario would be that all WYSIWYG tools would create valid, semantically correct code. Too bad we don’t live in an ideal world. But it seems to me like people are awakening on the subject more and more. So, maybe we’ll get there, eventually… or at least a little bit closer. πŸ™‚

  • Robert Nyman says:

    Heidi,

    Thank you!

    I guess/hope it will be small baby steps closer to an ideal world. We will get there… πŸ™‚

  • Neil Merton says:

    One other wysiwyg editor is KTML, from Interakt. There is a free 'Lite' version available, along with three other license types.

    Great discussion by the way πŸ™‚

  • Robert Nyman says:

    Neil,

    Thank you, and thanks for the tip!

  • Alexandru says:

    Robert, we have a major improved version of KTML under development, we'd love you to enter our beta team.

    Contact me at acostin@REMOVEinteraktonline.com when you get back from your holliday.

    Alexandru

  • Robert Nyman says:

    Alexandru,

    Sounds interesting!

    I'll be in touch!

  • Sandy says:

    I have gone thirty or so rounds on this. As a CMS developer, I can only speak for myself, but with me it has been an uphill battle against clients and managers to get any sort of cross-browser, standards-compliant HTML editor (I refuse to call them WYSIWYG because what you see is generally only the vaguest approximation of what you get once it gets rendered in situ). Clients want Word or Front Page, the ability to take in their bad HTML, pasting from Word, and the ability to manipulate appearance the way they do in Word, rather than using pre-set styles.

    One client broke their own site so much that I finally was able to convince them to go to XStandard, though it has resulted in a delay as they clean up their old code so XStandard doesn't wipe it clean.

    The managers, of course, want to satisfy said clients and are afraid to lead them too far away from their immediate desires. One doesn't like the time Java applets take to load, so that was ruled out. Word pasting must be preserved. The editor must support uploading of images on-the-fly.

    XStandard has been the only one to do that and provide acceptable output. However, I don't have a day-to-day feel for it, since I develop on Mac OS X and can't use it regularly (which is fine, I trust my code more than anybody else's).

    Maybe I'll investigate hacking TinyMCE to work with our own image upload feature or something, but I am afraid that trying to get the rest of the CMS to the point where I feel comfortable promoting it as an <acronym title="Open Source Software">OSS</acronym> solution is taking precedence.

  • Robert Nyman says:

    Sandy,

    Thank you for a thorough comment!

    I think you're dead on when you describe the situation, it's different participants and the business decisions involved.

    That is precisely how I've had it during the last couple of years.

  • Wonderful discussion. Sandy, I believe has thoroughly convinced me that the CMS developers have to throw out their current thinking of how an admin interface should look and feel.

    Just throw it out completely, please and start over.

    Forget there ever was a Microsoft Word, please. It has no place on the web – you're simply confusing all of your clients and contributing to the perception that CMS is difficult to use.

    I mean just look at the editme editor and you'll see what I mean, it speaks for itself – my business analysts refused to use it when it was simple – now I'm not even going to ask them to look at it.

    Rethink.

    Thanks.

    Scott L Holmes

  • Adrian Bengtson says:

    TinyMCE will be part of WordPress 1.6:
    http://photomatt.net/2005/08/05/wysi/

  • Robert Nyman says:

    Scott,

    Yes, rethink seems to be the keyword here.

    Adrian,

    Thanks for letting us know, that is indeed good news!

  • Raoul Mengis says:

    Hello,

    See this CMS WYSIWYG Xhtml1.1!

    <a href="http://www.sionpassion.ch” target=”_blank”>www.sionpassion.ch

    <a href="http://www.fullygrandcru.ch” target=”_blank”>www.fullygrandcru.ch

    <a href="http://www.benoit-dorsaz.ch” target=”_blank”>www.benoit-dorsaz.ch

    For more info: http://www.1computer.info/1work_demo_en.html

  • Robert Nyman says:

    Raoul,

    Wow, linkorama!

    Hopefully it helps someone.

  • Hi,

    We are working on a new open source <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> compliant web editor, not <acronym title="What You See Is What You Get">WYSIWYG</acronym>, but <acronym title="What You See Is What You Mean">WYSIWYM</acronym> : WYM editor.

    WYM editor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible.

    The concept is similar to XStandard (which is unfortunately closed source and not free).

    Project page : SourceForge

    Website : WYM editor

    Comments, suggestions, help are very welcome !

  • Robert Nyman says:

    Jean-Francois,

    Thanks for letting us know!

    I hope it will support Mozilla and Safari web browsers in the future too.

  • Fish Hooks says:

    Anybody know how we get an RSS feed for this blog? I am not very tech savvy and would really like to get updated info on this blog. Thanks!

  • Robert Nyman says:

    Fish,

    I'm glad you want to read more! πŸ™‚

    The RSS feed URL is http://www.robertnyman.com/feed/rss/, and I've also sent it to you in an e-mail.

  • My name is Sally Bowers & I am totally new to Blogging! Wow. what a beautiful blog design. I’m working on setting up my own Blog I was just looking around.

  • Lukas says:

    Thank you Robert for the article, and all the posts – this is very helpful for me as I'm looking for an HTML editor to replace HTMLarea in my CMS system.

    Another one that I came across is WysiWygPro which is quite good, but not open source – however tinyMCE looks quite promising.

    http://www.wysiwygpro.com/ if anyone is interested (I'm not affiliated with this company)

  • Xhtml says:

    I can purpose you to try the BBComposer, a very nice WYSIWYM open-source editor !
    https://addons.mozilla.org/firefox/3795/

  • […] B (o una G), che inserirà il testo all’interno del tag <strong>). I WYSIWYG non sono mai stati ben accetti sotto il punto di vista d […]

  • […] ookmark” title=”Permanent Link: WYSIWYG”>

    Sobre editores de código html: WYSIWYG Hell. F […]

  • […] on the ‘B’ button, that will insert the text between two <strong> tags). WYSIWYGs never been well accepted under the point of view of web standards, because accused to create not well formed code, not […]

  • […] on the ‘B’ button, that will insert the text between two <strong> tags). WYSIWYGs never been well accepted under the point of view of web standards, because accused to create not well formed code, not […]

  • […] on the ‘B’ button, that will insert the text between two <strong> tags). WYSIWYGs never been well accepted under the point of view of web standards, because accused to create not well formed code, not […]

  • As an HTML Editor vendor we have to agree with your comments: many CMS vendors fail to realize the importance of the editor. From what we can tell they are more focused in things like internationalization, visualization, personalization, version control and publishing. However businesses that buy a CMS want their staff to generate content in the CMS (particularly for intranet and knowledge management purposes) so a good editor is essential. The most common workaround we come across is that authors create documents in Word and email them to the web admin who then publishes. This works fine until the content needs to be updated which defeats the purpose of having a CMS in the first place.

    The pain felt by content authors on CMS is the key area that we focus on. We aim to emulate as closely as possible the MS Word interface, as that is the de facto desktop editing standard for most businesses. Our logic is that usability is improved where the interface is familiar and inputs deliver the same results as before (as trivial example CTRL right arrow skips to the beginning of the next word). Clearly in the case of hyperlinking, image insertion and file linking we have had to go beyond the desktop paradigm and had to create dialogues, menus and buttons to suit.

    We come across fck and TinyMCE quite a bit and a few CMS vendors have tried them with varying success. Ultimately the DHTML/AJAX editors are limited by the capabilities of the browser in which they are deployed. As browsers improve so will these editors. But firefox and IE do not deliver a consistent editing experience and are unlikely to do so in the future.

    An earlier comment referred to Applet load times as a problem. Our recent work has largely addressed this and we see comparable load times between our products and the JavaScript editors. Try our live demo in IE and let us know what you think.

    All the above aside, we have found that the quality of the integration between the editor and the CMS is often more important than the relative merits of different editors.

    By the way, our development team is based not very far from that large rock at the top of your homepage, in Brisbane.

  • Robert Nyman says:

    Marco,

    Thank you for your comment, and very good input. I appreciate the tip of another editor, so one have a palette of options to choose from!

  • Faruk says:

    Hi can anyone please explain how to implement widgEditor. I have installed it and and the example file works.

    I want to know bask three things:

    1. How to make changes within the page chages so that page remembers it after submitted. (I have noticed there is no submit.php file came with the installation of widgEditor)

    2. Do you have an example of submit.php file?

    3. How do you use it so that only the site owner can make changes but visible to public to see.

    Hey I love your preview thingy πŸ™‚

    Hope someone answers with some details.

    Many thanks

  • Faruk says:

    Hi can anyone please explain how to implement widgEditor. I have installed it and and the example file works.

    I want to know basicly three things:

    1. How to make changes within the page chages so that page remembers it after submitted. (I have noticed there is no submit.php file came with the installation of widgEditor)

    2. Do you have an example of submit.php file?

    3. How do you use it so that only the site owner can make changes but visible to public to see.

    Hey I love your preview thingy πŸ™‚

    Hope someone answers with some details.

    Many thanks

  • For those that haven't looked at XStandard.com recently, the current version works in OSX very nicely, and supports Opera as well as Firefox and IE.

    Best darn editor out there, bar none.

  • Pulse says:

    Faruk,

    1) You need to submit the content to a server-side script (submit.php). The content in the editor will load whatever is in the textarea. Use a server-side script to retrieve this from the server too.
    2) http://www.php.net
    3) Once the content is stored on the server, use a seperate page to display it on your website. Add a login script to your editor. You will also need a way to create and manage all different pages (a menu).

    If you have done all of the above, you have yourself a CMS (content Management System). A WYSIWYG (What You See Is What You Get Editor) is just a part of a CMS.

    Based on your questions I would advise you to use a CMS that is already made (www.hotscripts.com – PHP – Content Management)

  • I'm trying to build a CMS at the minute. I haven't got as far as picking an editor yet, so thanks for all the information! It will be very handy.

    One thing I do know: Whatever editor I pick, the generated markup will be put through the HTML Purifier before it's saved to the database.

    TRiG.

Leave a Reply to Paulo Cancel reply

Your email address will not be published. Required fields are marked *