Editor-Rundgang

Der Editor baut auf Monaco auf, der Editor-Komponente von VS Code, und er kennt Ihre Daten: Er liest die Beispieldaten der Vorlage und nutzt sie für Autovervollständigung, Diagnosen und die Vorschau.

Die Seite hat drei Teile. Die Leiste links wechselt zwischen den Panels des Editors: Code (die Tabs Vorlage, CSS, Head, Kopfzeile und Fußzeile), Daten und Schema, Übersetzungen, Seiteneinrichtung (Papier, Ränder und die übrigen Einstellungen), Versionen und API; Bildvorlagen haben außerdem Design, den visuellen Editor. Das Dreieck unten in der Leiste öffnet die Problemliste. In der Mitte steht das gewählte Panel, rechts die Vorschau, und die Statusleiste unten nennt Engine, Papier, Cursorposition, die Zahl der Probleme und den verwendeten Datensatz.

Autovervollständigung aus Ihren Daten

Tippen Sie {{ invoice., und der Editor bietet die Felder Ihrer Beispieldaten mit ihrem Typ an. Ein weiteres Strg+Leertaste öffnet neben der Liste die Details, die den Beispielwert jedes Felds zeigen.

Diagnosen

Nicht geschlossene Tags, unbekannte Filter und Variablen, die in den Beispieldaten fehlen, werden beim Tippen unterstrichen. Die Leiste unter dem Code zählt Fehler und Warnungen und nennt die erste Meldung; ein Klick darauf öffnet die ganze Liste, ein Klick auf ein Problem springt zu seiner Zeile. F8 springt zum nächsten Problem.

Fehler sind, was ein Rendering scheitern ließe (ein unbekannter Filter, ein Tag, das sich nicht lesen lässt); Warnungen verdienen einen Blick, rendern aber (eine Variable, die in Ihren Beispieldaten fehlt, wird leer ausgegeben).

Bausteine

Bausteine am Anfang der Tab-Leiste öffnet neben dem Code eine Bibliothek fertiger Teile: Briefkopf, Anschriftfeld für Fensterumschläge, Rechnungstabelle, Summenblock, Zahlungsbedingungen, SEPA-Zahlungs-QR-Code, Unterschriftszeile, Seitenumbruch und mehr, danach die geteilten Partials Ihrer Organisation. Suchen Sie nach dem Namen, zeigen Sie auf einen Baustein, um seine Vorschau zu sehen, und fügen Sie ihn per Klick an der Cursorposition ein. Ein Baustein bringt das CSS mit, das er braucht, und ergänzt die Beispieldaten und Übersetzungen, die er liest, sodass die Vorschau ihn sofort zeigt.

Paginierte Vorschau

Der Schalter über der Vorschau hat drei Modi:

Modus	Zeigt
Fließend	Das Dokument als eine lange Seite, beim Tippen in Ihrem Browser gerendert
Seiten	Echte Seiten mit Kopf- und Fußzeilen und Seitenzahlen, in Ihrem Browser gerendert (nur PDF-Vorlagen)
Echtes Rendering	Die Datei, die die Render-Server erzeugen, nachdem Sie auf Rendern geklickt haben (siehe Echtes Rendering)

In der Fluss- und der Seitenvorschau klicken Sie auf ein Element, und der Editor öffnet die Zeile, die es erzeugt hat, im Tab Kopfzeile oder Fußzeile, wenn es von dort stammt.

Die Fluss- und die Seitenvorschau zoomen Sie mit den Schaltflächen darüber, mit Strg und dem Mausrad (oder zwei Fingern auf dem Touchpad) oder mit Strg und +, - und 0. Das echte Rendering zeigt das PDF im Viewer des Browsers, der seinen eigenen Zoom hat.

Text in der Vorschau bearbeiten

Um den Wortlaut zu ändern, ohne den Code zu lesen, schalten Sie Text bearbeiten ein (der Stift über der Vorschau oder Text in der Vorschau bearbeiten in der Befehlspalette). Bearbeitbarer Text wird umrandet, sobald Sie darauf zeigen; klicken Sie darauf und tippen Sie.

• Werte bleiben Werte. Eine Variable wie {{ customer.name }} zeigt ihren Wert aus den Beispieldaten als hervorgehobenen Chip. Sie können davor und dahinter tippen oder den Chip löschen, der Ausdruck bleibt aber, wie er geschrieben ist. Eine Überschrift, die nur aus einer Variable besteht, verhält sich genauso: Der Chip steht allein, Sie ergänzen Text davor oder dahinter, und den Wert selbst ändern Sie in den Daten. Dasselbe gilt für Auszeichnungen im Text wie <strong> oder einen Link: Klicken Sie darauf, um deren eigenen Text zu bearbeiten.
• Enter oder Tab übernimmt, Escape verwirft. Umschalt+Enter beginnt eine neue Zeile. Die Änderung landet in der Vorlage wie eine im Code getippte: Sie ist ungespeichert und lässt sich mit Strg+Z rückgängig machen, in der Vorschau wie im Code.
• Übersetzter Text ändert das Wörterbuch. Besteht der ganze Text aus einem t()-Aufruf, ändert die Bearbeitung die Übersetzung der Sprache, die die Vorschau zeigt (die Locale der Vorlage). Hatte diese Sprache noch keinen Text und die Vorschau zeigte Englisch, wird Ihr Text die neue Übersetzung für diese Sprache; das Englische bleibt, wie es war.
• Wiederholter Text ändert sich überall. Text in einer Schleife steht einmal in der Vorlage; wer eine Zeile ändert, ändert alle. Ein Hinweis über dem Text sagt, wie viele.
• Mancher Text bleibt im Code. Text mit einem if oder einer Schleife darin, Text, den ein Helfer oder ein Partial schreibt, und Elemente, die weitere Blöcke enthalten, bearbeiten Sie im Code; ein Klick darauf öffnet ihre Zeile wie außerhalb des Bearbeitungsmodus. Die Texte des Brand Kits, etwa die Pflichtangaben in der Fußzeile, ändern Sie auf der Seite Marke.

Bearbeiten dürfen Inhaber, Admins und Editoren. Ein Text, den die Seitenvorschau auf zwei Seiten verteilt, wird in der Flussvorschau bearbeitet.

Echtes Rendering

Ein Klick auf Rendern (oder Strg+Enter) rendert, was im Editor geöffnet ist, ungespeicherte Änderungen eingeschlossen, auf unseren Servern mit dem gewählten Datensatz und zeigt das exakte PDF oder Bild, darunter Dauer, Größe und Seitenzahl des Renderings. Das kostet nichts; im Free-Plan trägt das Ergebnis eine kleine Testmarkierung, eine E-Rechnung trägt sie in jedem Plan.

Datensätze

Legen Sie pro Vorlage mehrere benannte Datensätze mit Beispieldaten an (eine Zeile, fünfzig Zeilen, fehlende optionale Felder) und wechseln Sie in der Liste des Panels Daten und Schema zwischen ihnen. Beispieldaten verlassen den Editor nie: Sie speisen Vorschau, Autovervollständigung und das abgeleitete Schema, während ein API-Rendering immer die Daten aus der Anfrage verwendet. Vorschau und Schema folgen dem gewählten Datensatz. default ist der, mit dem eine Vorlage beginnt; die API verwendet ihn nur, wo ein Aufruf keine eigenen Daten mitbringt (POST /templates/{id}/validate ohne data und das Schema, das sie für eine Vorlage ohne gespeichertes Schema ableitet). Die Kommandozeile sieht jeden Datensatz als data/*.json-Datei.

Mehr im Editor

• Brand Kit und geteilte Partials. Vorschau und echtes Rendering verwenden das Brand Kit und die geteilten Partials der Organisation; die Autovervollständigung bietet brand.* und die Namen geteilter Partials an, und die Problemliste meldet, wenn ein mit der Vorlage gespeichertes Partial ein geteiltes verdeckt.
• Verlauf und Diff. Jede gespeicherte Version bleibt erhalten. Das Panel Versionen zeigt oben die Arbeitskopie, dann die Release Channels, dann jede gespeicherte Version mit ihrer Notiz und dem, der sie gespeichert hat. Vergleichen stellt eine gespeicherte Version neben das, was im Editor geöffnet ist, Als neuen Entwurf wiederherstellen speichert ihren Inhalt als neue Version, und Veröffentlichen macht sie zu der, die die API rendert. Das Panel listet die neuesten fünfzig, und Ältere Versionen anzeigen darunter holt die übrigen, jeweils fünfzig.
• Word- und PowerPoint-Vorlagen öffnen statt des Code-Editors eine eigene Seite, mit einer Schnellvorschau für Word-Dokumente und dem echten Rendering als PDF. Siehe Word- und PowerPoint-Vorlagen.
• Suche und Befehle. Strg+K (⌘K auf dem Mac) öffnet auf jeder Seite ein Suchfeld. Es findet die Befehle der Seite, auf der Sie sind (speichern, veröffentlichen, Verlauf, echtes Rendering, Vorschaumodus, Zoom, ein Tab, ein Datensatz, ein Baustein), Ihre Vorlagen, die Beispiele, geteilte Partials, Dateien, API-Schlüssel (nach Name und Präfix), Webhook-Endpunkte (nach Adresse), die Mitglieder Ihrer Organisation (nach Name und E-Mail), die Seiten der App und die Abschnitte von Einstellungen, Abrechnung und Marke sowie die wichtigsten Seiten der Dokumentation. Die Wörter dürfen in beliebiger Reihenfolge stehen, Umlaute müssen nicht getippt werden; der passende Teil jedes Treffers ist hervorgehoben. Ohne Eingabe beginnt das Feld mit den zuletzt geöffneten Vorlagen.
• Suche eingrenzen. Tippen Sie #, um nur Vorlagen zu durchsuchen, > für Befehle, / für Seiten und Einstellungen, ? für die Hilfe; die Rücktaste im leeren Feld führt zurück zu allem. Eine eingefügte Rendering-ID (rnd_…) oder Vorlagen-ID (tpl_…) öffnet dieses Rendering oder diese Vorlage. Ein eingefügter API-Schlüssel findet den Schlüssel, zu dem er gehört, an seinen ersten Zeichen, nur in Ihrem Browser: Für ihn wird nichts gesendet.
• Was Sie mit einer Vorlage tun können. → auf einer Vorlage zeigt ihre Aktionen: sie im Editor öffnen, ihren API-Tab öffnen, ihre Renderings sehen oder ihren Slug oder ihre ID kopieren. ← führt zurück zu den Treffern. Inhaber und Admins finden außerdem API-Schlüssel anlegen, Webhook-Endpunkt hinzufügen und Mitglieder einladen, die diese Seite mit ihrem Dialog oder ihrem Einladungsfeld öffnen.

Tastenkürzel

Das Suchfeld zeigt das Kürzel neben jedem Befehl an, Strg+K ist also auch der schnellste Weg, eines nachzuschlagen.

Kürzel	Wirkung
Strg+K / ⌘K	Suchfeld öffnen. Funktioniert auf jeder Seite und auch im Editor.
↑ / ↓, Bild↑ / Bild↓	Im Suchfeld: durch die Treffer gehen oder zur nächsten oder vorigen Gruppe springen.
Enter, Strg+Enter / ⌘Enter	Im Suchfeld: den markierten Treffer öffnen oder ihn in einem neuen Tab öffnen.
→ / ←	Im Suchfeld: die Aktionen der markierten Vorlage zeigen oder zurück zu den Treffern gehen.
Strg+S / ⌘S	Version speichern: öffnet den Dialog Version speichern mit einer optionalen Notiz. Der Speichern-Dialog des Browsers bleibt außen vor.
Strg+Enter / ⌘Enter	Echtes Rendering: rendern, was im Editor geöffnet ist, auf unseren Servern.
Umschalt+Alt+F	Aktuellen Tab formatieren.
F8	Zum nächsten Problem springen.
Strg+Umschalt+M / ⌘⇧M	Problemliste öffnen oder schließen.
Strg+Alt+→ / Strg+Alt+←	Nächster oder vorheriger Code-Tab (Vorlage, CSS, Head, Kopfzeile, Fußzeile).
Strg+\ / ⌘\	Code-Bereich ein- oder ausklappen; auf einem schmalen Bildschirm zwischen Code und Vorschau wechseln.
Strg+Mausrad / ⌘+Mausrad	Vorschau vergrößern oder verkleinern.
Strg + + / - / 0	Vorschau vergrößern, verkleinern oder auf 100 % zurücksetzen, solange die Vorschau den Fokus hat.
Escape	Suchfeld, einen Dialog oder die Bausteine schließen; in der Vorschau eine Textbearbeitung verwerfen.

Umschalt+Alt+F wirkt auf jedem Code-Tab. Daten und Übersetzungen werden als JSON formatiert, CSS als CSS, und Vorlage, Head, Kopfzeile und Fußzeile als HTML. Dabei bleiben {{ ... }}, {% ... %} und {# ... #} genau so, wie sie sind; das Neueinrücken verschiebt also nie ein Engine-Tag.

Im Codebereich funktioniert außerdem jedes Monaco-Kürzel: Strg+F zum Suchen, Strg+H zum Ersetzen, Alt+↑/Alt+↓ zum Verschieben einer Zeile, Strg+/ zum Auskommentieren, F1 für Monacos eigene Befehlsliste.

Die Vorlagenliste

Die Seite Vorlagen listet alle Vorlagen des Workspace. Neben jedem Slug kopieren zwei kleine Schaltflächen den Slug und die Vorlagen-ID, die beiden Wege, auf denen ein API-Aufruf eine Vorlage nennt. API-Anfrage im Menü einer Zeile öffnet die Vorlage in ihrem API-Panel.

Mit den Kontrollkästchen bearbeiten Sie mehrere Vorlagen auf einmal: Archivieren… nimmt sie aus der Liste, und ihre API-Renderings schlagen mit 404 template_not_found fehl, bis Sie sie wiederherstellen; Renderings und Ausgaben von vorher bleiben. Ist Archiviert eingeschaltet, bietet dieselbe Leiste Wiederherstellen und für Inhaber und Admins Endgültig löschen…, das nach Eingabe der Bestätigung Versionen, Kanäle und gespeicherte Dateien entfernt. Löschen lassen sich nur archivierte Vorlagen, und eine gelöschte Vorlage lässt sich nicht wiederherstellen. Renderings behalten ihre Log-Einträge.

Vom Editor in Ihren Code

Der Editor arbeitet mit Entwürfen; die API rendert die veröffentlichte Version. Speichern Sie mit Strg+S, so oft Sie möchten; für Ihre Integration ändert sich nichts, bis Sie veröffentlichen.

Im Panel API, dem letzten Eintrag der Leiste, trifft die geöffnete Vorlage auf Ihren Code. Word- und PowerPoint-Vorlagen haben es als Tab ihrer Seite.

• Welche Version ein Aufruf rendert. Die erste Zeile nennt die veröffentlichte Version und sagt, was nicht enthalten ist: eine neuere gespeicherte Version oder Änderungen, die Sie noch nicht gespeichert haben. Liegt ein gespeicherter Entwurf vor der veröffentlichten Version, bietet ein Schalter ihn an; die Anfrage enthält dann "version": "latest", was die API nur von Test-Schlüsseln annimmt.
• Die Anfrage für diese Vorlage, in curl, TypeScript, Python, PHP, Go, C#, Java und Ruby. Sie nennt den Slug der Vorlage, liest den Schlüssel aus FORMFEED_API_KEY und die Daten aus data.json. Was ein Rendering sonst noch mitbekommen kann, steht unter Rendering.
• data.json ist der Datensatz, den der Editor zeigt, zum Kopieren oder Herunterladen. Er hat die Form, die Ihr Code sendet; an seine Stelle treten Ihre eigenen Daten.
• Ein Schlüssel. Hat der Workspace keinen Test-Schlüssel, legen Inhaber und Admins mit einem Klick einen an. Sein Geheimnis wird einmal angezeigt, als die export-Zeile, die eine Shell braucht, und ist verschwunden, sobald Sie das Panel verlassen. Ein vorhandener Test-Schlüssel wird mit seinem Präfix genannt, denn ein Geheimnis lässt sich nicht zweimal anzeigen.
• Testanfrage senden schickt die Anfrage, die Sie sehen, durch die API und zeigt, was zurückkommt: die Datei, das Rendering im Render-Protokoll und das JSON, das Ihr Code in der Hand hält, oder das Problem mit der Seite zu seinem Code. Es ist ein Test-Rendering, wie ein Test-Schlüssel es erzeugt: kostenlos, 24 Stunden aufbewahrt, im Free-Plan mit der Testmarkierung, und es darf den neuesten Entwurf rendern. Einen Schlüssel braucht es nicht, denn die App sendet es mit Ihrer Sitzung. Inhaber, Admins und Editoren können es senden.

?panel=api an der Adresse einer Vorlage öffnet sie in diesem Panel.