原子块或复杂分量
我能预见的主要问题是源代码应该是可导入的,因为它是由编辑器生成的,我不确定编辑器是否能区分分隔符元素和用于表格数据的表格组件中的任何 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)
我能预见的主要问题是源代码应该是可导入的,因为它是由编辑器生成的,我不确定编辑器是否能区分分隔符元素和用于表格数据的表格组件中的任何 td 组件,以及它是否能嗅探所有样式,重新填充到编辑器中。 是的,这是个好问题,基本上编辑器有一堆组件类型,每次添加新组件时,它都会放在堆栈顶部 假设你需要在选中的表格组件([组件的API](https://grapesjs.com/docs/api/component.html))中添加一个。 “''js const selected = editor.getSelected(); 所选 是组件的模型 Selected.Append(<table>'...<...
它为该节点返回了类型,阻止了编辑器测试该节点内部节点的组件类型? 不,内层节点仍会被遍历,但你实际上可以通过这个作为返回“isComponent”来阻止这一点 “''js isComponent(el) { ... 返回 { 类型:“分离器”, 如果返回的对象包含“组件”, 内层节点将被跳过 组成部分:[], } } 空桌子,那你能做什么?!?用这个: “''js 组件:[el.innerHTML], “内容”是静态内容,编辑器不会创建组件,你甚至无法选择它们(因为不是组件,你没有模型)。
是的,内容属性确实能解决我的问题,但我猜我必须手动保持它的值(通过字符串操作)与用户对分隔符组件属性和特征所做的更改保持同步,而且因为它是分隔符组件模型的一部分,任何对它做的更改都会触发视图更新, 右? 正如你说的,“我希望实际上点击分隔块的任何组件都能选择表格”,我猜“分隔符”是静态的,不需要更改内部内容,这取决于你的特征具体做什么,比如说,如果你只是更改组件本身的属性,它仍然与其视图同步否则,如果我让内层节点被遍历,但检查祖先和/或后代节点,确认它们是否属于分隔器组件,并让它们不可丢弃、不可拖拽或不可选择(比如定义分离元如 separator-tr、separator-td 等)?这会是...
相关问答
通过相似的问题讨论继续研究。
问题 #2011
构建 gjs 组件
大家好, 我正在使用 grapesjs-webpage-preset 插件,我想把我的 gjs-html 和 gjs-css 结合起来,这样所有样式都是内联的。 我之前用“juice”做到了,现在我想基于我新合并的 gjs-html 和内联 css 来存储 gjs-compon...
问题 #1942
编辑模板时无法加载HTML条件注释
编辑模板时,条件评论被自动渲染移除,但导入和保存时仍能正常
问题 #1908
无法读取未定义属性“indexOf”。
我在这里找到过之前的结果:https://github.com/artf/grapesjs/issues/1772 但我仍然无法让它工作,按照你的指南和那个问题中的答案,使用最基础的设置。 我的剧本: 页面简单地表示: ![图片](https://user-images.git...
问题 #1180
用GrapeJS反应
您好,我搜索过,但没找到具体的解决方案。目前,我正在尝试将我的React应用与GrapeJS集成。 'import React, { Component } from 'react'; import './GrapesSrc/grapes.min.js'; 从“grapejs”...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
浏览插件分类
直接跳转到市场上的插件分类页面。