Looking for an in-browser text editor with inline tokens

Question

I'm trying to build a system to allow users to generate a text template that can have specific, predefined tokens mixed into it, accessible through a browser. (Imagine a mail merge system, where the document is composed entirely of 2 things: static text, and tokens representing a database value.)

I would like to be able to insert it into a HTML page like an ordinary text box element, except that tokens are something distinct from text; they're their own element type, inserted inline into the typed text, and can't be edited or partially selected like text, only deleted, copied, cut, or pasted as an atomic item. It should have some way for the editor to retrieve a list of valid token values from the server when the page is loaded, and an intuitive way for the user to enter a new token at the position of the cursor.

I know I've seen things like this online in the past, but Googling around doesn't turn up anything useful. I find code editor libraries with syntax highlighting, or HTML WYSIWYG editing libraries, neither of which is what I'm actually looking for.

Does anyone know where I could find such a component?

Answer 1

I had the same requirement and so far have found a couple of options:

• Tokchi
• Textcomplete

Neither is ideal. Tokchi seems to be somewhat out of date (no npm / bower support, for example), and Textcomplete lets you choose from a drop down list but does not actual show the inserted text with token style (AFAICT).

Answer 2

This seems to simply be something similar to how BB Code and smileys work on most forums. Where the magic happens is on the back end, when the user generated input is put back out and the tokens are replaced with the db values. Almost all the time this is done via server side programming, not client side javascript,etc.

Any of the WYSIWYG editors you've found that allow you to customize menus will work - simply set up a custom "tokens" menu that has your predefined list of possible inserts.