CKEditor4: Make Text unterscheidet sich von seinem HTML

Question

Ich füge StrInsert Plugin zu meinem CKEditor. Es fügt im Grunde eine Schaltfläche hinzu, die in meinem Editor mit CRM Field gekennzeichnet ist.

Was der Knopf tut ist, wird es einen Wert an meinen Editor anhängen. Beispiel: Wenn ich im Dropdown-Menü auf $[FIRST_NAME] klicke, wird der Text ${__VCG__VAL__FIRST_NAME} an meinen Editor angehängt.

Warum habe ich das Dropdown-Feld $[FIRST_NAME] anstelle von ${__VCG__VAL__FIRST_NAME} benannt? Weil ich die HTML will <p>${__VCG__VAL__FIRST_NAME}</p> sein, während die text im Editor angezeigt $[FIRST_NAME]

ist wie in screenshot_2 gesehen, die HTML unter genau gezeigt ist, was ich will, aber anstatt zu zeigen, den Text ${__VCG__VAL__FIRST_NAME} Ich mag den Editor zeigen der Text $[FIRST_NAME]

Meine Frage ist, wie kann ich die HTML von der text unterscheiden, die im Editor für einige reservierte Schlüsselwörter gezeigt wird?

Answer 1

Ist ein Workaround in Ordnung? Wenn Sie die Daten posten und vorverarbeiten können, ist die Lösung einfach. Die eingehenden Daten vorverarbeiten, indem Sie ${__VCG__VAL__FIRST_NAME} durch $[FIRST_NAME] ersetzen und vor dem Speichern das Gegenteil tun.

Für eine ausgefallenere Methode mit komplizierter ersetzt hat aber ein schöneres UX, ich Widgets mit Code verwenden würde:

<p data-real="${__VCG__VAL__FIRST_NAME}">$[FIRST_NAME]</p> 

Sie würden ein Plugin erstellen, das mit einem data-real Attribute jeden P definiert als ein Widget. Dann würden Sie sie vor dem Speichern in das einfache P konvertieren, das Sie mögen, und beim Laden würden Sie das einfache P zurück in das Widget konvertieren. Der Vorteil ist, dass der Benutzer den Text nicht versehentlich bearbeiten kann und Drag & Drop einfach ist. Das Ersetzen sollte mit jquery zum Beispiel ziemlich einfach sein.

Ich weiß nicht, warum Sie wollen, dass sie Blockebene sind, würde ich mir vorstellen, dass Variablen wie diese inline schöner wären - aber das entspricht Ihren Anforderungen.

Widget Dokumentation http://docs.ckeditor.com/#!/guide/dev_widgets

Answer 2

Ich stimme mit Nenotleps. Wenn ein Benutzer die Eingabe des Editors bestätigt, ersetzen Sie einfach $[FIRST_NAME] durch <p>${__VCG__VAL__FIRST_NAME}</p>, und wenn einige Daten in den Editor geladen werden, machen Sie es umgekehrt.

Sie können den aktuellen Editor Inhalt in HTML erhalten mit editor.getData(), wo Editor ist Ihre ckeditor Instanz