Josh On Design

Semantic-Editor-JS (hereafter called SE), is a new open source library for building rich text editors. You can play with the demo or get the code on Github.

Another rich text editor for the web? Don’t we have enough?

True, there are certainly a editor libraries lot out there already, but I feel we need one more. I created SE because I grew frustrated with the lack of customization of existing editors. While they all give you the easy things like keybindings and toolbars, none of them made it easy to define new tags, control the generated CSS, or give you a generic model to support annotations.

SE is different than other editors in a few ways

SE is a core library for building editors, it has no GUI of it’s own beyond the DIV used for the rich text. The demo app uses React and Bootstrap, but there is no  GUI specific code in the library.

SE supports the semantic tags you choose. Use strong instead of bold. Make block-code distinct from inline-code. Make up new tags that do what you want.  You control both the model and the rendered CSS. The demo app has links with hrefs below, glossary defs,and code blocks. These are specific to that app and can easily be added or removed.

Import control: when importing existing HTML or when a user pastes in content from the clipboard, you can control how the markup is converted to your own semantic model.

The model supports annotations. Each node has a ‘meta’ object where you can put whatever you want. You could use it to store the language of your code blocks, or the definition of your glossary term.  Even Word-style comments.

SE is still very buggy, as the demo shows, but I think it has a lot of potential. While it uses content-editable, the model is stored internally, not in the DOM. SE syncs the model to the DOM when the user types. This ensures consistent behavior between browsers, proper undo/redo support, and allows far more customization. I could have gone all the way to custom rendering, but using content-editable gives us access to the browser’s input method support for other languages and custom glyph support (ex: press Option-X on Mac for the ≈ sign).

I use SE for my own custom blog editor, and have plans for some experimental book editors. Let me know what you'd like to use it for? I'm happy to add features and fix bugs.