GrapesJS 问题

artf

我能正确看到你的例子，所有特征都正常工作。你能制作一个可重复的演示吗？

no-response[bot]

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

GJSBlock

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

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 内部而毫无意义。

ronaldohoch

也许通过这些事件你能做到：https://grapesjs.com/docs/api/editor.html#blocks 或 https://grapesjs.com/docs/api/editor.html#canvas

artf

在这种情况下，可能只有完全自定义的块管理器界面（比如用你自己的块管理器组件在Angular中渲染）。这应该已经是可行的，但我更愿意花时间更新[Blocks]（https://grapesjs.com/docs/modules/Blocks.html）文档，包含从零开始构建BlockManager UI所需的所有步骤和示例。

hadeel94

在这种情况下，可能只有完全自定义的块管理器界面（比如用你自己的块管理器组件在 Angular 中渲染）。这应该已经是可行的，但我更愿意花时间更新[Blocks]（https://grapesjs.com/docs/modules/Blocks.html）文档，包含从零开始构建BlockManager UI所需的所有步骤和示例。 谢谢你的回复，我还有其他问题： 1- 我试着在画布里添加带有样式的 div，但它不能编辑，也不能拖拽，只能只读，这可能吗？ 2- 我能否将RTE作为...

mosh-tudor

@maekawataiki 这个问题已经修复，但还没正式发布——https://github.com/artf/grapesjs/issues/3497

GJSBlock

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

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

你可以这样做： “''js tagListElement.on（'select2：select'， e => this.onChange（e））;onChange 会正确触发 onEvent ```

iteniel

@artf谢谢 你能帮我回答问题的第一部分吗 我需要类似 onPostRender/afterRender 的工具，在 DOM 存在时初始化 select2 组件 createInput 方法之后的某个词

GJSBlock

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

artf

感谢@moises-flowize，这个问题将在下一个版本中修复 https://github.com/artf/grapesjs/commit/ac96298add119c4f4e000967ab3332f9ad711613

GJSBlock

谢谢你报告，@moises-flowize。 Command core：component-enter 在所有情况下都无法正常工作的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重...

artf

我会在下一个版本中加入iframe支持。

GJSBlock

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

artf

这更多是布局问题，你可以通过在所有图片中添加你的CSS来轻松解决，比如说，'img { 最大宽度：100%; }`

GJSBlock

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

artf

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

GJSBlock

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