Are there any alternatives to using contenteditable or a textarea?

Question

I am working on an online rich-text editor, similar to the WordPress page creator, or the Stack Overflow post creator. It has been pointed out that there are two distinct types of online rich-text editors:

1. WYSIWYG editors, and
2. HTML editors

I'm building the second type. Unfortunately, neither <textarea> nor using contenteditable are very convenient for HTML rich-text editing.

The problem with <textarea> (as used here in Stack Overflow) is that you can't show text-level semantics in the edit field. You can't just highlight a word and make it bold, you have to insert some kind of markup (e.g. *****bold*****). Not very user friendly and not really "rich" text either.

On the other hand, using contenteditable solves those problems but introduces a problem of control. Browsers will insert all sorts of HTML and CSS to make the edit field look good. If you hit Enter, the browser will insert <p>, or <div>, or <br>, or <div><br></div>... depending on the browser. If you paste in a few paragraphs copied from HTML, you get tons of excessive markup--beyond what was even in the source HTML. For example, the following source code:

<p>This is one paragraph!</p>
<p>This is another.</p>

Shows up on a website as:

This is one paragraph!

This is another.

...which, if you copy and paste into a contenteditable form, can give you something like this:

<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px; 
white-space: normal;">This is another.</p>

...bringing inline styles with it, and in some cases additional HTML.

I've been trying to figure out how to limit and control the amount of HTML that the browser inserts in a contenteditable element, but I am beginning to think that contenteditable is only suited for WYSIWYG type editing, and will never work for HTML style rich-text editing.

Is there a third alternative, or has anyone built some sort of Javascript editor that meets my needs?

Answer 1

The alternative is to code it all by yourself using click events on normal divs, and so on. There are a lot of things that would need to be done using this approach and there are a lot of questions on stack overflowthat would help, including setting up all event handlers & handling adding a caret when they click on a location in text [1], keypress events for everything including Enter, Backspace, Delete, all alphanumeric keys, and the rest. You would need to create the caret as a visual element when they clicked something, enter text when they typed, delete text when they hit backspace, enter newlines when Enter is pressed, and so on. Google Docs and Online Word probably use this approach, but it is a massive amount of work and I don't know of any open source libraries that implement it, but it would give you full control of everything, including formatting of everything (since you would be entering it all).

[1] Detect which word has been clicked on within a text