Syntax-Editor

plentymarkets » CMS » Webdesign

 

CMS-Editoren

Ab der plentymarkets-Version 5.1 gibt es zur Bearbeitung von HTML-Inhalten wie Artikelbeschreibungen, Templates, Kategorien des Typs Content und E-Mail-Vorlagen neben dem bekannten Editor (CKEditor) und dem herkömmlichen Textfeld den neuen Syntax-Editor. Vereinfacht gesagt ist dieser die professionelle Alternative zum Textfeld, da er neben Syntax-Highlighting weitere Funktionen enthält, die den Komfort und die Produktivität bei der Bearbeitung von HTML-Inhalten enorm erhöhen.

Syntax-Editor-Verfügbarkeit
Wenn Sie im Menü Einstellungen » Grundeinstellungen » Editoren für bestimmte Bereiche den Syntax-Editor deaktiviert haben, steht der Syntax-Editor im Dropdown-Menü dieser Bereiche nicht zur Auswahl.

Wer sollte den Syntax-Editor benutzen und warum?

Der Syntax-Editor ist für jeden Anwender das ideale Werkzeug, der Wert auf ein sauber strukturiertes HTML legt. Beim Bearbeiten von HTML-Inhalten mit dem Editor, wie anspruchsvolleren Kombinationen aus HTML und Template-Variablen und -Funktionen, kann es z.B. beim Einfügen von Inhalten zu ungewollten Veränderungen kommen. Außerdem kann die Formatierung verloren gehen oder verändert werden. Der Editor liefert im Gegenzug valides HTML, um dessen Aufbau man sich nicht weiter kümmern braucht. Er ist daher für Anwendungsfälle gedacht, bei denen die HTML-Struktur nicht weiter wichtig ist, nicht ausreichend Fachwissen durch den Anwender vorhanden ist oder man sich schlicht nicht mit der Komplexität von HTML beschäftigen möchte.

Wer bisher Wert auf Detailtreue bei der Wiedergabe und dem Speichern von HTML-Inhalten gelegt hat, musste bis plentymarkets 5.0 mit dem Textfeld arbeiten. Das waren vor allem Agenturen, Webdesigner, Webentwickler und Benutzer, die sich Fachwissen angeeignet haben. Diese Anwender werden den neuen Syntax-Editor begrüßen.

Funktionen

Nachfolgend erhalten Sie eine Übersicht der Kern-Funktionen, die dann im Folgenden genauer erklärt werden.

Übersicht

Der Syntax-Editor bietet die folgenden Features:

  • Syntax-Highlighting
  • Einfache Strukturierung
  • Rückgängig machen und wiederholen
  • Suchen und Ersetzen
  • Kopieren / Duplizieren von Zeilen und Code-Blöcken
  • Verschieben von Zeilen und Code-Blöcken
  • Einfaches Aus- und Einkommentieren von Code-Blöcken
  • Multi-Cursor (gleichzeitiges Schreiben an mehreren Stellen gleichzeitig)
  • Code-Generierung mit Emmet
  • Viele helfende Tastenkombinationen

Syntax-Highlighting

HTML wird schlechter lesbar, je mehr Sie davon schreiben. Syntax-Highlighting hilft dabei, den Überblick zu behalten, indem Tags und Attribute verschiedenfarbig dargestellt werden.

Bild 1: Syntax-Highlighting durch den Syntax-Editor

Strukturierung

Die Codestruktur lässt sich einfacher erkennen und bearbeiten, wenn man bestimmte Teile des Codes mit der Tab-Taste ein- oder ausrückt. Es ist möglich, mehrere Zeilen auszuwählen und diese gleichzeitig ein- und auszurücken.

Funktion Aktion
Einrücken Tab-Taste
Ausrücken Shift + Tab-Taste

Tab. 1: Code ein- oder ausrücken

Einstellung: Leerzeichen statt Tabs

Über das Zahnrad (Bild 1, links oben) können Sie wählen, ob anstelle von Tabs 4 Leerzeichen für Einrückungen eingefügt werden sollen.

Rückgängig machen und wiederholen

Jede Handlung kann - auch nach dem Speichern - rückgängig gemacht oder wiederholt werden.

Funktion Aktion
Rückgängig Strg (cmd) + Z
Wiederholen Shift + Strg (cmd) + Z

Tab. 2: Bearbeitungsschritte rückgängig machen oder wiederholen

Nicht bei Wechsel des Editors

Diese Funktion ist nur möglich, wenn Sie durchgehend mit dem Syntax-Editor arbeiten. Bei Wechsel zu einem anderen Editor sind gespeicherte Informationen bzw. Änderungen verloren.

Suchen

Die Suchfunktion ermöglicht die gezielte Textsuche, wobei die Ergebnisse farblich hervorgehoben werden. Wenn es zu einer Sucheingabe kein Ergebnis gibt, wird dies durch einen roten Rahmen um das Suchfeld dargestellt.

Bild 2: Suchfunktion im Syntax-Editor

Die folgende Tabelle erläutert die Suchfunktionen des Syntax-Editors:

Funktion Aktion
Suchen Strg (cmd) + F
Weitersuchen Enter-Taste drücken oder im Suchfenster den Pfeil nach unten klicken
Rückwärts suchen Shift + Enter drücken oder im Suchfenster den Pfeil nach oben klicken
Suche schließen Esc-Taste oder im Suchfenster auf x klicken

