-
|
recently i tried to create blocks for grapesjs to handle tables here is my code const commonBlockProps = {
category: "blocks",
select: true
};
const blocks = [
{
...commonBlockProps,
label: "Box",
content: `<table style="width:100%; min-height: 50px;"></table>`
},
{
...commonBlockProps,
label: "Body",
content: `<tbody data-gjs-type="tbody" data-gjs-droppable="true" style="height: 75px;"></tbody>`
},
{
...commonBlockProps,
label: "Row",
content: `<tr data-gjs-type="row" data-gjs-droppable="true" style="height: 75px;"></tr>`
},
{
...commonBlockProps,
label: "Column",
content: `<td data-gjs-draggable="true" data-gjs-type="cell" data-gjs-resizable="width" style="width: calc(100% / 7);"></td>`
}
];
blocks.map((template) => {
editor.BlockManager.add(template.id, template)
})i got successfully 3 blocks in block manager then i tried to drop Box block (table block) first then try to add tbody or tr or td nothing works. nothing able to drop in it. everytime it warns |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Unfortunately this issue is due to the native <body>
<td ...></td>
</body>as having only The workaround here is to avoid the parser and pass directly the component definition, eg: {
...commonBlockProps,
label: "Column",
content: {
type: 'cell',
// ...
style: { width: 'calc(100% / 7)' }
},
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much |
Beta Was this translation helpful? Give feedback.
Unfortunately this issue is due to the native
DOMParserwhich outputs an empty document if you try to pass an invalid syntax. For example this what is passed in the case ofColumn:as having only
<td>without the full table around it is an invalid syntax, the result will be empty and the editor won't be able to know what component to create.The workaround here is to avoid the parser and pass directly the component definition, eg: