GrapesJS 问题

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

它们有附加的职业，我看到最新版本不再向元素添加职业了。 我不太明白你说的是什么，职业应该像以前一样导入。背景：我们使用定制组件，且一些默认设置（例如可拖拽、可调整大小等、样式）已更改。 如果你的自定义组件依赖于之前的默认属性，你只需要更新组件，但说实话，我甚至不记得任何核心组件有这样的改动。 请让我看看一些模板代码加载不良。

acip

嘿，谢谢你的快速回复。这是v0.14.5生成的模板 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb 看起来就是这样 https://ibb.co/Zz8qg2J 我们更改了一些自定义组件的默认属性和样式，并更改了dragMode='absolute'。其中一个问题是旧部件无法移动。 如果需要，我可以提供代码示例。

acip

我已经为现有模板设置了旧版本和新版本： https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html ![旧vsnew]（https://user-images.githubusercontent.com/...

GJSBlock

谢谢你举报，@anlumo。 createCustomEvent 无法正确处理鼠标事件的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于...

artf

只需在组件视图中移除该属性（例如在 onRender 方法中），这样你仍然能在最终 HTML 中获得该属性

GJSBlock

谢谢你举报，@tannguyen97。 感谢你分享关于当元素属性 tabindex = -1 时，无法用“control + C”复制的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么：** 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS...

lexoyo

你好 我正在尝试修复这个bug。 这更像是让我深入学习 grapesjs 代码的练习，告诉我我是浪费时间，或者听起来有用吗

GJSBlock

谢谢你举报，@japo32。 拖拽多个块导致顺序反转的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含...

artf

检查组件API参考中的“toolbar”属性，尝试在问题中搜索相关内容

GJSBlock

谢谢你举报，@ankx06。 关于我如何添加类似文本的图片组件自定义左侧工具栏，这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...

krishnaeverestengineering

@deiga我们正在做类似的事情。

artf

我会把特性附加到某个组件属性上，而不是类属性，根据值我会正确使用 [removeClass]（https://grapesjs.com/docs/api/component.html#removeclass）和[addClass]（https://grapesjs.com/docs/api/component.html#addclass）

GJSBlock

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

artf

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

GJSBlock

谢谢你举报，@vuongluc。 关于grapesjs lory slider的好建议！虽然这个具体功能还没在核心API中，但有几种方法可以实现类似的行为。 使用事件系统： 替代方法： 听取 CSS 选择器更改的 selector:add 使用 selector:custom 自定义规则 利用 change:* 事件进行细粒度跟踪 构建一个插件，扩展编辑器并具备此功能 正式宣布： 如果此功能能惠及更多用户，考虑在 GrapesJS 仓库中正式发起功能请求，内容包括： 详细的...

artf

我强烈建议阅读文档页面，如[组件]（https://grapesjs.com/docs/modules/Components.html）和[存储管理器] ]（https://grapesjs.com/docs/modules/Storage.html）涵盖了所有这些部分。

GJSBlock

感谢你举报，@ola-893。 关于FEAT：生成页面的JSON对象模型，这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...