Einführung in DatoCMS Visual Editing

Was ist DatoCMS Visual Editing?

DatoCMS Visual Editing ist eine revolutionäre Funktion, die entwickelt wurde, um die Trennung zwischen Inhaltserstellung und Inhaltpräsentation zu beseitigen, die bei traditionellen Headless-CMS-Workflows inhärent ist. Anstatt Content-Redakteure zu zwingen, komplexe Backend-Formulare zu durchsuchen und zu raten, welches Feld welchem Element auf der Seite entspricht, ermöglicht Visual Editing die direkte Interaktion mit der Live-Website-Vorschau. Diese Funktion bringt das intuitive „What You See Is What You Get“ (WYSIWYG)-Erlebnis direkt in die Headless-Umgebung und stellt sicher, dass Inhaltsänderungen schnell, genau und kontextbewusst sind. Sie verschiebt die Denkweise des Redakteurs grundlegend vom Verwalten von Datenmodellen hin zum Verwalten von Seiten und Beiträgen.

Diese leistungsstarke Funktion wird durch zwei unterschiedliche, sich aber ergänzende Workflows unterstützt: Click-to-edit (Content Link) und Side-by-Side-Bearbeitung (Visual Mode). Entscheidend ist, dass diese Funktionalität in allen DatoCMS-Plänen, einschließlich der kostenlosen Stufe, verfügbar ist und durch spezielle SDKs für moderne Frontend-Frameworks wie Next.js, Astro, Svelte und Vue unterstützt wird, was die Einführung für bestehende und neue Projekte nahtlos macht.

Hauptmerkmale

• Click-to-Edit (Content Link): Redakteure besuchen die Live-Seite im Entwurfsmodus, fahren mit der Maus über bearbeitbaren Inhalt und klicken, um das entsprechende Feld in DatoCMS sofort in einem neuen Tab zu öffnen. Dies funktioniert vollständig im Frontend, unabhängig vom Hosting (Vercel, Netlify, Cloudflare).
• Side-by-Side Visual Mode: Eine erweiterte Version des Web Previews Plugins, die die Website-Vorschau auf der einen Seite und das Bearbeitungsfenster direkt daneben anzeigt. Das Klicken auf Inhalte öffnet sofort das relevante Bearbeitungsfenster, ohne dass der Kontext gewechselt werden muss.
• Steganography Backend: Das System verwendet unsichtbare Unicode-Zeichen, die an GraphQL-API-Antworten angehängt werden, um die Ursprungsmetadaten (Datensatz-ID, Feldpfad, Locale) jedes Inhaltsteils zu kodieren. Dadurch kann das Frontend Klicks automatisch der richtigen Datenquelle zuordnen, ohne dass eine manuelle Entwicklerverbindung erforderlich ist.
• Bidirektionale Kontextsynchronisation: Im Side-by-Side-Modus hält das Scrollen im Vorschaufenster das Bearbeitungsfenster synchron und umgekehrt, wodurch der perfekte Kontext bei komplexen Bearbeitungen beibehalten wird.
• Universelle Kompatibilität: Funktioniert sofort mit komplexen Inhaltsstrukturen, einschließlich Links zu Datensätzen, modularen Blöcken, Structured Text und lokalisierten Feldern.
• Framework SDK-Unterstützung: Spezielle SDKs für wichtige Frameworks (React/Next.js, Astro, Svelte/SvelteKit, Vue/Nuxt) vereinfachen die Implementierung und basieren auf der Framework-unabhängigen Bibliothek @datocms/content-link.

So verwenden Sie DatoCMS Visual Editing

Der Einstieg in Visual Editing ist auf ein Minimum reduziert und erfordert nur drei Hauptschritte für Entwickler, um die Erfahrung für ihre Content-Teams zu ermöglichen:

1. Stega-Kodierung aktivieren: Wenn Sie Entwurfs-Inhalte über GraphQL abrufen, fügen Sie zwei bestimmte Header zu Ihren Anfragen hinzu: X-Visual-Editing: v1 und X-Base-Editing-Url: https://<IHR-PROJEKTNAME>.admin.datocms.com.
2. ContentLink-Komponente integrieren: Fügen Sie die Framework-spezifische <ContentLink />-Komponente in Ihre Hauptlayoutdatei ein. Diese Komponente scannt automatisch das gerenderte DOM nach den eingebetteten steganografischen Metadaten und rendert die notwendigen Bearbeitungs-Overlays.
3. Side-by-Side-Bearbeitung freischalten (Optional, aber empfohlen): Installieren und konfigurieren Sie das Web Previews Plugin in Ihren DatoCMS-Projekteinstellungen, um die hochgradig effiziente Side-by-Side-Bearbeitungsschnittstelle direkt in der CMS-Seitenleiste zu aktivieren.