Tab. 3: Bearbeitungsschritte Suchen, Weitersuchen oder Suche schließen

Suchen und Ersetzen

Der Syntax-Editor bietet auch eine Ersetzen-Funktion. Damit können Sie Wörter oder Textteile und somit z.B. auch Formatierungen suchen und durch die gewünschte Ersetzung austauschen. Die Ersetzenfunktion rufen Sie aus der Suchfunktion auf.

Bild 3: Suchen und Ersetzen mit dem Syntax-Editor

Die folgende Tabelle enthält eine Übersicht der Funktionen, wobei sich die drei unteren Optionen auf die Icons unten rechts im Suchfenster beziehen:

Funktion Aktion
Ersetzen-Funktion aufrufen Strg (cmd) + F
Bei geöffneter Suche nochmals eingeben oder 2 mal eingeben, wenn Suche nicht geöffnet ist
Suchwort eingeben Die gesuchte Bezeichnung, den Textteil oder das gesuchte Element eingeben.
Ersetzen Die Bezeichnung, den Textteil oder das Element eingeben, das die gefundenen Elemente ersetzen soll. Im Beispiel in Bild 3 werden strong-Formatierungen gesucht, die dann durch b-Formatierungen ersetzt werden sollen (= bold).
Replace Durch Klick auf diesen Button wird nur das markierte Element ersetzt.
All Durch Klick auf diesen Button werden alle Elemente der Seite oder des Textbereichs ersetzt.
.* Suche mit regulärem Ausdruck: Es wird anhand eines regulären Ausdrucks gesucht. Kann sich beim Suchen und Ersetzen komplizierter Ausdrücke und großen Inhalten auszahlen. Für die normale Anwendung nicht geeignet.
Aa Groß- und Kleinschreibung berücksichtigen: Es werden nur Begriffe gefunden, die der Groß- und Kleinschreibung exakt entsprechen.
\b Ganzes Wort: Es wird nur das vollständige Wort gesucht und keine Textteile.

Tab. 4: Suchen und Ersetzen mit dem Syntax-Editor

Kopieren von Zeilen und Blöcken

Die aktuelle Zeile oder die ausgewählten Zeilen können entweder verdoppelt werden oder nach oben oder unten kopiert werden.

Funktion Aktion
Verdoppeln Shift + Strg (cmd) + D
Nach oben kopieren Alt + Strg (cmd) + Pfeiltaste nach unten
Nach unten kopieren Alt + Strg (cmd) + Pfeiltaste nach oben

Tab. 5: Bearbeitungsschritte Verdoppeln, Nach oben kopieren oder Nach unten kopieren

Verschieben von Zeilen und Blöcken

Die aktuelle Zeile oder die ausgewählten Zeilen können zeilenweise nach oben oder nach unten verschoben werden.

Funktion Aktion
Nach oben verschieben Alt + Pfeiltaste nach oben
Nach unten verschieben Alt + Pfeiltaste nach unten

Tab. 6: Bearbeitungsschritte Nach oben verschieben oder Nach unten verschieben

Auswahl aus- oder einkommentieren

Sie können eine Auswahl aus- oder einkommentieren.

Funktion Aktion
Auskommentieren Shift + Strg (cmd) + 7
Einkommentieren Shift + Strg (cmd) + 7

Tab. 7: Bearbeitungsschritte Auskommentieren oder Einkommentieren

Multi-Cursor

Text kann an mehreren Stellen gleichzeitig geschrieben, geändert oder gelöscht werden.

Emmet-Plugin

Emmet ist eine Syntax-Sprache, die CSS-ähnliche Anweisungen in HTML-Code übersetzt. Es können damit sowohl einfache, als auch komplexe HTML-Strukturen sehr schnell erzeugt werden. Die Syntax muss ggf. erlernt werden. Für Benutzer, die sich mit CSS oder jQuery auskennen, wird es nicht viel neues sein. Wenn Sie oft und viel HTML schreiben müssen, lohnt es sich auf jeden Fall, wenn Sie sich das einmal ansehen!

Funktionsweise Emmet

Sie geben eine Emmet-Anweisung direkt in den Syntax-Editor ein und drücken die Tab-Taste. Der HTML-Code wird generiert.

Praxis-Beispiele

Die folgende Tabelle zeigt einige praktische Beispiele mit dem Emmet-Plugin im Syntax-Editor:

Eingabe Ergebnis
div>ul>li <div>
    <ul>
       <li></li>
    </ul>
</div>
div>ul>li>*5 <div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
div>ul#meineListe>li.meineCSSKlasse$*5 <div>
    <ul id="meineListe">
        <li class="meineCSSKlasse1"></li>
        <li class="meineCSSKlasse2"></li>
        <li class="meineCSSKlasse3"></li>
        <li class="meineCSSKlasse4"></li>
        <li class="meineCSSKlasse5"></li>
    </ul>
</div>

Tab. 7: Bearbeitungsbeispiele Emmet

Syntax-Dokumentation

Mehr Beispiele und die Syntax für komplexere Beispiele finden Sie hier: http://docs.emmet.io/abbreviations/syntax/

Tastenkombinationen

Neben den hier genannten Tastenkombinationen bietet plentymarkets weitere nützliche Tastenkombinationen, die benutzerspezifisch eingerichtet und genutzt werden können. Details dazu finden Sie in Kapitel 2.7 der Handbuchseite Benutzer bearbeiten.

Nach oben