Wie man einen benutzerdefinierten Block in GrapesJS (2026) hinzufügt

Blöcke sind das, was Nutzer auf die Leinwand ziehen

Ein Block ist ein wiederverwendbarer Abschnitt, der im GrapesJS-Block-Panel erscheint. Du fügst hinzu sie über den Blockmanager. Dieser Leitfaden fügt einfache HTML-Blöcke hinzu und gruppiert sie in Kategorien, gibt ihnen Symbole und unterstützt eine mit einer wiederverwendbaren Komponente.

1. Fügen Sie einen Basisblock hinzu

editor.BlockManager.add('cta-banner', {
  label: 'CTA Banner',
  category: 'Sections',
  content: `
    <section class="cta py-16 text-center">
      <h2>Ready to start?</h2>
      <a href="#">Get started</a>
    </section>`,
});

Das content kann ein HTML-String (oben) oder eine Komponentendefinition sein Objekt für mehr Kontrolle.

2. Fügen Sie ein Symbol hinzu (Medien)

editor.BlockManager.add('image-block', {
  label: 'Image',
  category: 'Basic',
  media: '<svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/></svg>',
  content: { type: 'image' },
});

media akzeptiert inline SVG oder ein <img> Tag und ist als Block-Vorschaubild angezeigt.

3. Einen Block mit einer wiederverwendbaren Komponente zurücksetzen

// content references a custom component type you registered:
editor.BlockManager.add('pricing-card', {
  label: 'Pricing card',
  category: 'Sections',
  content: { type: 'pricing-card' },   // see the custom-components guide
});

Das Entfernen dieses Blocks erzeugt eine Instanz von deinem pricing-card Komponente, sodass sein Verhalten und seine Eigenschaften automatisch auftreten.

Tipps

Machen Sie die Blöcke angenehm zu bedienen. Gruppiere verwandte Blöcke mit der category Eigenschaft, damit das Panel organisiert bleibt, und gib jedem ein media SVG, damit Nutzer es auf einen Blick erkennen. Für alles über ein einzelnes Element hinaus setzen Sie den Block content auf eine Komponentendefinition ({ type: '…' }) mit einer registrierten Komponente, sodass der Block eigene Eigenschaften und Verhalten trägt und nicht inertes HTML dumpt. Du kannst die Reihenfolge und das Ziel-Panel über die Hinzufügen-Optionen steuern, und du kannst Blöcke direkt aus einem Plugin hinzufügen, sodass eine ganze Bibliothek in einer Zeile installiert wird.

Voraussetzungen

Du brauchst einen laufenden GrapesJS-Editor. Blöcke werden über den Block Manager hinzugefügt, der Sie können jederzeit danach grapesjs.init anrufen – von Ihrem App-Code oder von innerhalb eines Plugins, sodass eine ganze Bibliothek in einer Zeile installiert wird.

Blockoptionen, die es wert sind zu kennen

Hinter label, category, und content, kann ein Block Setze ein media Vorschaubild, kontrolliere ob das Entfernen davon das neue auswählt Komponente (select: true), und für das Panel gesetzt attributes Gegenstand:

editor.BlockManager.add('image-card', {
  label: 'Image card',
  category: 'Cards',
  media: '<svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/></svg>',
  select: true,
  content: { type: 'image' },
});

Komponentengestützte Blöcke

Für alles, was über inert HTML hinausgeht, setze den Block content auf eine Komponente Definition, deren Komponente mit einer Komponente übereinstimmt, type mit der du dich registriert hast DomComponents.addType. Das Fallen des Blocks erzeugt dann diese Komponente, also Seine Eigenschaften und sein Verhalten kommen automatisch dazu.

Füge eine ganze Bibliothek auf einmal hinzu

const blocks = [
  { id: 'h1', label: 'Heading', content: '<h1>Title</h1>' },
  { id: 'p', label: 'Paragraph', content: '<p>Text</p>' },
];
blocks.forEach((b) => editor.BlockManager.add(b.id, { ...b, category: 'Basic' }));

Best Practices

Gruppiere verwandte Blöcke mit category , damit das Panel organisiert bleibt, und gib Jeder Block ein erkennbares media Symbol. Block-HTML klein halten und semantisch; Komplexes Verhalten in eine Backing-Komponente zu drücken, statt in einen riesigen Inhalt Schnur. Präfixe Block-IDs, um Kollisionen mit Plugins zu vermeiden.

Fehlerbehebung

Wenn ein Block nicht erscheint, heißt das normalerweise, dass er vor dem Block hinzugefügt wird Manager ist bereit oder unter einer Kategorie, die kollabiert ist. Es fallen zu lassen, tut das Nichts Nützliches bedeutet oft, dass die referenzierte Komponente type es nicht ist registriert.

Nächste Schritte

Lerne, wie man die Komponententypen definiert, auf die sich Blöcke in der Anleitung für benutzerdefinierte Komponenten oder Wrap Deine Blöcke werden wiederverwendbar GrapesJS-Plugin. Durchstöbern Sie die vollständiger GrapesJS-Plugins-Katalog oder Blockbibliotheks-Plugins auf GJS.Market.

FAQ

Wie füge ich einen Block in GrapesJS hinzu?

Ruf editor.BlockManager.add(id, { label, category, content }); die Block erscheint im Panel und ist bereit zum Ziehen.

Wie gruppiere ich Blöcke in Kategorien?

Setze die Eigenschaft category — Blöcke mit derselben Kategorie werden gruppiert im Panel.

Kann ein Block ein wiederverwendbares Bauteil einsetzen?

Ja – setze content auf eine Komponentendefinition, deren type Entspricht einer Komponente, bei DomComponents.addTypeder du registriert hast.