PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #1162💬 已回答提出于 2018年6月4日作者 kaloyankostov0 个反应

:Handlebars 渲染模板中的可编辑组件

快速解答作者 kaloyankostov

进一步澄清一下,因为我现在觉得我的帖子比必要的更长。我又查了一下,找到了#978。那里描述的问题和我的情况完全一样。我基本上有一个自定义组件,HTML字符串中有几个子元素,但这些子元素都无法选择或编辑。它们都作为一个可编辑元素加到父元素上(我这里通常是“<div>')。是否可以像使用 editor.setComponents() 那样,遍历所有子组件,并让它们单独识别,但使用自定义组件?我需要一个自定义组件,因为我想把渲染后的视图和源HTML不同。谢谢

阅读下方完整回答 ↓

问题

你好,我已经用 grapes 大约几天了。感谢你在这个项目上的出色工作。我已经看过API文档(希望没漏掉这部分),也尝试了一些方法。基本上,我用 grapes 加载现有的.hbs(车把)文件,用户就可以编辑了。我看到之前有人问#938里如何集成车把,我照着那里的建议做了,最终得到了。 然后在编辑器中设置组件如下: 这样效果非常好,我渲染好的车把模板会在编辑器中显示,而源html仍然是车把模板,这正是我需要的。然而,当模板被导入时,它作为图层管理器中的一个组件,称为Handlebars,这意味着我无法编辑单个元素或添加任何新内容。 ![图片](https://user-images.githubusercontent.com/17098455/40891344-e222b84a-6751-11e8-9789-8055485a846f.png) 考虑到组件只是构成构件的原子部分,这完全说得通。话虽如此,我不确定该如何实现我可以调入现有的车把代码片段在 edtior 中渲染车把模板保留车把模板的源代码让渲染后的车把模板中的各个元素可以在 grapes 编辑器中编辑 我看到直接把手未编译的HTML字符串传给 editor.setComponents() 确实能帮我获得可编辑组件,但显然不会给我渲染的把手模板。另一方面,像传递编译后的把手HTML模板字符串给 editor.setCompo...

回答(3)

kaloyankostov• 2018年6月6日

进一步澄清一下,因为我现在觉得我的帖子比必要的更长。我又查了一下,找到了#978。那里描述的问题和我的情况完全一样。我基本上有一个自定义组件,HTML字符串中有几个子元素,但这些子元素都无法选择或编辑。它们都作为一个可编辑元素加到父元素上(我这里通常是“<div>')。是否可以像使用 editor.setComponents() 那样,遍历所有子组件,并让它们单独识别,但使用自定义组件?我需要一个自定义组件,因为我想把渲染后的视图和源HTML不同。谢谢

artf• 2018年6月16日

我看到有几个点存在冲突:保留车把模板的源代码让渲染后的车把模板的各个元素可以在 grapes 编辑器中编辑 如果你编辑内容,理应得到这些修改,对吧?但你还是要把手模板作为退货,那编辑它们的意义何在? 顺便说一句,我给你一些提示,然后试着弄清楚你需要什么(没测试过): 然后添加类似这样的方块

no-response[bot]• 2018年6月26日

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

相关问答

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

问题 #665

自定义组件与存档

抱歉,又是我! 我正在尝试用我的新组件“img-link”保存我的模板: 但当我用 gjs-get-inlined-html 命令保存模板(这是通讯模板)时,它不会保存图片的原始格式。 你能帮帮我吗?

3 个回答更新于 2020年5月6日

问题 #1888

在画布内添加自定义HTML

你好, 我用 grapes 导出一个包含所有信息的自定义json,而不是用HTML和CSS。 为此,我解析存储在localStorage上的gpjs组件。 现在我需要自定义组件在Canvas中的渲染方式。 举个例子,我有一个输入组件,包含两个特征(标签和值),我想在画布里渲染它...

3 个回答更新于 2020年4月2日

问题 #631

如何在样式管理器中刷新激活组件的类视图

我正在使用一个特性(type=select)来更改组件的类(一个“列”组件,也就是代表宽度为1-12的类)。在我移除了之前的“col-*”类并添加新选中的类(通过select更改触发的函数)后,样式管理器的类部分仍然保留着旧类。如果我选择另一个组件,然后再次选择该列,它会得到新...

2 个回答更新于 2019年9月18日

问题 #1964

创建自定义组件的最低要求

我整天都在看关于创建自定义组件的文档。我也看过 grapesjs-mjml作为示例。我正在尝试为React组件创建一个可以根据需要扩展的基础类型,但目前我只想知道调用哪些生命周期方法以及何时调用。我正在具体弄清楚 render 和 toHTML 的区别。我只做了一个基础组件并做...

2 个回答更新于 2020年4月15日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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