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.
If the input should be editable by user, you should use this. Its totally on the client side, means that on browser side. Of course you should secure the value if its going to be sent to you server database.
HTML Editor for Drive™ - Google Workspace Marketplace. HTML WYSIWYG editor that provides you with an extended designing workspace to help you create your web pages(HTML,HTM) easily. The WYSIWYG (What You See Is What You Get) html editor is a office like text editor to simplify web content creation.
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.
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…
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With