So markieren Sie Shortcodes im tinyMCE-Editor
Ich habe Shortcodes innerhalb des tinyMCE-Editors, die wie folgt in Klammern stehen:
%Vor%Ist es möglich, einen css-Laufzeitstil auf den Inhalt des tinyMCE-Editors anzuwenden, so dass jedes Element in Klammern (das ist in meiner Liste von shortcodes *) eine spezielle CSS-Behandlung erhält, um sie hervorzuheben?
Die Idee ist, dass die Shortcodes derzeit keine spezielle Farbe oder Formatierung haben, um sie von umgebenden Texten zu unterscheiden, und es kann schwierig sein, mit ihnen zu arbeiten, wenn sie nicht mehr herausragen.
Meine Liste der Shortcodes (Beispiel):
%Vor%Update: Ich werde nehmen, was ich hier bekommen kann, aber im Idealfall möchte ich nur Styling auf die Klammern anwenden, nicht den Text, um den die Klammern gewickelt sind. Daher möchte ich einen Laufzeit-CSS-Stil nur auf die Shortcode-Klammern anwenden: [my_shortcode] und [/ my_shortcode] zum Beispiel und belassen den Text, den sie alleine einschließen.
4 Antworten
Problem hier ist, dass Sie CSS nicht auf Teile des Textinhalts eines HTML-Elements anwenden können. Mein Lösungsansatz würde so aussehen: Sie müssen diese geschlossenen Tags in einen Bereich mit einer speziellen Klasse einfügen. Auf diese Weise können Ihre Shortcodes hervorgehoben werden. Wenn Sie Ihren Editor-Inhalt an den Server senden, müssen Sie die Spannen mit Ihrer speziellen Klasse entfernen und sie mit ihrem textContent ersetzen.
Der beste Weg, Hervorhebung für Shortcodes oder andere Elemente bereitzustellen, ist entweder ein benutzerdefiniertes Shortcode-Menü, das alle Shortcodes auflistet und sie in den hervorgehobenen Editorbereich einfügt oder besser einen Syntax-Highlighter verwendet, um html, css, javascript und Abkürzungen (nur im Rohmodus)
eine einfache Lösung dafür mit Codemirror ist hier:
Ссылка
Das Hervorheben von Shortcodes im Texteditor war lange Zeit ein großes ungelöstes Problem. Endlich gibt es ein Plugin, das genau das tut.
HTML-Editor-Syntax-Highlighter-Plugin
