Wie wird ein Element in einem TinyMCE-Editor als nicht editierbares Einzelelement behandelt?
In unserem CMS können unsere Benutzer Fehlermeldungen für Formulare mit TinyMCE bearbeiten. Das Problem besteht darin, dass einige dieser Nachrichten dynamische Daten erfordern, z. "Your chosen name 'X' is invalid" .
Dafür verwenden wir Token . Mit dem oben genannten Beispiel würde unser Benutzer "Your chosen name '{name}' is invalid" eingeben und beim Rendern ersetzen.
Ich schreibe gerade ein Plugin für TinyMCE , um dem Benutzer zu helfen, diese Tokens besser zu verwalten. Sie würden auf das Symbol klicken, ein Token aus einer vordefinierten Liste auswählen und es würde automatisch in den Inhalt eingefügt.
Das Problem ist, wie dieses Token im Content-Editor behandelt wird. Gegenwärtig ist es nur Text, der bearbeitet werden kann, aber was ich tun möchte, ist, dass TinyMCE es als einzelnes Element behandelt, damit es entfernt und verschoben werden kann, aber das eigentliche Token selbst kann nicht bearbeitet werden.
Ich habe versucht, das noneditable -Plugin zu verwenden, indem ich das Token in einem Bereich mit der mceNonEditable -Klasse umgebe, aber dies verhält sich nicht wie erwartet, z. Sie können das Token nicht rückgängig löschen, wenn sich das Token am Ende des Inhalts befindet, den Sie danach nicht eingeben können, usw.
Um zu verdeutlichen, möchte ich im Grunde, dass TinyMCE Text wie ein Bild behandelt. Es wäre ein fester Block, der auch als ein Zeichen / Element behandelt wird.
Ist das möglich?
Danke.
3 Antworten
Nachdem wir ungefähr 100 verschiedene Arbeitsumgebungen getestet haben, haben wir endlich eine Lösung gefunden, die funktioniert (für unsere Bedürfnisse sowieso).
Wir fügen eine deaktivierte Schaltfläche mit allen entfernten Stilen ein. Zum Beispiel
%Vor%Und dann etwas Code zu onGetContent () hinzufügen, um die Eingabe in einfachen Text zu konvertieren.
Diese Lösung, obwohl nicht sehr elegant,
- Bewirkt, dass sich das Token wie ein einzelnes Zeichen / Element verhält.
- Lässt es nur lesen.
- Ist im Kontext des Editors dynamisch, sodass wir unseren Token-Text anzeigen können.
Bearbeiten : Das ist es, was wir gefunden haben.
Sie könnten ein Bild-Tag als Token verwenden. Die Verwendung einer tinymce UI-Schaltfläche zum Einfügen dieses Bildes sollte funktionieren, wenn Sie es ersetzen, nachdem der Benutzer das Fehlermeldungsformular gesendet hat. Beispielsweise könnte das eingefügte Bild-Tag wie folgt aussehen:
%Vor% Auf diese Weise müssen Sie Bild-Tags nur durch die Klasse token1 nach dem Senden / Speichern ersetzen.
Tags und Links javascript html tinymce