50

Besides the new Google Docs, all the other WYSIWYG web-based rich text editors (ckeditor, tinymce, old Google Docs) I've seen are based on contenteditable or designMode. I personally hate using these editors. It doesn't take much formatting or copying/pasting before the whole experience turns into an exercise in frustration. Returns suddenly start getting double-spaced, unintended formatting gets introduced via pasting from other HTML sources, undo's/redo's are completely broken, formatting becomes excruciatingly difficult to control, etc.

I believe this is one of the reasons Google Docs introduced its own much more constrained, non-HTML formatting engine. Is there any open-source library out there that provides something similar? Thanks in advance.

Jeromy French
  • 11,372
  • 13
  • 67
  • 119
Yang
  • 15,052
  • 13
  • 96
  • 137
  • 11
    Hah, someone has extracted the (obfuscated) code and put up a working version of Kix on github: https://github.com/benjamn/kix-standalone (source: http://stackoverflow.com/questions/3315520/google-closure-editor-wysiwyg/4709155#4709155) – Idris Mokhtarzada Feb 17 '11 at 00:59
  • 1
    I just came across this blog post (http://bergie.iki.fi/blog/introducing_the_midgard_create_user_interface/) which mentions Aloha Editor (http://aloha-editor.org/). I believe it uses contentEditable, but looks like they may be moving away from that? It's worth taking a look at. – Idris Mokhtarzada Mar 03 '11 at 22:37
  • Refer to the answer at [http://stackoverflow.com/questions/4358901/how-to-implement-google-doc-like-text-editor/9625160#9625160][1] [1]: http://stackoverflow.com/questions/4358901/how-to-implement-google-doc-like-text-editor/9625160#9625160 – 12345 Mar 08 '12 at 21:29
  • see also http://stackoverflow.com/questions/491790/risk-of-using-contenteditable-in-ie – Ian Ringrose Oct 26 '12 at 10:46
  • In a lot of ways the least bad editor I have used on websites is the markup editor on stackoverflow, however it is not WYSIWYG, maybe WYSIWYG is more part of the problem, then the solution… – Ian Ringrose Oct 26 '12 at 10:49

3 Answers3

18

You could start with the Ace editor (formerly Bespin and Skywriter). It's aimed at code editing, so it's missing formatting and other features, but you may find a useful core of functionality to base a rich text editor on.

In action: http://ajaxorg.github.com/ace/build/editor.html

Code: https://github.com/ajaxorg/ace

Update: As @theazureshadow points out, the current editor doesn't use canvas as I originally reported. Bespin used canvas before it merged with Ace, which uses the DOM. Peeking briefly under the hood, it doesn't appear they are using contentEditable or designMode, though. (There's a <textarea /> that follows the cursor around and spans and divs to show the text - a bunch of custom JS to wire it all together, methinks.)

From ace.ajax.org > History:

Bespin started as part of Mozilla Labs and was based on the <canvas> tag, while Ace is the Editor component of the Cloud9 IDE and is using the DOM for rendering.

peteorpeter
  • 3,877
  • 2
  • 25
  • 45
  • 1
    The Ace editor does not currently use canvas. I don't know if it ever did. To confirm this, use these commands in a web inspector `document.querySelectorAll('.ace_line')` and `document.querySelectorAll('canvas')` at the url: http://ace.ajax.org/build/kitchen-sink.html – theazureshadow Feb 21 '12 at 19:19
  • @theazureshadow - Indeed it looks like my info was out of date. I updated the answer - thanks for keeping me honest! – peteorpeter Feb 22 '12 at 00:03
  • Gotta keep good answers good! :) – theazureshadow Feb 22 '12 at 02:35
  • 3
    I just want to point out that Ace editor is built around monospace fonts. Monospace fonts are all you would want for a code editor, but a general purpose rich text editor would require variable-width fonts and this would greatly increase the complexity. – Michael Bylstra Nov 11 '12 at 03:19
2

You're right: it's much nicer.

Is there an open-source library out there that provides [a document editor that doesn’t use the browser to handle editable text, instead using a custom editing surface and layout engine, entirely in JavaScript].

Doubtful.

First, the editor is dubbed "Kix". It's not non-HTML, but it doesn't use contentEditable because it sucks for what they're doing, as you mention. What it does is tricky and bulky to do right, and I'm sure it took them a good bit of effort to create it.

That said, why would Google open source Kix? It undermines their effort to be your documents hub, and it would mean they have to do a bunch of additional work to separate Kix from the rest of Google Docs in a way that doesn't leave it difficult to integrate. The benefit? Not much, seeing as though open source projects sponsored by Google are unlikely to see support in the form of developer-participation in improving it.

As for someone creating a library to do it, I'm doubtful it'll happen in open source. Usually open source projects that are a significant undertaking are university or company sponsored, and that's not likely in this case for the reasons above. Then again, if a developer has an itch for it, there's no telling where it could go…

coreyward
  • 68,091
  • 16
  • 122
  • 142
  • 1
    I'm confused by your "answer." I never suggested that I thought Google has a compelling reason to open-source Kix. Neither did I suggest that I thought an open-source implementation should surely exist. I was simply asking in the chance that something exists. Don't get me wrong - I wouldn't be surprised if it didn't. – Yang Jan 07 '11 at 23:00
  • 1
    Rather than give a short and unfulfilling "No" I figured I'd throw a bit of reasoning behind why I don't think there will be one. I didn't infer that you thought one should surely exist, so my apologies if my reply came off that I did. – coreyward Jan 08 '11 at 00:14
  • Unless a serious contender appears in the near future then the best approach would be to try and fix an existing editor. TinyMCE gets better with every release and is very configurable. My main issue with contenteditable is the lack of interest from Webkit contributors in fixing the flaws affecting contenteditable + webkit. – Andy Baker Feb 04 '11 at 10:07
0

There's HTE, unfortunately it is slow and misses a lot of basic selection functionality.

Arne de Bruijn
  • 541
  • 5
  • 9