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

GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 3,464 个问题

#32542021年1月29日作者 alemenciones2 个回答
0 个反应
提问typescript常规

How to hide ".gjs-traits-label" in traitManager?

也许你能帮帮我......我想在打开 TraitManager 时移除标签“.gjs-traits-label”。 ![图片]（https://user-images.githubusercontent.com/2309686/106330419-f499c500-6261-11eb-9aa5-27eaae11619b.png） ![图片]（https://user-images.githubusercontent.com/2309686/106330330-c6b48080-6261-11eb-9513-1371cb59e840.png） 我尝试了类似这样的方法：

artf

“''CSS .gjs-traits-label { display： none } ```

GJSBlock

谢谢你举报，@alemenciones。 关于如何在traitManager中隐藏“.gjs-traits-label”的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => con...

查看详情
#32532021年1月29日作者 luziye92 个回答
0 个反应
提问组件画布typescript

当数值变动时，属性颜色是如何变成蓝色的？

你好， 我们遇到了一个问题——当拖动新组件到画布时，属性名称（如“宽度”）的颜色是蓝色的，但我们并没有修改它的值。 ![图片]（https://user-images.githubusercontent.com/64573639/106257856-13935980-6258-11eb-92fb-6ad0e17da323.png） Grapesjs 很有力量，对我们非常有帮助。不过，我们对 grapesjs还很陌生，已经为此问题花了很多时间，但没有进展。 请告诉我们具体的机制，或者相关代码所在的是什么文件？ 如果你能在本周末前回复我，我将非常感激。 非常感谢:) 此致， 贾伦

artf

你好，@luziye9你肯定用的是带有自定义“样式”属性的块/组件...... 无论如何，如果你要打开一个 BUG 问题，你必须按照模板（Grapesjs 版本、可复现的演示等）操作。所以，目前我决定关闭这个无效问题。

GJSBlock

谢谢你举报，@luziye9。 关于当价值变化时，房产颜色如何变成蓝色？ 这个问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...

查看详情
#32522021年1月28日作者 ThetripGr4 个回答
0 个反应
style-manager提问画布依赖typescript

Does getHtml() remove the inline style property?

我在尝试如何更改画布内元素的样式时，发现用颜色选择器特性设置元素的内联样式颜色属性（不是通过getCS（）获得的内联样式标签），但使用getHtml（）时，这个样式属性完全消失了。我注意到在各期问题中有一个被弃用的 propertyavoidInlineStyle。如果是这样，为什么会出现这种情况？为什么现在不再是这个选项了？我想把CSS保存在特别需要的地方，内联保存，不想多一个样式标签和所有独特的ID，因为我没有使用样式管理器。这有可能实现吗？

artf

@DodoTrip原因是内联CSS不能定义带有状态（例如'：悬停'）和媒体查询的样式，所以我一直觉得它是个无用的限制，而不是功能。尽管如此，如果你不需要组件响应性或不同状态，你仍然可以使用这个选项。

ThetripGr

你好，@artf，感谢你的回复。能举个例子说明现在是怎么做的吗？还是应该避免InlineStyle让它更容易使用？

artf

说实话，我很早就不再用 avoidInlineStyle，但我想它应该能用 😁

查看详情
#32512021年1月28日作者 RutujaBadbe4 个回答
0 个反应
提问文档常规

How can I specify position of dropped element ?

我想指定拖拽元素的位置。比如，如果我有一个标题块，无论你拖到哪里，它都应该放在文档顶部。我该怎么做？

RutujaBadbe

把标题块放进画布后，我需要它放在任何其他组件/块的顶部。目前，我正在这样做。但这并没有奏效。 editor.on（'canvas：drop'，（DataTransfer， model）=> { 如果 （model.is（'头部'））） { VAR指数 = 0; editor.getComponents（）.add（model， {at： index}）; } })

artf

你可以用“可拖拽”属性（通过CSS查询字符串）定义组件可以放置的位置，但不能指定位置。 你可以尝试创建一个自定义组件作为容器，存放像 header 这样的组件，并且始终用这些容器初始化你的模板。然后你的头部可以用以下方式使用可拖拽属性：'draggable： '[data-gjs-type=“header-container”]'，'，

RutujaBadbe

@artf谢谢你的回复。我不知道这是不是正确的方法，但我做了一件事，对我有效。我对这方面还很新，还在从文档中学习。 我做了这个—— editor.on（'canvas：drop'，（ model）=> { if （model.is（'header'）） { //created custom component type header const wrapper = editor.getWrapper（）; const el = wrapper.find（'header'）[...

查看详情
#32502021年1月28日作者 fmay4 个回答
2 个反应
提问常规

Layer labels

@artf我很喜欢和GJS合作。我还有最后一件事希望你能帮忙。 如果能在图层管理器中自定义标签会非常有帮助。我到处找过，但都没找到。 默认显示“文本”和“框”的方式，对于想要高效导航来说帮助不大。 <img width=“204” alt=“截图 2021-01-28 07 27 16” src=“https://user-images.githubusercontent.com/2796719/106104795-d5544800-613a-11eb-97c4-762e5977e872.png”> 我真的很想自己定制这些。就我而言，我想展示标签名和身份识别码。 非常感谢

artf

你可以扩展组件模型并覆盖“getName”函数

fmay

如果这对任何人有用，我找到了一个简单且替代的方法，可以在组件创建时实现这一点。

flauc

我是这样做的： 好处是如果组件ID或标签以后更改，图层管理器里仍会更新，而且你也可以重新命名单个组件。

查看详情
#32492021年1月27日作者 theSC0RP4 个回答
0 个反应
提问typescript常规

QUESTION regarding JSON stored by the StorageManager

嘿，@artf。我想访问在存储模板时生成的 json，但不想实际存储模板。json 对象可以通过事件访问，但我不想调用 'editor.store（）' 然后再用事件。 有没有办法获取json对象（比如编辑器里调用函数或者某个属性）？ 或者有没有办法停止“editor.store（）”方法，这样我就能获取正在存储的json并中止调用？

Joshmamroud

@theSC0RP 这是你在找的吗？[editor.getComponents（）]（https://grapesjs.com/docs/api/editor.html#getcomponents）

artf

@theSC0RP不确定你是否想要存储功能，但Josh提出的方案是正确的，或者你也可以添加存储（如果需要，也可以在里面不做任何操作......）https://grapesjs.com/docs/modules/Storage.html#define-new-storage

theSC0RP

你总可以添加存储（如果需要，也可以在里面什么都不做......）https://grapesjs.com/docs/modules/Storage.html#define-new-storage 谢谢@artf。这就是我最终做的。用 'editor.getComponents（）' 时，你会得到一个循环结构（model -> view -> model -> ...），但 storageManager 不会存储它，也不能用来加载模板。

查看详情
#32472021年1月24日作者 fmay2 个回答
1 个反应
提问组件缺陷typescript

Traits

你好@artf——你建造的东西非常壮观。这过程很温和，因为我远非JS高手。不过，我几乎所有配置都完成了——除了这个！ 我想设置在选择图片时显示的特征（alt、src、id）。我相信初始化时可以完成一次，但我真不知道怎么做。我已经读遍了所有能找到的相关内容，但仍然卡住了。 我唯一让它工作的方法如下...... 另外——开箱结版的“Alt”排在前面，我真的很希望它排在“src”之后。我不知道怎么去除它，因为“removeTrait（）”似乎不起作用。 虽然我的解决方案有效，但我很想知道应该怎么做。 非常感谢！

artf

嗨，Freddy，在这种情况下你可以简单地扩展图像分量 “''js 编辑。Components.addType（'image'， { 型号：{ 默认值：{ 特质：[{name： 'alt'}， {name： 'src'}， {name： 'id'}] } } }); ```

