问题 #1436💬 已回答提出于 2018年9月18日作者 peakrams3 个反应

原子块或复杂分量

快速解答作者 artf1

我能预见的主要问题是源代码应该是可导入的,因为它是由编辑器生成的,我不确定编辑器是否能区分分隔符元素和用于表格数据的表格组件中的任何 td 组件,以及它是否能嗅探所有样式,重新填充到编辑器中。 是的,这是个好问题,基本上编辑器有一堆组件类型,每次添加新组件时,它都会放在堆栈顶部 假设你需要在选中的表格组件([组件的API](https://grapesjs.com/docs/api/component.html))中添加一个。 “''js const selected = editor.getSelected(); 所选 是组件的模型 Selected.Append(<table>'...</table>`); 一定要查看关于如何...

阅读下方完整回答 ↓

问题

你好,

我正在研究编辑器,觉得我理解了组件和模块的区别。现在,我想知道 GrapesJS 是否支持将块作为原子实体管理,或者允许将组件定义为带有节点的树。

比如,我有一个叫“separator”的块,基本上是一个带有“tbody”、“tr”和“td”的表格,这些都是gjs中的组件。我希望实际上点击这个分隔块的任何组件时,都会选择我设置自定义特征和属性的“表格”组件,然后我可以在正确的组件上编程拆分(例如,设置表格的高度实际上会设定嵌套“td”的高度)。

我的目标是让用户感受到他们在处理单一原子元素的感觉,即使在源代码层面,他们为该元素设置的属性是分布在组成该元素的不同节点之间。

我能预见的主要问题是源代码应该是可导入的,因为它是由编辑器生成的,我不确定编辑器是否能区分分隔符元素和用于表格数据的“表格”组件中的任何“td”组件,以及它是否能嗅探所有样式以重新填充这些特征和属性。

这有可能吗?

谢谢。

回答(3)

artf2018年9月20日

我能预见的主要问题是源代码应该是可导入的,因为它是由编辑器生成的,我不确定编辑器是否能区分分隔符元素和用于表格数据的表格组件中的任何 td 组件,以及它是否能嗅探所有样式,重新填充到编辑器中。 是的,这是个好问题,基本上编辑器有一堆组件类型,每次添加新组件时,它都会放在堆栈顶部 假设你需要在选中的表格组件([组件的API](https://grapesjs.com/docs/api/component.html))中添加一个。 “''js const selected = editor.getSelected(); 所选 是组件的模型 Selected.Append(<table>'...<...

artf2018年9月20日

它为该节点返回了类型,阻止了编辑器测试该节点内部节点的组件类型? 不,内层节点仍会被遍历,但你实际上可以通过这个作为返回“isComponent”来阻止这一点 “''js isComponent(el) { ... 返回 { 类型:“分离器”, 如果返回的对象包含“组件”, 内层节点将被跳过 组成部分:[], } } 空桌子,那你能做什么?!?用这个: “''js 组件:[el.innerHTML], “内容”是静态内容,编辑器不会创建组件,你甚至无法选择它们(因为不是组件,你没有模型)。

artf2018年9月20日

是的,内容属性确实能解决我的问题,但我猜我必须手动保持它的值(通过字符串操作)与用户对分隔符组件属性和特征所做的更改保持同步,而且因为它是分隔符组件模型的一部分,任何对它做的更改都会触发视图更新, 右? 正如你说的,“我希望实际上点击分隔块的任何组件都能选择表格”,我猜“分隔符”是静态的,不需要更改内部内容,这取决于你的特征具体做什么,比如说,如果你只是更改组件本身的属性,它仍然与其视图同步否则,如果我让内层节点被遍历,但检查祖先和/或后代节点,确认它们是否属于分隔器组件,并让它们不可丢弃、不可拖拽或不可选择(比如定义分离元如 separator-tr、separator-td 等)?这会是...

相关问答

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

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

全部教程 →

浏览插件分类

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