Wie man GrapesJS in WordPress integriert (vollständiger Leitfaden 2026)

Wann man GrapesJS mit WordPress verwenden sollte

GrapesJS ist ein eigenständiger, vom MIT lizenzierter Redakteur – kein Gutenberg-Block. Einbetten Sie es in WordPress, wenn man ein vollständig individuelles, framework-unabhängiges Drag-and-Drop benötigt Editor mit eigener Speicher- und Exportpipeline. Dieser Leitfaden baut eine kleine plugin: eine Admin-Seite, die den Editor hostet, ein REST-Endpunkt, der Inhalte speichert mit einem Nonce und einem Shortcode, der es am Frontend rendert.

1. Erstellen Sie das Plugin und stellen Sie GrapesJS in die Warteschlange

In wp-content/plugins/gjs-editor/gjs-editor.php, registrieren Sie einen Administrator Page und Enqueue GrapesJS nur auf diesem Bildschirm. Geben Sie dem Skript einen REST-Nonce.

<?php
/* Plugin Name: GJS Editor */

add_action('admin_menu', function () {
    add_menu_page('GrapesJS', 'GrapesJS', 'edit_pages', 'gjs-editor', function () {
        echo '<div id="gjs"><h1>Edit me</h1></div>';
    });
});

add_action('admin_enqueue_scripts', function ($hook) {
    if ($hook !== 'toplevel_page_gjs-editor') {
        return;
    }
    wp_enqueue_style('grapesjs', 'https://unpkg.com/grapesjs/dist/css/grapes.min.css');
    wp_enqueue_script('grapesjs', 'https://unpkg.com/grapesjs', [], null, true);
    wp_enqueue_script('gjs-init', plugins_url('editor.js', __FILE__), ['grapesjs'], null, true);
    wp_localize_script('gjs-init', 'GJS', [
        'root'  => esc_url_raw(rest_url('gjs/v1/page')),
        'nonce' => wp_create_nonce('wp_rest'),
    ]);
});

2. Initialisieren Sie GrapesJS mit Fernspeicher

In editor.js, zeigt der Speichermanager auf die REST-Route und senden Sie die Nonce als Kopfball X-WP-Nonce .

const editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: {
    type: 'remote',
    stepsBeforeSave: 3,
    options: {
      remote: {
        urlStore: GJS.root,
        urlLoad: GJS.root,
        headers: { 'X-WP-Nonce': GJS.nonce },
      },
    },
  },
});

3. Registrieren Sie den REST-Endpunkt

Speichere das Projekt (und das gerenderte HTML/CSS) mit update_option. A Der benutzerdefinierte Beitragstyp funktioniert auch, wenn du viele Seiten brauchst.

add_action('rest_api_init', function () {
    register_rest_route('gjs/v1', '/page', [
        [
            'methods'             => 'GET',
            'permission_callback' => '__return_true',
            'callback'            => function () {
                return get_option('gjs_project', []);
            },
        ],
        [
            'methods'             => 'POST',
            'permission_callback' => function () {
                return current_user_can('edit_pages');
            },
            'callback'            => function (WP_REST_Request $req) {
                $data = $req->get_json_params();
                update_option('gjs_project', $data);
                update_option('gjs_html', $data['gjs-html'] ?? '');
                update_option('gjs_css', $data['gjs-css'] ?? '');
                return ['status' => 'ok'];
            },
        ],
    ]);
});

Der Header X-WP-Nonce ermöglicht es WordPress, die eingeloggten Personen zu authentifizieren Benutzer und permission_callback setzt die Fähigkeitsprobe durch.

4. Rendern Sie am Frontend mit einem Shortcode

add_shortcode('gjs_page', function () {
    $css  = get_option('gjs_css', '');
    $html = get_option('gjs_html', '');
    return '<style>' . $css . '</style>' . $html;
});

Schau [gjs_page] in jeden Beitrag oder jede Seite ein. Desinfizieren Sie das gespeicherte Markup auf Ausgabe, wenn Nicht-Administratoren es bearbeiten können.

Sicherheits- und Leistungstipps

Halte die Integration schlank und sicher. Enqueue GrapesJS nur auf deinem Editor-Bildschirm (der admin_enqueue_scripts Hook-Check), niemals seitenweit, damit das Frontend schnell bleibt. Sperre die REST-Speicherroute mit einem permission_callback that calls current_user_can('edit_pages') und sende immer den X-WP-Nonce Header – Nonces laufen ab (~24 H), also aktualisiere oder gib den Nonce für lange Sitzungen neu. Rendere die Shortcode-Ausgabe durch, wp_kses_post() anstatt sie roh zu echoen. Für viele Seiten solltest du jede in einem benutzerdefinierten Beitragstyp statt in Optionen speichern, sodass Überarbeitungen und Funktionen kostenlos verfügbar sind.

