Problem mit benutzerdefiniertem Bauteiltyp und Tabellenzelle

Question

Hallo! Ich versuche, einen benutzerdefinierten Komponententyp hinzuzufügen: '''javascript domc.addType('image-block', { Verlängern: 'Zelle', model: { defaults: function () { Rückkehr { Name: 'Hintergrundbild', Typ: 'Bildblock', TagName: 'td', leer: falsch, Droppable: True } } }, isComponent (el) { if (el.tagName === 'TD' && el.classList.contains('bg-image')) { return { type: 'image-block' } } } }) Aber wenn ich diesen Block auf die Leinwand werfe, <td> erscheint das Tag nicht auf Leinwand und D...

artf · Accepted Answer

@kuhelbeher dein Code korrekt ist (außer 'extend: 'cell' und nicht 'extends: 'cell'), gibt es leider einen bug (oder eine fehlerhafte Logik) auf die Zeilenkomponente, daher würde ich vorerst empfehlen, dies als Patch hinzuzufügen: '''js const modelDefault = domc.getType('default').model; domc.addType('row', { model: { initialize() { modelDefault.prototype.initialize.apply (dies, argumente); }, } }); ``` Und jetzt sollte es funktionieren: https://jsfiddle.net/corasd1h/

Noogen · Answer

@kuhelbeher, weil deine Komponente laut deiner obigen Inhaltsdefinition eine 'Tabelle' ist und nicht ein 'TD', wie es in deiner addType of 'tagName'-Eigenschaft definiert ist?

kuhelbeher · Answer

@noogen Ich glaube nicht, dass das Problem damit liegt. Ich habe versucht, Komponente und Block so zu definieren: '''javascript domc.addType('custom-cell', { erweitert: 'Zelle', model: { Standardwerte: { entfernbar: falsch, Name: 'Benutzerdefinierte Zelle', Typ: 'Custom-Cell', kopierbar: falsch, TagName: 'td' } } }) bm.add('root', { Etikett: 'Page Wrapper', Kategorie: Opt.Category, Inhalt: ' , }) `...

Problem mit benutzerdefiniertem Bauteiltyp und Tabellenzelle

Frage

Antworten (3)

Verwandte Fragen und Antworten

RemoveButton() verursacht einen Fehler

Problem mit dem Style-Manager.

Komponente mit textable:1 funktioniert seit Version 0.16.12 nicht mehr

Uncaught TypeError: kann nicht auf die Eigenschaft "el" zugreifen, n ist undefiniert

Kostenpflichtige Plugins, die diesem Problem entsprechen

Verwandte Tutorials

UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors

Claude Skill for GrapesJS: How AI Is Changing the Way We Build Visual Editors

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

Durchsuchen Sie Plugin-Kategorien