Issue #2434💬 AnsweredOpened November 29, 2019by pvbergen1 reactions

Exclude html elements from model

快速解答by pvbergen1

Huh, that would be surprisingly simple. Thanks! I'll test it out in the next few days and see how we can integrate it with our workflow.

Read full answer below ↓

Question

This is a broad question, so I will provide the use case and some ideas instead of actual code.

Basic description

We are using grapesjs as part of a Drupal module (https://github.com/artf/grapesjs/issues/1798#issuecomment-559498604) and we are facing an issue with having too many html elements within the grapes container. This impacts the performance for users.

The idea we follow with the module is to show the whole page within the grapes iframe. This enables the user to see the page as whole and allows us to utilize the tablet and mobile view modes. Due to the thousands of elements in header or footer registered as uneditable default components the model of grapesjs is getting slow (js lag of several seconds), as the collections grow beyond the intended/usual number of elements.

Setup

An example of our setup as html:

<div id="grapes-container">
   <header data-gjs-type="default">
      <!-- HTML elements, not editable, registered as default components -->
      <nav data-gjs-type="default">
        <ul data-gjs-type="default">
           <li data-gjs-type="default">
           </li>
        </ul>
      </nav>
   </header>
   <section id="editable-container">
      <!-- HTML elements, editable,  registered as custom components --> 
      <div data-gjs-type="component1"> <!-- custom component -->
          <div data-gjs-type="default">Some text</div> <!-- trait -->
      </div>
   </section>
   <footer>
      <!-- HTML elements, not editable, registered as default components -->
   </footer>
</div>

We set the editable flag on default component(s) to false and use our custom components to implement the editing using traits.

A visual example of our setup: pagedesigner-example-structure

Question

Is it possible to include HTML in the grapes container but exclude it from the model? E.g. having the HTML in the header not register with grapes, as it is inert in the context of editing a page.

Possible approaches

We tried different approaches, but were not able to make it work:

  • Set an inexisting component to the uneditable elements
  • Delete the default component type before initialization
  • Alter the model after initialization

I'm happy to provide more details. Currently, I'm not sure, though, what kind of information would be useful.

Answers (2)

pvbergenNovember 30, 2019

Huh, that would be surprisingly simple. Thanks! I'll test it out in the next few days and see how we can integrate it with our workflow.

artfNovember 30, 2019

Do you mean something like this?

const header = '<div style="padding: 100px">My header</div>';
editor.getWrapper().getEl().insertAdjacentHTML('beforeBegin', header);

This will add an HTML without being actually related to GrapesJS Components

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 →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.