Nach der Konfiguration navigieren Redakteure einfach zur Website im Entwurfsmodus (oder öffnen die CMS-Oberfläche) und beginnen, auf die Inhalte zu klicken, die sie bearbeiten möchten, wobei sie ihre Änderungen sofort sehen oder zur Bearbeitung bereit sind.

Anwendungsfälle

1. Hochgeschwindigkeits-Marketingteams: Teams, die häufige Kampagnen oder Landingpages starten, können Kopien und Bilder direkt in der Seitenvorschau schnell iterieren, wodurch die Zeit für die Koordination zwischen Design-, Entwicklungs- und Content-Teams drastisch reduziert wird.
2. Komplexe E-Commerce-Produktseiten: Redakteure, die Seiten mit tief verschachtelten modularen Inhalten verwalten (z. B. Produktbeschreibungen, Feature-Blöcke, Spezifikationen), können direkt auf den spezifischen Abschnitt klicken, den sie aktualisieren müssen, ohne manuell Dutzende von Inhaltseinträgen durchsuchen zu müssen.
3. Mehrsprachige Inhaltsverwaltung: Für Websites, die mehrere Sprachen unterstützen, stellt Visual Editing sicher, dass Redakteure die korrekte lokalisierte Version des Inhalts bearbeiten, da die Metadaten Informationen zur Sprache enthalten, wodurch versehentliches Überschreiben übersetzter Zeichenfolgen verhindert wird.
4. Agenturentwicklung & Kundenübergabe: Agenturen können Projekte mit aktivierter Visual Editing bereitstellen und Kunden eine sofort intuitive Bearbeitungserfahrung bieten, wodurch die Schulungszeit minimiert und Supportanfragen im Zusammenhang mit dem Auffinden von Inhalten reduziert werden.
5. Iteratives Design & Content-Kopplung: Entwickler und Designer können in Echtzeit mit Content-Redakteuren zusammenarbeiten. Sobald neue Komponenten erstellt wurden, können Redakteure sie sofort mit produktionsreifen Inhalten über die visuelle Oberfläche befüllen.

FAQ

F: Ist Visual Editing nur in kostenpflichtigen Plänen verfügbar? A: Nein. DatoCMS hat Visual Editing für jeden Plan verfügbar gemacht, einschließlich des kostenlosen Plans, um sicherzustellen, dass alle Benutzer von dieser verbesserten Bearbeitungserfahrung profitieren können, ohne upgraden zu müssen.

F: Was passiert, wenn ich ein Framework verwende, das nicht explizit aufgeführt ist (z. B. Remix)? A: Alle offiziellen SDKs basieren auf der Framework-unabhängigen Bibliothek @datocms/content-link. Sie können diese Kernbibliothek direkt in jede Frontend-Einrichtung integrieren, um dieselbe Funktionalität zu erzielen.

F: Muss ich jedes einzelne Stück Inhalt manuell seinem Feld zuordnen? A: Absolut nicht. Die Kerninnovation ist die Steganografie-Technik, die automatisch Ursprungsmetadaten an Ihre GraphQL-Antworten anhängt. Die <ContentLink />-Komponente scannt diese Metadaten und verdrahtet die Bearbeitungs-Overlays automatisch, wodurch eine mühsame manuelle Konfiguration entfällt.

F: Kann ich Visual Editing mit meiner bestehenden Web Previews-Einrichtung verwenden? A: Ja. Der Side-by-Side Visual Mode ist ein Upgrade des bestehenden Web Previews Plugins. Wenn Sie Web Previews bereits verwenden, erfordert die Aktivierung der neuen Funktionalität nur minimale Konfigurationsänderungen.

F: Welche Arten von Inhaltsstrukturen werden unterstützt? A: Es wird das gesamte Spektrum des DatoCMS Content Modelings unterstützt, einschließlich Standardfeldern, Links zu anderen Datensätzen, komplexen Structured Text-Blöcken und tief verschachtelten modularen Inhaltsstrukturen.