💬 Answered: Error when I tried to add rows to a table

Question

Hi guys I'm starting to use Grapesjs and I have a problem, I am trying to add 3 new commands to create tables, add rows and cells, the table works fine but when I add a row into the table I get this error: "Invalid target position: Target collection not found, Target is not droppable, accepts [undefined], Component not draggable, acceptable by [undefined] ", could someone help me, this is my code : I appreciate it the help

代码片段TEXT

`<script type="text/javascript">
            var editor = grapesjs.init({
            height: '100%',
                    showOffsets: 1,
                    noticeOnUnload: 0,
                    storageManager: {autoload: 0},
                    container: '#gjs',
                    fromElement: true,
                    plugins: ['gjs-preset-webpage'],
                    pluginsOpts: {
                    'gjs-preset-webpage': {}
                    }
            });
            

            var bm = editor.BlockManager;
            var comps = editor.DomComponents;
            var defaultType = comps.getType('default');
            var defaultModel = defaultType.model;
            var defaultView = defaultType.view;
            bm.add('table', {
            label: 'Table',
                    content: '<table><thead><th></th></thead><tbody><tr><td>Test</td></tr ></tbody></table>',
                    attributes: {
                    'data-type': 'table',
                    },
            });
            bm.add('tr', {
            label: 'Row',
                    content:  '<tr><td>Test</td></tr>',
                    attributes: {
                    'data-type': 'tr',
                    },
            });
            bm.add('td', {
            label: 'Cell',
                    content: '<td>Test</td>',
                    attributes: {
                    'data-type': 'td',
                    },
            });
            
            
            comps.addType('table', {
              model: defaultModel.extend({
                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                'custom-name': 'Table',
                draggable: true,
                droppable: true,
                accepted: true,
                highlightable: true,
                stylable: [
                     ' height', 'font-style', 'font-size', 'font-weight', 'font-family', 'color',
                     'width'
                ],
                style: {
                     'width': '100%',
                     'font-size': '14px'
                 },
                }),
              },
              {
                isComponent: function(el) {
                  if(el.tagName === 'TABLE'){
                    return {type: 'table'};
                  }
                },
              }),
            view: defaultType.view,
          });
          
            
            comps.addType('tr', {
              model: defaultModel.extend({
                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                  'custom-name': 'Row',
                    draggable: true,
                    droppable: true,
                    highlightable: true,
                    accepted: true,
                }),
              },
              {
                isComponent: function(el) {
                  if(el.tagName === 'TR'){
                    return {type: 'tr'};
                  }
                },
              }),
            view: defaultType.view,
          });
          
            
            comps.addType('td', {
              model: defaultModel.extend({
                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                  'custom-name': 'Td',
                    draggable: true,
                    droppable: true,
                    highlightable: true,
                    accepted: true,                               
                }),
              },
              {
                isComponent: function(el) {
                  if(el.tagName == 'TD'){
                    return {type: 'td'};
                  }
                },
              }),
            view: defaultType.view,
          });          
        </script>`

Answers (3)

davidherlopgt• February 7, 2018

I forget put what version I am using grapesjs - 0.13.5 <link rel="stylesheet" href="Config/grapesjs-dev/dist/css/grapes.min.css"> <link rel="stylesheet" href="Config/grapesjs-preset-webpage-master/dist/grapesjs-preset-webpage.min.css"/> <script src="Config/grapesjs-dev/dist/grapes.min.js"></script> <script src="Config/grapesjs-preset-webpage-master/dist/grapesjs-preset-webpage.min.js"></script>

artf• February 8, 2018

@davidherlopgt Have you tried to use built-in table components instead of extending them? BTW create a live demo please

davidherlopgt• February 8, 2018

Hi artf thanks for your answer, I tried to use the table component and I can add the Table with one row and one cell in the header and the body, maybe the disadvantage is that if I change the color of the row to the header the body is changed too, so I have to remove the class from the body row so that it is not affected I add the live demo like you ask grapesjslivedemo.zip

Error when I tried to add rows to a table

Question

Answers (3)

Related Questions and Answers

I've created html table and cannot drag new elements to table cells

Script tag create JSON error

[QUESTIONS] EXTRA TBODY ADDED EVERY TIME I SAVED THE HTML DATA.

Cannot edit the content after update it via block manager API

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories