Issue #1448💬 AnsweredOpened September 21, 2018by prestonkscott1 reactions

Child component not selectable when using custom view

快速解答by artf1

If you add elements via View you can't select them, only Models can be selectable Read this page https://grapesjs.com/docs/modules/Components.html you also create new types without isComponent

Read full answer below ↓

Question

代码片段TEXT
I'm trying to create a custom component that creates it's own view with nested HTML.  I do not want this HTML to be rendered as a component so I use (using jQuery)

    view: defaultType.view.extend({
      init: function () {
        $(this.el).html('<div class="container"></div>');
      },
      getChildrenSelector: function () {
        return '.container';
      },
    })

But, if I add child components, they are not selectable through the editor. They can only be selected through the Layer panel.  I've created a jsFiddle of the issue: https://jsfiddle.net/pscott/72xgqkdy/

I've found that if I remove the 'pointer-events' style from the parent, the child components become selectable BUT the parent can no longer be hovered and it's badge no longer displays.

    onRender: function () {
      $(this.el).find(this.getChildrenContainer()).css('pointer-events', '');
    }

What's the correct way to create a custom view for a component?  Should I be using `getChildrenContainer`?

Answers (3)

prestonkscottOctober 2, 2018

@artf I understand how to use isComponent. I will be using fromElement: false so it's not required for how I intend to use grapes. I do not want the elements added to the view to be selected, I do however want nested components to be selectable. Currently they are not.

For example, if I render this as the Component view:

<div>
  <h1>{{PAGE_TITLE}}</h1>
  <div><!-- CHILD COMPONENTS GO HERE --><div>
</div>

Then, then I drag & drop a child component on the Component above. I do not want the nested <h1> or <div> to be rendered as components in the editor. I presume this is what getChildrenContainer is for, is that correct? I could not find any documentation on this method. The drag, drop & rendering of the child component works. The problem is the child Components are not selectable or hoverable even though I have those settings turned on. I can only select the nested components through the Layer Panel but not the editor itself. Do you have a working example of how to use the getChildrenSelector method? This is what I need to be able to create modular components rather than 1 component per HTML element. I apologize if I'm misunderstanding what getChildrenSelector is for.

artfOctober 4, 2018

Ok, now I got it. The getChildrenContainer should work as you expect, I'll just try to remove those pointer-events stuff and make the hover work more like the select. BTW you don't need jquery, grapesjs under the hood uses cash (which has jquery-like API) so you can do: this.$el.html('...'); There is also a method to get the children container this.getChildrenContainer().style....

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.