Auf der Suche nach einem In-Browser-Texteditor mit Inline-Token

Ich versuche, ein System aufzubauen, das es Benutzern ermöglicht, eine Textvorlage zu generieren, in die bestimmte, vordefinierte Tokens gemischt werden können, auf die über einen Browser zugegriffen werden kann. (Stellen Sie sich ein Serienbriefsystem vor, bei dem das Dokument vollständig aus zwei Dingen besteht: statischem Text und Token, die einen Datenbankwert darstellen.)

Ich würde es gerne wie ein gewöhnliches Textfeldelement in eine HTML-Seite einfügen können, außer dass Token etwas anderes sind als Text; Sie sind ihr eigener Elementtyp, werden inline in den eingegebenen Text eingefügt und können nicht wie Text bearbeitet oder teilweise ausgewählt, sondern nur als atomare Elemente gelöscht, kopiert, ausgeschnitten oder eingefügt werden. Es sollte eine Möglichkeit für den Editor bieten, eine Liste gültiger Tokenwerte vom Server abzurufen, wenn die Seite geladen wird, und eine intuitive Möglichkeit für den Benutzer, ein neues Token an der Position des Cursors einzugeben.

Ich weiß, dass ich solche Dinge in der Vergangenheit online gesehen habe, aber das Googeln bringt nichts Brauchbares. Ich finde Code-Editor-Bibliotheken mit Syntaxhervorhebung oder HTML-WYSIWYG-Bearbeitungsbibliotheken, beides ist nicht das, wonach ich eigentlich suche.

Weiß jemand wo ich so ein Bauteil finden kann?

Auch wenn ich die Frage nicht ganz verstehe. Kann ein Markdown-Editor wie stackedit helfen?

Antworten (2)

Ich hatte die gleiche Anforderung und habe bisher ein paar Optionen gefunden:

Beides ist nicht ideal. Tokchi scheint etwas veraltet zu sein (z. B. keine npm / bower-Unterstützung), und Textcomplete lässt Sie aus einer Dropdown-Liste auswählen, zeigt den eingefügten Text jedoch nicht im Token-Stil (AFAICT).

Dies scheint einfach etwas Ähnliches zu sein, wie BB-Code und Smileys in den meisten Foren funktionieren. Wo die Magie passiert, ist am Backend, wenn die vom Benutzer generierte Eingabe wieder ausgegeben und die Token durch die db-Werte ersetzt werden. Fast immer erfolgt dies über die serverseitige Programmierung, nicht über das clientseitige Javascript usw.

Jeder der WYSIWYG-Editoren, die Sie gefunden haben und mit denen Sie Menüs anpassen können, funktioniert - richten Sie einfach ein benutzerdefiniertes "Token"-Menü ein, das Ihre vordefinierte Liste möglicher Einfügungen enthält.