GrapesJS 问题

ClaudeCode

谢谢你举报，@gMakaan。 关于FEAT： 代码查看器——前往选定画布块的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...

artf

感谢你的报告，修复已经准备好下一次发布。

rahul-singh-bv

我在v0.19.5尝试在自定义代码块内添加iframe时也遇到类似问题

ClaudeCode

谢谢你举报，@jcsofts。 错误 TypeError：无法读取未定义的属性“长度” 发生在 Canvas 尝试访问属性时，尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法： 如果你控制代码，可以用空检查包裹调用： “JavaScript if （component && typeof component.method === 'function'） { 你的准则 } ``` 根本原因分析： Canvas 在调用你的方法之前不会验证状态。当...

artf

你好@AStoker我不太明白你举例的真正问题是什么（除了没有在你的阴影主导里加载GrapesJS风格之外）。如果你绑定了 shadowdom，显然你不能做这个“容器”：'#gjs''，但你仍然可以像示例中那样传递 HTMLElements，那问题出在哪里？

AStoker

问题是我必须在每个地方传递HTML元素，不能使用选择器。这写起来可能很麻烦，因为我现在必须用shadow Dom的查询选择器来处理每个面板、每个元素，任何我们连接到GrapesJS的内容。 此外，如果有容器的概念，将大大帮助隔离 GrapesJS 不干扰应用的其他部分。随着越来越多的应用使用组件和自定义元素，组件间的适当隔离变得非常重要。GrapesJS 会自动从 CDN 拉入 font-awesome（也是从 CDN 拉入）到页面根，这并不理想，因为很容易存在风格冲突。如...

AStoker

我更新了JSFiddle，这样你可以看到我们在Shadow DOM中获得样式需要做些什么。但不幸的是，GrapesJS 自动添加的 CSS 存在于正体上，这不仅污染了全局样式表，还因为 GrapesJS 在 Shadow DOM 内部而毫无意义。

artf

好的，那我会试着在下一个版本修复它。

artf

嗯，我不太确定具体怎么修复，你说“GrapesJS代码中是否使用新Function（）”是什么意思？因为源代码里没有这个。

aimeos

后来发现它在dist文件里是因为underscore.js template（）方法，它使用了“new Function（）”。我认为这将使得在没有“不安全评估”的情况下替换或移除强制执行CSP的依赖变得困难。

artf

你好@vuongluc，可能是加载HTML/CSS编辑时有问题。你应该存储并加载JSON数据，看看[这个指南]（https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates）

ClaudeCode

谢谢你举报，@vuongluc。 关于葡萄糖小块的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构建一个插件，...

artf

你好@anlumo，你有没有尝试用类似“要求：{ position： ['static'] }''来扩展浮点定义？

anlumo

![图片]（https://user-images.githubusercontent.com/644763/124964896-d494db80-e021-11eb-9b11-8741d07476bf.png） 是的。重新加载页面后似乎没问题，但切换位置后就停止工作，看起来就像截图里那样。 定义如下： “''js { 名称：“布局”， 开场：假， buildProps： ['position'， 'top'， 'bottom'， 'left'， 'right'， 'flo...

ClaudeCode

谢谢你举报，@anlumo。 关于FEAT：在样式管理器中允许要求默认设置的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...

anlumo

我通过完全关闭“on-andload”处理，自己滚动来解决这个问题。

artf

编辑器有“编辑”属性，只要启用或禁用RTE就会改变，所以我猜在你的情况下，这个功能应该可行 “''js editor.on（'' change：editing'， （em， editing） => { window.onbeforeunload = 编辑 ||editor.getDirtyCount（） ？e => 1 ：零; }); ```

anlumo

这个在 onbeforeunload 处理程序之后不会被我上面提到的那个片段覆盖吗？

artf

是的，那会很酷，但遗憾的是，GrapesJS 还没有合适的 UI 模块，可以让用户通过重复使用其他组件轻松构建新的 UI 组件，所以 ['StyleManager.addType']（https://grapesjs.com/docs/api/style_manager.html#addtype） 是唯一的办法，但在这种情况下，所有元素的构建权就得你自己决定。

ClaudeCode

谢谢你举报，@kuhelbeher。 关于FEAT：能够将所有边距、填充等属性合并的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：...

ahmedderkaoui

尽量用'VH'代替'PX'。 例如：给编辑器“height： '80vh''，给导航栏'height： '20vh'''。这样，只要所有元素的“vh”之和≤100，纵向滚动就永远不会显示或需要 希望这些信息对你有帮助。

samichamoun

尝试用“VH”代替“px”。例如：给编辑器“height： '80vh''，你的导航栏'height： '20vh''。这样，只要所有元素的“vh”之和≤100，纵向滚动就永远不会显示或需要希望这些对你有帮助。 谢谢，这很有用！

artf

这更多是布局问题，与GrapesJS编辑器本身无关。

ClaudeCode

谢谢你举报，@divesham。 关于特技：添加自定义块（即iframe）并像图片一样自定义，比如双击后打开自定义素材选项，在自定义iframe块中链接视频，这真是太棒了！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改...