使用自定义视图时无法选择子组件
如果你通过视图添加元素,你无法选择它们,只能选择模型 阅读此页 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)
如果你通过视图添加元素,你无法选择它们,只能选择模型 阅读此页 https://grapesjs.com/docs/modules/Components.html 你也可以创建不含“isComponent”的新类型
@artf我已经明白如何使用isComponent。 我会用“fromElement: false”,所以用葡萄时不需要。 我不希望添加到视图中的元素被选中,但我希望嵌套组件可以被选择。 目前情况并非如此。 例如,如果我将它渲染为组件视图: 然后,我把一个子组件拖放到上方的组件上。 我不希望嵌套的“''或”''<h1><div>作为组件在编辑器中渲染。 我猜这就是“getChildrenContainer”的用途,对吗?我找不到关于这种方法的任何文档。子组件的拖放和渲染功能正常。 问题是子组件无法选择或悬停,尽管我开启了这些设置。我只能通过图层面板选择嵌套组件,但不能通过编辑器本身选择。 你...
好了,我明白了。“getChildrenContainer”应该能正常工作,我会尝试去掉那些“指针事件”,让“悬停”更像“select”那样工作。 顺便说一句,你不需要 jquery,grapesjs 底层用的是 cash(它有类似 jquery 的 API),所以你可以做: “this.$el.html('...');' 还有一种方法可以获得儿童容器 'this.getChildrenContainer().style....'
相关问答
通过相似的问题讨论继续研究。
问题 #394
文本:每次我按下回车键,都会创建新的div,而不是创建一个 </br>
你好@artf 为什么插入文本时,每次分行都会创建一个新的div,而不是标准的 div </br> : 但工具栏依然存在: https://i.imgur.com/gcaBti2.png 当我双击“Hello wor...
问题 #1812
:尝试添加背景图像时出现404(演示中可复现)
以隐身铬色访问 https://grapesjs.com/demo.html点击“Header”元素点击装饰>背景删除第2层点击第1层点击“x”删除紫色背景图像控制台中出现“GET https://grapesjs.com/none 404”错误点击“图片”尝试添加任何其他新图...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
教程
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
浏览插件分类
直接跳转到市场上的插件分类页面。