GrapesJS 问题

paooolino

见这里 #3835

GJSBlock

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

YumiChen

@artf 补充一下，这两天我们也碰到了这个。这似乎只发生在“0.17.25”版本。以下是Jsfidle的转载，如有需要请查看： https://jsfiddle.net/a29h7twy/5/ 繁殖步骤：将组件拖入画布选择组件并点击设置按钮检查特征选择性状作为输入显示。在开发工具控制台中会显示一些警告

codingmachine16

你好@artf 这个问题依然存在。这什么时候能解决？ [特质]： 'select'类型未找到 {level： 'warning'}

codingmachine16

好的。当然。谢谢。供参考，这个问题在2022年0.17.000不存在

aliibrahim123

@artf

artf

不要用“model.extend”/“view.extend”，那是旧API的一部分。 这就是如何正确扩展所有成分性状的一个例子 “''js const { Components } = 编辑器; Components.getTypes（）.forEach（（{ id， model }） => { Components.addType（id， { 型号：{ 默认值：{ 特质：[ ...model.getDefaults（）.traits， 'new-trait'， ] },...

skru

这是个很棒的解决方案，有没有什么建议可以针对函数中定义特征的组件？根据文档：https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components

artf

我想你就是在找这个 https://grapesjs.com/docs/modules/Plugins.html

ryprfpryr

我想你在找这个 https://grapesjs.com/docs/modules/Plugins.html 嘿，@artf谢谢你的回复，但我真正需要知道的是如何给我的Grapesjs添加现有的扩展/插件。 我的主要目标是托管一个使用 demo 页面相同模块/扩展的 Grapsjs 实例。

artf

嘿，@ryprfpryr你可以在这里查看演示文件 https://github.com/artf/grapesjs/blob/gh-pages/demo.html

amansharmaagami

@artf 感谢你制作GrapesJS。

GJSBlock

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

ronaldohoch

我觉得这对你有帮助： https://stackoverflow.com/questions/55361499/how-to-implement-drag-and-drop-in-cypress-test

christosapos

我也尝试过类似的方法，但对我没用......我觉得我的问题是，grapesJ的画布被渲染成iframe，带有块的表格渲染在这个iframe之外，而Cypress当我点击一个块拖动并放入iframe时，却无法处理iframe内部的内容。如果你成功了，告诉我。

ronaldohoch

我开发阶段还没到测试阶段 ：/ 但我假装用Cypress。

artf

你必须[扩展]（https://grapesjs.com/docs/modules/Commands.html#extending）[ComponentDrag]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/ComponentDrag.js）命令

GJSBlock

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

mingxin-yang

@artf

artf

@mingxin-yang 你必须 [扩展]（https://grapesjs.com/docs/modules/Components.html#update-component-type） “mj-button” 组件的 [view]（https://grapesjs.com/docs/modules/Components.html#view）

GJSBlock

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

artf

如果你用默认命令显示/隐藏方块，可以通过“编辑器”来实现。Commands.isActive（'open-blocks'）'

GJSBlock

谢谢你举报，@aliibrahim123。 关于帮助：如何判断区块管理器面板是否打开，这个问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somet...

artf

你好@rajnishrao请尝试更新到最新版本。如果你仍然遇到这个问题，可以新开一期并附上可复现的演示。

GJSBlock

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