GrapesJS 问题

artf

定义组件后，你可以自定义工具栏数组 “''js 默认值：{ ... 工具栏：[]， // 这将阻止其在组件上的渲染 } ```

GJSBlock

谢谢你举报，@sprklinginfo。 感谢你分享关于隐藏内部组件工具栏的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识别和优先排序修复。Grap...

artf

你必须[扩展自定义组件的视图]（https://grapesjs.com/docs/modules/Components.html#view）

GJSBlock

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

adamwpe

啊，如果我用这个 https://github.com/artf/grapesjs-custom-code，保存时不会修改 html。 但使用“gjs-preset-newsletter”时，这个方法无法实现。 因为如果你运行命令 'gjs-get-inlined-html'，它会修改代码。 E.g. HTML代码： 运行 'gjs-get-inlined-html'，它输出： 我猜你没办法阻止这种情况吧？

artf

你不能插入无效的HTML。如果你需要处理这些，你必须创建一个[自定义组件]（https://grapesjs.com/docs/modules/Components.html），然后它会输出自定义代码。

GJSBlock

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

adamwpe

替换为#3139

GJSBlock

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

artf

首先，你需要升级你的 Grapesjs 版本（你用的是两年前的版本），然后你还得提供一个问题的实时演示。

no-response[bot]

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

GJSBlock

谢谢你举报，@Asha1597。 当我选择某个特定元素时，我无法获得它的样式。这个问题只发生在某些元素上。 似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandb...

Joshmamroud

@archerbj这里有你想要的演示：https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js 你应该把功能绑定在“组件类型”本身，而不是试图找到该组件的所有实例并在某个更改时添加。为此，创建一个新的“组件类型”，扩展“视频”类型，然后在视图中添加“dblclick”事件处理程序。一旦有了这个，你就可以创建一个使用新组件类型的块。 这里有一些关于[如何扩展组件类型]（https://grapesjs.com/doc...

archerbj

@archerbj这里有你想要的演示：https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js你希望把功能绑定到“组件类型”本身，而不是试图找到该组件的所有实例并在更改时添加。为此，创建一个新的“组件类型”，扩展“视频”类型，然后在视图中添加“dblclick”事件处理程序。一旦有了这个，你就可以创建一个使用新组件类型的块。这里有一些关于[如何扩展组件类型]（https://grapesjs.com/docs/mo...

abulka

@Joshmamroud 谢谢你举这个例子。我能找到的唯一一个使用文档中提到的“扩展”功能的例子是你的。 你的例子非常简单且禅意——但它只是展示了给视频组件添加“dblclick”处理程序，并没有显示添加额外的组件属性或属性和特征。你能解释一下或者举个例子吗？因为我很难理解如何使用“extend”——正如我在#3060中提到的那样。

artf

你好，José，你能提供你问题的截屏吗？我试过拖动模板的最后一部分，但对我来说一切正常

josfh2005

你好@artf， 你可以在这里看看，https://recordit.co/vn1ZVN6J1N 不是在各个部分，任何元素都会这样，但只有第一次尝试拖动时才会。

artf

啊，明白了，只是第一次，我现在也👍拿到了

Joshmamroud

@artf你知道这是在组件、RTE还是其他地方发生的吗？你能指点我正确的方向吗？如果有人能帮忙，我将非常感激。谢谢！

artf

我没法复现，但我看到你用的是自定义的“dm-text”组件，这可能是原因？！

Joshmamroud

@artf 我不这么认为。以下是 dm-text 组件类型的配置 “JavaScript” { 扩展：“文本”， 型号：{ 默认值：{ 名称：“文本”， 特征：[]， 可编辑：正确， 可掉落：错误， textable：确实如此， 风格：{ 填充：“10像素”， 宽度：“100%”， 高度：“自动” }, 可造型：[ “背景色”， “页分内”， “颜色”， “文本对齐” “font-size”， “字体家族”， “字体粗细”， “线高”， “边框宽度”， “边框颜色”， “边...

artf

ComponentFusionView？那肯定不是主 grapesjs 核心的，我们没有那个组件......很可能你用的是某种修改过的版本，这可能是导致错误的原因

GJSBlock

谢谢你举报，@lebonsavane。 错误 Error：需要 Babel “^7.0.0-0”，但加载时为“6.26.3”。如果你确定自己有兼容的@babel/核心版本，很可能是构建过程中加载了错误版本 发生在组件在组件生命周期完全初始化前尝试访问属性时。这是GrapesJS中常见的竞争条件。 立即解决办法： 如果你控制代码，可以用空检查包裹调用： “JavaScript if （component && typeof component.method === 'func...

sprklinginfo

发现已经通过使用“dragMode： 'absolute'实现了。谢谢。

GJSBlock

谢谢你举报，@sprklinginfo。 关于FEAT：在鼠标点击的位置放置一个组件，这是个很棒的建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“ch...