Wie hervorzuheben Kurzwahlnummern in TinyMCE Editor

Ich habe Shortcodes innerhalb des TinyMCE-Editor, der in Klammern wie folgt eingeschlossen sind:Wie hervorzuheben Kurzwahlnummern in TinyMCE Editor

[my_shortcode]some text that gets parsed by my shortcode function[/my_shortcode]

Ist es möglich, eine Laufzeit Stil CSS den TinyMCE Editor Inhalte so, dass jedes Element anwenden Das ist in Klammern (das ist in meiner Liste der Shortcodes *) bekommt eine spezielle CSS-Behandlung, um sie hervorzuheben?

Die Idee ist, dass die Shortcodes derzeit keine spezielle Farbe oder Formatierung haben, um sie von umgebenden Text zu unterscheiden, und es kann schwierig sein, mit ihnen zu arbeiten, wenn sie nicht mehr herausstechen.

Meine Liste der Kurzwahlnummern (Beispiel):

[my_shortcode],[my_shortcode_2],[my_shortcode_3]

Update: Ich nehme, was ich auf diesen einen bekommen, sondern im Idealfall, ich will nur Styling auf die Klammern anzuwenden, nicht der Text, der Die Klammern sind umwickelt. Also würde ich gerne 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.

Quelle

2012-12-23 Scott B

Ich glaube nicht, dass es für diese Blöcke permanent Styling anwenden, wenn sie in Blöcke (Spannweiten oder andere Inline-Elemente) umgewandelt werden, werden möglich ist. Wie wäre es, sie nur auf Nachfrage zu markieren, mit ausgewiesener Taste? – raina77ow

WYSIWYG + Template-Tags = Katastrophe. Leute vermasseln immer Dinge, indem sie fett/kursiv/crapPastedFromWordDocument hinzufügen. Ich freue mich auf eine Antwort darauf, ich könnte es wirklich selbst benutzen - auch wenn es nur ein visueller Hinweis ist. Ich denke, dass dein Update ein bisschen viel verlangt, du solltest nehmen, was du bekommen kannst, weil ich nicht denke, dass es so einfach sein wird. –

@Wesley - Ich würde es vorziehen, nur den HTML-Code in vs Shortcode zu platzieren. Sobald ich Zeit habe, tiefer in die tinyMCE-API einzutauchen, kann ich Shortcodes umgehen und einfach den relevanten HTML-Code hinzufügen, den der Shortcode schließlich produziert. –

Sie könnten das KeyPress-Ereignis anzapfen und fügen Sie die Formatierung, wenn die eckigen Klammern in eingegeben werden.

http://www.tinymce.com/tryit/3_x/setup_editor_events.php

Quelle

2013-01-04 23:02:36 dfmiller

Problem hier ist, dass Sie nicht CSS Teile Textinhalt eines HTML-Element anwenden können. Mein Lösungsansatz würde so aussehen: Sie müssen diese geschlossenen Tags in einen Bereich mit einer speziellen Klasse einbinden. Auf diese Weise können Ihre Shortcodes hervorgehoben werden. Wenn Sie den Inhalt des Editors an den Server senden, müssen Sie die Spannen mit Ihrer speziellen Klasse entfernen und sie durch ihren textContent ersetzen.

Quelle

2013-01-07 15:26:48 Thariama

Die beste Möglichkeit, Hervorhebung für Shortcodes oder andere Elemente bereitzustellen, ist entweder ein benutzerdefiniertes Shortcode-Menü, das alle Shortcodes auflistet und in den Editorbereich einfügt oder besser mit einem Syntax-Highlighter html, css, javascript hervorhebt und shortocodes (nur wenn im raw-Modus)

~~eine einfache Lösung für diese Verwendung ist hier Codemirror: http://nikos-web-development.netai.net/blog/shortcodes-highlighting-overlay-in-codemirror/~~

Quelle

2013-01-14 14:07:57

Hervorhebungen im Kurzwahlnummer-Texteditor war lange Zeit ein großes ungelöstes Problem. Endlich gibt es ein Plugin, das genau das tut.

HTML Editor Syntax Highlighter Plugin