GJSBlock

谢谢你举报，@fmay。 关于问题：特质的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.o...

查看详情
#32462021年1月23日作者 ThetripGr2 个回答
2 个反应
提问typescript文档

在新的自定义特质中可以使用现有的特质类型吗？（例如选色器）

我想创建一个新的自定义特性来使用，它包含颜色选择器的输入和一个复选框，这样最终结果要么是从勾选的复选框中获得的预定义颜色，要么如果未选，则选择从选取器中选出颜色。这对我来说太具体了，所以我的问题是，创建新特质时是否可以使用已有的特质类型。我是直接从文档里说的，可能漏掉了什么，但没提到，所以我很好奇，提前谢谢大家！

artf

目前没有，我正在开发一个新的UI模块，可以重用和覆盖内部UI元素。

GJSBlock

谢谢你举报，@ThetripGr。 关于可以在新的自定义特质中使用现有特质类型吗？这是个很好的问题。（例如，选色器）。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.l...

查看详情
#32452021年1月21日作者 bgrand-ch3 个回答
0 个反应
增强提问typescript

Grapesjs-custom-code 无法<script>从 GrapesJS 0.16.30 及以上版本执行

'grapesjs-custom-code' 在 'script' 标签下运行良好，直到 GrapesJS 0.16.27 版本后，不再执行任何“script”内容。 ✔️ 编辑器初始化（） 选项 ： 'allowScripts： 1' ✔️ 插件导入：https://github.com/artf/grapesjs-custom-code/issues/11#issuecomment-724512902 这和 https://github.com/artf/grapesjs/issues/3244 有关吗？