Voraussetzungen

Du brauchst WordPress 6+ und PHP 7.4+. Diese Anleitung erstellt ein kleines, grundlegendes Plugin Vertrautheit mit der Plugin-API (Hooks, Enqueing-Skripte, die REST-API, Nonces, und Fähigkeiten) ausreichen. Es ist kein Bauschritt erforderlich – GrapesJS lädt von einem CDN oder ein gebündeltes Asset.

Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu

Registrieren Sie ziehbare Blöcke mit dem Blockmanager nach grapesjs.init:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

Ziehe fertige Blockbibliotheken und Presets aus GJS.Market für ein reichhaltigeres Set.

Seiten in einem benutzerdefinierten Beitragstyp speichern

Optionen funktionieren für eine einzelne Seite, aber ein benutzerdefinierter Beitragstyp gibt dir viele Seiten plus Revisionen und Funktionen kostenlos. Registrieren Sie es und speichern Sie das Projekt in der Nachbearbeitung Meta, dann lies es in den zuvor gezeigten REST-Rückmeldungen zurück. Behalte das Projekt, HTML und CSS zusammen gerendert, sodass eine Seite genau wie gespeichert wieder geöffnet wird.

Aufführungstipps

Enqueue GrapesJS nur auf deinem Editor-Bildschirm (die admin_enqueue_scripts Hakenkontrolle), nie standortweit, sodass die Front schnell bleibt. Cache den Shortcode Ausgabe und zerstöre es beim Speichern. Verschiebe das Editor-Skript, damit es den Admin nie blockiert UI.

Sicherheitsaspekte

Sperre die REST-Speicherroute mit einem permission_callback that calls current_user_can('edit_pages') und immer die X-WP-Nonce Header — Nonces laufen ab (~24 H), also aktualisieren oder neu ausgeben. für lange Sitzungen. Rendern Sie die Frontend-Ausgabe durch wp_kses_post() anstatt das rohe Markup zu wiederholen.

Fehlerbehebung häufiger Fehler

403 (rest_cookie_invalid_nonce) bedeutet, dass der Nonce fehlt oder abgelaufen. Eine ungestaltete Leinwand bedeutet, dass das Stylesheet nicht in der Warteschlange war. Ein leerer Editor bedeutet, dass das Container-Element nicht im Admin war Page. Wenn die Speicherstände lautlos scheitern, bestätigen Sie, dass die Fähigkeitsprüfung für den Strom besteht. Nutzer.

Wann man GrapesJS mit WordPress verwenden sollte

GrapesJS eignet sich für einen vollständig individuellen, framework-unabhängigen visuellen Editor, der in Ihren integriert ist Own Admin oder Produkt – wenn du deinen eigenen Speicher und HTML-Output möchtest, anstatt Gutenberg erweitert. Wenn du nur Inhalte innerhalb von WordPress bearbeiten musst, ist das Blockmodell, Gutenberg ist die native Wahl; für eine eigenständige, einbettbare Seite Builder, GrapesJS ist die bessere Wahl.

Nächste Schritte

Füge Blöcke und Plugins hinzu, die zu deinem Thema passen. Siehe die verwandte GrapesJS + Laravel Leitfaden, vergleichen Sie Redakteure auf GrapesJS mit Builder.io, Durchstöbern Sie den GrapesJS-Marktplatz oder starten Sie auf dem GJS.Market-Startseite.

FAQ

Wie speichere ich GrapesJS-Inhalte in WordPress?

Registrieren Sie eine REST-Route, senden Sie die Anfrage an den Header X-WP-Nonce , und speichert das Projekt/HTML/CSS mit update_option (oder einem benutzerdefinierten Beitrag) Typ).

Kann GrapesJS den WordPress-Blockeditor ersetzen?

GrapesJS ist ein eigenständiger Editor, den du selbst einbettest, kein Gutenberg-Block. Nutze es Wenn Sie einen vollständig individuellen, framework-agnostischen Editor mit eigenem Speicher benötigen und exportieren statt Gutenberg zu verlängern.

Wie authentifiziere ich die Speicheranfrage?

Überqueren Sie eine Nonce von der wp_create_nonce('wp_rest') Via wp_localize_script, dann senden Sie es als das X-WP-Nonce Header, damit der REST permission_callback erfolgreich ist.