GrapesJS 问题

artf

这个问题是由于 AdoptStylesheet 的工作方式，类似于 lit-element 的这个（https://github.com/lit/lit-element/issues/1139）。 基本上，你不能在多个文档中共享同一个CSSStyleSheet，所以必须手动重新创建，下面是一个自定义元素的代码，以支持adoptedStyleSheets。 “''js 编辑。Components.addType（'custom-element'， { isComponent：...

vasicvuk

有没有什么解决方案可以让lit-element components 3.X配合grapesJS使用？

GJSBlock

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

artf

这样做 'isComponent： el => （el.tagName ||''）.toLowerCase（） === 'mj-body'，'

GJSBlock

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

GJSBlock

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

mingxin-yang

https://grapesjs.com/docs/modules/Components.html#define-custom-component-type，这个？@artf

artf

要一键启用富文本编辑器，可以通过这种方式扩展原始文本组件 “''js 编辑。Components.addType（'text'， { 浏览量：{ 事件：{ input： 'onInput'， // 保留原始的 on input 事件，该事件更新 RTE 工具栏位置 点击：“enableRte”， }, enableRte（） { this.onActive（） } }, }); ```

artf

我建议创建一个自定义组件，并将“removable”属性设置为“false”

artf

嘿@Joshmamroud这里其实有个关于文本成分的普遍问题 #2771

Joshmamroud

谢谢你，@artf。我觉得我的问题更多是自定义组件，它扩展了文本组件。Textable在原始文本组件中工作正常，但当我尝试创建自己的自定义文本组件时，就遇到了问题。不仅仅是Textable，我注意到扩展文本组件也会失去一些其他功能。我现在一时想不起具体的。是不是我在扩展文本部分方面做错了什么？

artf

从你的演示来看，我没看到扩展的“文本”部分有问题，只有与文本相关的问题

GJSBlock

谢谢你举报，@rywilson28。 徽章“即使元素下方有空间，也可能遮挡元素内容，这似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更...

artf

我在这里发了一个变通方法 https://github.com/artf/grapesjs/issues/3693

artf

嘿，@sriya-srinivasan，你能做一个可复现的演示吗？

artf

@sriya-Srinivasan，有什么最新进展吗？

artf

使用组件优先样式 “''js Grapesjs.init（{ ... 选择经理：{ componentFirst： true， ... }, }) ```

GJSBlock

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

artf

你好@TRIGGEREDcoder，预设网页插件存在问题，该插件引用了包含该漏洞的旧表单插件。所以，我决定关闭这个插件，因为它不属于核心，并且会很快更新插件引用。

GJSBlock

谢谢你举报，@TRIGGEREDcoder。 “表单按钮名称的更改没有被生成的HTML代码捕捉到的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：** 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox...

GJSBlock

感谢你报告，@NoumanAhmad-Braqsol。 关于 [QUESTIONS] editor.setComponents（html） 和 pageManager.select（pageId） 不要加载 js 脚本 的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方...