nithinpillalamarri123

你好，非常感谢你，重播...... 是的，完全正确，重放后我尝试了0.16.27自定义方块脚本，但比0.16.27版本更稳定，拖放自定义方块脚本正常运行，保存并重新加载模板后用 editor.setComponents（html 文本为字符串）;HTML运行正常，但脚本无法使用。 我用脚本吸收了这个，代替了“这种符号被浏览器理解代码取代的”< >，所以我尝试在浏览器中部署那个 HTML，运行正常，但脚本在本地加载已存模板时无法工作。 如果有人有最新版本的解决方案，请帮我脱离...

artf

你好，@bgrand-ch，你说的可能是一个修复的bug。 😂 不应该让用户执行随机脚本的主要原因：自XSS如果在编辑器中执行脚本，我们无法控制，例如，用户将 '<script>document.body.innerHTML = “”</script>;编辑也坏了。 实际上，有一个选项表明这是设计中的 'placeholderScript |内容显示自定义<script>代码包含

GJSBlock

谢谢你举报，@bgrand-ch。 关于grapesjs-custom-code无法<script>从GrapesJS 0.16.30及以上版本执行的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“se...

查看详情
#32442021年1月21日作者 nithinpillalamarri1233 个回答
0 个反应
style-manager组件typescript

Grapes JS 版本 v0.16.34 加载已保存的 HTML 后出现意外脚本代码

附加代码： 保存HTML时： <div class=“gjs-row”> <div class=“gjs-cell”> <div class=“gjs-row”> <div class=“gjs-cell”> <div id=“i6x6”> <div id=“bsrne9exd5” style=“height：300px” tg=“DataGrid” tagName=“DataGrid” class=“ag-theme-alpine”> </div> </div> </div> <div class=“gjs-cell”> <div id=“ibc4”> <div id=“3drqn6v2q5” style=“height：300...

nithinpillalamarri123

请大家帮我解决这个问题 editor.setComponents（html 文本）; 从已保存的模板HTML加载脚本后，脚本没有按预期运行 拖放保存后用 editor.setComponents（html 文本）加载 HTML 后，它就能正常工作; 然后用现有的脚本替换像“< >这样的符号，用浏览器相关的代码，这种情况只在版本0.16.34中出现

artf

你无法将生成的HTML代码加载回编辑器，请阅读关于如何正确存储和加载模板的文档 https://grapesjs.com/docs/modules/Storage.html

GJSBlock

谢谢你举报，@nithinpillalamarri123。 感谢你分享关于 grapes js 版本 v0.16.34 在加载已保存的 html 后出现意外脚本代码的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你...

查看详情

浏览所有主题