offensichtlich stößt Du hier mit einer plain/text-Eingabe an die Grenzen des für unbedarfte User Zumutbaren. Lohnt es nicht, hier einen WYSIWYG-Editor einzusetzen? So etwas wie den TinyMCE? Da kann man eigene Buttons definieren, die dann ein passendes Element (z.B.
<span class="key-c">C</span>
) in den gerade bearbeiteten Fließtext einfügen. Zusätzlich kann man vermeiden, dass da ungewolltes Markup entsteht.
In die Richtung wollte ich zunächst auch empfehlen, aber wieder davon abgelassen. Das wäre ganz klar der Königsweg, bringt aber auch einige Komplexität und Stolperfallen mit sich.
Würde es „nur“ darum gehen, mittels WYSIWYG etwas zu bauen, was dann eben WYSIWYG in der Bearbeitung so aussieht, wie später in der Darstellung im Browser: OK.
Aber ich unterstelle mal, dass der OP die WYSIWYG-Eingabe letztlich wieder in „Boomwhacker-Markup“ überführen möchte statt einfach das potentiell wüste HTML-Markup zu speichern. So etwas in der Richtung habe ich schon einmal gebaut, das war nicht trivial und für Linuchs vermutlich zu heftig.