问题 #1448💬 已回答提出于 2018年9月21日作者 prestonkscott1 个反应

使用自定义视图时无法选择子组件

快速解答作者 artf1

如果你通过视图添加元素,你无法选择它们,只能选择模型 阅读此页 https://grapesjs.com/docs/modules/Components.html 你也可以创建不含“isComponent”的新类型

阅读下方完整回答 ↓

问题

我正在尝试创建一个自定义组件,创建一个带有嵌套HTML的视图。 我不想让这个HTML作为组件渲染,所以我用(用jQuery)

view: defaultType.view.extend({ 初始化:函数 () { $(this.el).html('<div class=“container”></div>'); }, getChildrenSelector: 函数 () { return '.container'; }, })

但是,如果我添加子组件,它们在编辑器中无法选择。它们只能通过图层面板选择。 我已经为这个问题做了一个jsFiddle:https://jsfiddle.net/pscott/72xgqkdy/

我发现如果移除父节点的“指针事件”样式,子组件可以选择,但父组件无法再被悬停,其徽章也不再显示。

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

为组件创建自定义视图的正确方法是什么? 我应该使用“getChildrenContainer”吗?

回答(3)

prestonkscott2018年10月2日

@artf我已经明白如何使用isComponent。 我会用“fromElement: false”,所以用葡萄时不需要。 我不希望添加到视图中的元素被选中,但我希望嵌套组件可以被选择。 目前情况并非如此。 例如,如果我将它渲染为组件视图: 然后,我把一个子组件拖放到上方的组件上。 我不希望嵌套的“''或”''<h1><div>作为组件在编辑器中渲染。 我猜这就是“getChildrenContainer”的用途,对吗?我找不到关于这种方法的任何文档。子组件的拖放和渲染功能正常。 问题是子组件无法选择或悬停,尽管我开启了这些设置。我只能通过图层面板选择嵌套组件,但不能通过编辑器本身选择。 你...

artf2018年10月4日

好了,我明白了。“getChildrenContainer”应该能正常工作,我会尝试去掉那些“指针事件”,让“悬停”更像“select”那样工作。 顺便说一句,你不需要 jquery,grapesjs 底层用的是 cash(它有类似 jquery 的 API),所以你可以做: “this.$el.html('...');' 还有一种方法可以获得儿童容器 'this.getChildrenContainer().style....'

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。