Wie man ein benutzerdefiniertes GrapesJS-Plugin erstellt (Schritt für Schritt, 2026)

Was ein GrapesJS-Plugin eigentlich ist

Ein GrapesJS-Plugin ist einfach eine Funktion, die den Editor und Optionen empfängt Objekt: (editor, opts) => { /* register things */ }. In ihm hast du Füge Blöcke, Befehle, Komponenten, Panels oder Lagerung hinzu. Es gibt keine besondere Klasse um zu erweitern. Dieser Guide baut ein kleines, aber echtes Plugin und paketiert es für NPM.

1. Die Plugin-Funktion

// src/index.js
export default (editor, opts = {}) => {
  const options = {
    label: 'My Block',
    category: 'My Plugin',
    ...opts,                       // caller overrides win
  };

  editor.BlockManager.add('my-block', {
    label: options.label,
    category: options.category,
    content: '<section class="my-block"><h2>Hello</h2></section>',
  });
};

2. Verwenden Sie es in einem Editor

import grapesjs from 'grapesjs';
import myPlugin from './src/index.js';

grapesjs.init({
  container: '#gjs',
  plugins: [myPlugin],
  pluginsOpts: {
    // keyed by plugin name when loaded by string; for a function, pass opts here
  },
});

Wenn du ein Plugin über seinen Paketnamen-String lädst, liest GrapesJS seine Optionen von pluginsOpts['package-name'].

3. Füge einen Befehl und einen Knopf hinzu

editor.Commands.add('say-hi', {
  run: () => editor.Modal.open({ title: 'Hi', content: 'From my plugin' }),
});

editor.Panels.addButton('options', {
  id: 'say-hi',
  className: 'fa fa-smile-o',
  command: 'say-hi',
});

4. Verpacken Sie es für NPM

• Exportiere die Plugin-Funktion als Standardpaket.
• Listen Sie grapesjs sie als , peerDependencynicht als Abhängigkeit.
• Stelle ein ESM + UMD-Bundle zusammen (Rollup oder das offizielle GrapesJS-Plugin-Starterprogramm).
• Lauf.npm publish

Tipps für robuste Plugins

Einige Gewohnheiten unterscheiden ein Wegwerf-Skript von einem auslieferbaren Plugin. Namensraum für jede ID, die du registrierst (Blöcke, Befehle, Komponenten), mit einem Präfix, damit zwei Plugins nie kollidieren. Füge immer ein Standardobjekt mit dem eingehenden opts und gelesenen Ergebnis zusammen, damit Aufrufer das Verhalten überschreiben können, ohne deinen Code zu bearbeiten. Deklariere grapesjs als , peerDependencynicht als Abhängigkeit, damit die Host-App die Version steuert. Beseitig alles, was du am Editor-Event destroy anhängst (DOM-Listener, Timer). Und dokumentiere deine Optionen – ein Plugin, das niemand konfigurieren kann, wird geforkt und nicht wiederverwendet.

Voraussetzungen

Du brauchst ein funktionierendes GrapesJS-Setup und grundlegendes JavaScript. Ein Plugin ist einfach eine Funktion (editor, opts) => {} — es gibt keine Klasse zum Erweitern und keinen Build-Schritt Fang an. Du brauchst nur einen Bundler (Vite, Webpack oder Rollup), wenn du das Plugin packst. zur Verteilung.

Ein umfassenderes Plugin: Block + Befehl + Knopf

Echte Plugins registrieren normalerweise mehrere Dinge gleichzeitig. Hier fügt ein einzelnes Plugin einen Block, einen Befehl und eine Symbolleiste hinzu:

export default (editor, opts = {}) => {
  const options = { label: 'Hi', ...opts };

  editor.BlockManager.add('callout', {
    label: 'Callout',
    category: 'Custom',
    content: '<div class="callout">Note</div>',
  });

  editor.Commands.add('say-hi', {
    run: () => editor.Modal.open({ title: options.label, content: 'From my plugin' }),
  });

  editor.Panels.addButton('options', {
    id: 'say-hi', className: 'fa fa-smile-o', command: 'say-hi',
  });
};

Aufräumen auf Zerstören

Wenn dein Plugin DOM-Listener, Timer oder externe Ressourcen anhängt, gib sie auf das Ereignis des Editors destroy , sodass der Editor wiederholt eingebettet wird (häufig in SPA-Routing) nicht undicht:

const onScroll = () => {/* … */};
window.addEventListener('scroll', onScroll);
editor.on('destroy', () => window.removeEventListener('scroll', onScroll));

Best Practices

Namespace für jede ID, die du registriert (Blöcke, Befehle, Komponenten), mit einem Präfix also zwei Plugins kollidieren nie. Immer ein Standardobjekt mit dem eingehenden Objekt zusammenführen opts. Erkläre grapesjs als peerDependency so Die Host-App steuert die Version. Behalte eine Verantwortung pro Plugin und Dokument Seine Optionen – ein Plugin, das niemand konfigurieren kann, wird geforkt und nicht wiederverwendet.

Verpacke es für NPM

Exportiere die Funktion als Standardpaket, baue ein ESM + UMD-Bundle (Rollup oder das offizieller GrapesJS-Plugin-Starter), als Peer-Abhängigkeit aufgeführt grapesjs , und lauf. npm publish Verbraucher laden sie nach Namen und geben Optionen weiter. pluginsOpts.

Nächste Schritte

Willst du einen Vorsprung? Generiere ein Plugin-Gerüst mit dem GJS.Market-Plugin-Generator, dann eintauchen in den GJS.Market-Plugin-Generator Hinzufügen benutzerdefinierter Blöcke und Individuelle Komponenten. Durchstöbern Sie die vollständige Version GrapesJS-Plugins-Katalog oder starte mit dem GJS.Market-Startseite.

FAQ

Was ist ein GrapesJS-Plugin?

Eine Funktion (editor, opts) => {} , die Blöcke und Befehle registriert, Komponenten, Panels oder Lagerung. Du gibst es über grapesjs.init die plugins Formation.

Wie füge ich Optionen zu einem Plugin hinzu?

Fügen Sie ein Standardobjekt mit dem eingehenden opts Objekt zusammen und lesen Sie aus dem Ergebnis. Anrufer stellen sie über pluginsOpts.

Wie veröffentliche ich bei NPM?

Exportiere die Funktion als Standard, deklariere grapesjs als Peer Abhängigkeit, baue ein Bundle und führe npm publish.