Issue #511💬 AnsweredOpened November 13, 2017by bungambohlah2 reactions

Cannot edit the content after update it via block manager API

快速解答by artf1

@edwardjiawei just change content (used only for text content) with components @bungambohlah You should not do this el.insertAdjacentHTML( 'beforeend', contentDynamic ); If you replace the DOM you remove also its attached models If you need to replace the DOM and still be able to select this new content you have to do...

Read full answer below ↓

Question

Hello @artf sorry for my last issue, I must create a new issue, my problem is got error like this

EDIT : sorry i just fixed my last issue with script :

// Dynamic navigation
blockManager.add('dynamic-nav', {
  label: 'Dynamic Navigation',
  attributes: {
    class: 'fa fa-ellipsis-h',
    title: 'Insert Dynamic Menu of Navigation'
  },
  category: 'Section',
  content: `<div id="dynamic-nav-wrapper" class="nav-wrapper" data-section-type="dynamic-menu-nav">
              <a href="index.html" class="brand-logo"><img src="images/logo.png"></a>
              <a href="index.html" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
              <ul id="dynamic-page" class="right hide-on-med-and-down"></ul>
              <script>
                  $(function() {
                    var item = document.getElementById("dynamic-page");
                    if (!item) return;

                    (function(){
                      const el = this;
                      var contentDynamic = "";
                      $.ajax({
                        type: "GET",
                        url: "/dev/editor/dynamicnav",
                        success: function(pages) {

                          for (var i = 0; i < pages.length; ++i) {
                            console.log(pages[i]);
                            if (pages[i].uuid == "<%= page.uuid %>") {
                              contentDynamic += \`<li class="current"><a href="\${pages[i].url}">\${pages[i].menu_name}</a></li>\`;
                            } else {
                              contentDynamic += \`<li><a href="\${pages[i].url}">\${pages[i].menu_name}</a></li>\`;
                            }
                          }

                          el.insertAdjacentHTML( 'beforeend', contentDynamic );
                          console.log(el.getElementsByTagName("li").length);
                        },
                        error: function(err) {
                          console.error(err);
                        }
                      });
                    }.bind(item))();
                  });
                  <\/script>
            </div>`
});

Updated Script but the content (link element only) cant edit or add some component with grapesjs, how to fix that? thank you @artf :+1:

Answers (3)

artfNovember 15, 2017

@edwardjiawei just change content (used only for text content) with components

// from
content: '<td class="cell">...',
// to
components: '<td class="cell">...',

@bungambohlah You should not do this el.insertAdjacentHTML( 'beforeend', contentDynamic ); If you replace the DOM you remove also its attached models If you need to replace the DOM and still be able to select this new content you have to do it at the model level (eg. model.components('<div>...')) otherwise it's just doesn't make sense

bungambohlahNovember 16, 2017

Thaks a lot @artf i got some idea and little tricky for what to do in the model level, thank you so much, you saved my day :rofl:

edwardjiaweiNovember 15, 2017

Similar issue, nested element is not being detected

To setup simple flow to drag and drop table, so user can drag the row Block to make the table for second row, but the td in the row is not editable, not selectable for styling

    bm.add('Table', {
      label: 'Table',
      category: 'Forms',
      attributes: {class:'fa fa-map-o'},
      content: {
        type: 'table',
        style: {width: '100%'},
        columns: 2,
        rows: 1, 
      },
    });
  }

    bm.add('TableRow', {
      label: 'TableRow',
      category: 'Forms',
      attributes: {class:'fa fa-map-o'},
      content: {
        type: 'row',
        classes: ['tablerow'],
        content: '<td class="cell">Not Editable, Not Stylized from Decoration</td><td class"cell">Not Editable, Not Stylized from Decoration</td>'
        style: {height: '75px'} //padding 10
      },
        removable: true,
        draggable: true,
        droppable: true,
        badgable: true,
        stylable: true,
        highlightable: true,
        copyable: true,
        resizable: true,
        editable: true

    });

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.