JS text editor control with flexible dynamic visual styling capabilities

Question

I'm looking for a JS text editor control for any sane framework, that would allow me to color and otherwise style text in run-time as user types it in a custom markdownesque format.

Note that the actual format is quite different from Markdown, so I can't simply reuse some existing Markdown editor. Also, the purpose of this stuff is to help user with semi-structured data input, not fancy text formatting by itself.

In addition to styling text, I would like to be able to dynamically insert UI elements (say, buttons) in the text, again, depending on what user typed in.

I must also be able to send changes to the server-side in background, in some more-or-less effective way. I think that I would need to write some custom callbacks there anyway, but it would be cool if a control would provide a comfortable framework for that (or at least if it would not stand in my way).

Support for the usual features like undo/redo and copy/paste is, of course, a must.

A silly synthetic example to clarify what rules I want to be able to code:

The text:

-- Foo

    Bar {green}
    *Baz*

-- Alpha {red}

Styles:

• From line with Foo to line before Alpha: background color is green.
• Line with Alpha: red background
• Word *Baz* (along with asterisks) is in bold.
• Next to words Foo and Alpha: buttons with a trash can image, if pressed delete whole section of text from current -- to the next one.
• When user presses Return on line with --, cursor position on the next line is auto-indented.
• If user types -- at the beginning of (indented) line, new section is started and line is unindented. (Actual indentation characters /spaces/ must appear in the text.)

Note that I want these visual styles to be applied in the editor as user types. If, in the example, user changes {green} to {blue}, background color should be changed accordingly.

Answer 1

Check out the Yahoo Rich Text Editor. It's open source.