WYSIWYG browser editor that generates *good* HTML?

Question

I'm searching for a "suck less" WYSIWYG in-browser X?HTML editor that generates good HTML code.

(no <font>, <foo style="...">, <p></p><span></span><p><span>&nbsp;</span><span><span>blah</span></<span></p> and so on -- <b> and <i> etc is ok).

Should be easy-to-use as it is going to be used by people that do not know what HTML is.

Any suggestions?

Extra points for Copy-and-Paste-from-Word-readiness! :-)

(I found a lot of editors but they all create that <font> and nested <span> crap that breaks site design and bloats a site with one table up to 100kB.)

Answer 1

I just recently searched for an editor to create solid documentation, whose output is suitable for Subversion diffs: http://superuser.com/questions/126621/wysiwyg-editor-for-structured-text-suitable-for-svn-versioning

The editor that was suggested - "KompoZer" - turned out to be fantastic, especially because it generates very clean HTML (in my opinion). And I say that, although I had originally preferred something leaner than HTML.

P.S. Reading your question again, I'm not sure, what you mean with a "browser editor" - are you looking for an editor that can be integrated in an HTML page? KompoZer is based on a browser, but it can probably not be integrated in an HTML page.

Answer 2

I recently switched one of my projects to markdown to avoid this exact issue. There's still a bit of a learning curve for the users but I haven't had to deal with the usual issues that occur when they copy/paste content from Word and wonder why it blew up.

Having said that, I prefer CKEditor over TinyMCE and the Telerik controls. I've generally found it generates somewhat cleaner HTML.

Answer 3

What about WYMEditor?

WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

With WYMeditor, the code can't be contaminated by visual informations like font styles and weights, borders, colors, ... The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.

I've used it a little and while it takes quite a bit of tweaking if you have very specific needs, it does work out of the box for simple XHTML editing. If you set up specially annotated CSS files then it will detect the styles you want users to use and block level elements to which they apply. You can also tell it how to display these styles in the editor (which might be different from how you want them displayed in the resulting XHTML).

Of course, it generates XHTML, not HTML, so it may not meet your exact needs.

Answer 4

You can use Markdown with the WMD UI, it's the one used by Stack Overflow. It always produces valid HTML code.

Answer 5

Spaw2. Although it's kinda abandoned now.

Answer 6

There are several WYSIWG editors for embedding within your website out there.

WYMeditor (http://www.wymeditor.org/) looks very nice and seems to be a good fit for targetting clean and valid XHTML results.

Answer 7

The Apple Cocoa NSTextView class exports quite nice html, where all the fiddling is done through specifying a style sheet in the header. The Apple TextEdit editor uses this.

Answer 8

Download the current version of CKEditor and look at the XHTML output sample. It shows how to use full WYSIWYG but it doesn't generates font or styles. You just need to adjust the configuration to your needs.

Answer 9

http://tinymce.moxiecode.com/ - easy to use, can import form Word, and restrict formatting to predefined CSS styles, to provide consistent output.

Answer 10

Wikipedia has a category for them:

http://en.wikipedia.org/wiki/Category:JavaScript-based_HTML_editors