GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

状态

排序

找到 3,464 个问题

#50862023年5月2日作者 SagarMaria3 个回答

0 个反应

Style：property：update 和 Property onChange 都被过度触发

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 112.0.5615.137（官方版本）可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子如何复现这个漏洞？在 jsfiddle 中只需点击“Hello World”组件。观察大量控制台日志。点击画布上其他地方，重复。预期的行为是什么？ style:property:update 应该只在所选组件的样式属性更改时触发目前的行为是什么？ style:property:update 事件反而会多次触发，即使只是选择了某个组件如果需要执行某些代码...

artf

该行为是正确的，因为“style：property：update”会在风格管理器[属性]（https://grapesjs.com/docs/api/property.html#property）的任何更新时触发（不仅仅是其值）。所以针对你的具体情况，你需要以这种方式更新回调 “''js Editor.ON（'style：property：update'，（{ property， to }） => { 检查房产名称，以及更新是否与价值相关如果（property.get...

SagarMaria

你好，@artf感谢你的快速回复，但实际上问题的一部分仍然是，即使你做了更改，比如点击“中心”对齐无线电选项和你建议的 if 语句，后续选择该组件时，'style：property：update' 值仍然会被 loging 出去，'property' 和 'to' 仍是现有值（即使你不改动，只选择组件）。下面有个简短的视频，我也根据你的建议更新了 jsfiddle。有没有办法直接监听收音机值的变化，或者在样式管理器里点击不同的收音机选项？我也尝试使用属性的“onChang...

GJS Helper

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

查看详情

#50832023年4月29日作者 DanavsSite4 个回答

0 个反应

提问 style-manager 缺陷画布 typescript

方块不能拖到画布上

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？陶瑞可复制演示链接描述一下那个虫子如何复现这个漏洞？... 预期的行为是什么？ ... 目前的行为是什么？** ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则 [X] 我同意遵守本项目的行为准则

DanavsSite

![2023-04-29 143431-Greenshot]（https://user-images.githubusercontent.com/109663198/235335067-0d202a20-e26e-4fce-8d4d-168504175239.png）

DanavsSite

我刚发现是因为 WebView2。Webview2 的支持??!

artf

我觉得这更多是因为Tauri配置的问题，而不是GrapesJS，因为我们用的是原生的HTML5拖放功能

查看详情

#50792023年4月28日作者 TO-JHummel2 个回答

0 个反应

提问缺陷组件 typescript

Crash when dragging into nested components with Vue+Vite.

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 112.0.2（64位）可复制演示链接 https://github.com/TO-JHummel/grapesjs-子描述一下那个虫子如何复现这个漏洞？启动最小的vue+vite页面。将capitalizedfor块放入编辑器中。将一列模块放入编辑器中，放置在另一个模块之外。将capitalizedfor块上的每个div拖拽到1列块中。预期的行为是什么？方块只需直接放入柱中即可。目前的行为是什么？浏览器在放下最后一个块时会卡死。行为准则 [X] 我同意遵守本项目的行为准则

artf

这和这个[https://github.com/GrapesJS/grapesjs/issues/4497]类似，你必须把编辑器实例放在Vue实例之外，才能绕过它的代理

GJSBlock

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

查看详情

#50592023年4月19日作者 abubaker4172 个回答

0 个反应

提问 style-manager 缺陷 typescript

第二次使用模板Grapes编辑器时不接受编辑器第一次创建的随机ID的CSS

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？版本 111.0.5563.147（官方构建）（64位）可复制演示链接我在jsfilddle上无法实现可重复的版本。我在下面提供了详细说明。描述一下那个虫子如何复现这个漏洞？这是我 Grapes 年上传的模板，头部有风格标签的内联CSS，正体标签也有内联风格 https://jsfiddle.net/spiral417/udye5ov1/第一次 Grapesjs 从正体标签获取内联CSS，插入随机ID，并在这些ID中放入CSS。所以我保存了所有CSS样式，但当我第二次使用同一个模板和 grapes 提供的setStyle时， gra...

artf

@Spiral1234如果你无法重现问题，很可能是你这边的问题，没有可复现的演示，很难判断问题所在

GJS Helper

你遇到的问题源于GrapesJS在导入HTML时如何处理和规范样式，尤其是内联样式。让我们拆解根本原因，提供正确的方法。根本原因解释 GrapesJS导入HTML时，执行一个关键的样式规范化步骤：内联样式提取：对于具有style属性的元素（内联CSS），GrapesJS“提取”这些样式从HTML中移除。它从元素中移除style属性。唯一ID分配：为了维护样式，GrapesJS为该特定元素分配唯一标识符（例如data-gjs-id="cXXX"或生成类名如gjs-co...

查看详情

#50532023年4月17日作者 ngoc1992 个回答

1 个反应

提问组件缺陷 typescript 文档

在 v0.21.1 中，类型被改为“任意”

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ FireFox 112.0（64位）可复制演示链接没有演示链接描述一下那个虫子我最近从v0.20.1升级到了v0.21.1。很多在 v0.20.1 中存在的类型在 v0.21.1 中被改成了 any 。例如， v0.20.1 中的 Components.addType 类型是 AddComponentOptions ![图片]（https://user-images.githubusercontent.com/53241275/232444631-243b6872-1655-490b-b5b4-5c5ad546a315.png）...

artf

谢谢@ngoc199如果之前版本还有其他缺少声明的话，请告诉我

GJS Helper

这是与GrapesJS v0.21.1中TypeScript声明文件（.d.ts）相关的已知问题。问题的出现是因为某些核心功能的类型定义，如Components.addType和自定义组件中的model定义，在该版本中生成不完整或错误，导致TypeScript推断出这些类型的any。根本原因 GrapesJS 主要使用 JavaScript 编写，但它提供了 TypeScript 声明文件，以提供类型安全和更好的开发者体验。在 v0.21.1 中，这些 .d.ts 文件出...

查看详情

#50522023年4月16日作者 innothetechgeek2 个回答

0 个反应

style-manager 组件缺陷提问

通过Vue入口加载的样式无法工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬可复制演示链接无描述一下那个虫子我正在将 grape.js 插件集成到vue.js。我有一个预构建页面，里面有预构建的HTML和CSS。当我把页面vue.js组件加载到编辑器时，所有vue.js样式都会丢失。但如果我移除 grapeJs 初始化方法，样式就正常工作了。请帮帮我。我想把通过vue.js入口加载的样式加载到编辑器里行为准则 [X] 我同意遵守本项目的行为准则

artf

@innothetechgeek遇到真正的bug问题，你应该做一个可复现的演示，因为通常会有一些与核心本身无关的问题。无论如何，根据你的描述，你可能想通过['canvas' options]（https://grapesjs.com/docs/modules/Components-js.html#template-related）定义你的样式条目。

GJS Helper

你遇到的问题是，Vue.js入口加载的样式在初始化时丢失GrapesJS这是常见行为，源于GrapesJS如何隔离其编辑器画布。根本原因 GrapesJS默认会在一个<iframe>中渲染其编辑画布。iframe 创建了一个独立的浏览上下文，这意味着父文档中定义的样式（你的Vue.js应用运行的对象）不会自动应用到 iframe 内的内容。你的Vue.js样式是正确应用到主应用程序的，但GrapesJS画布作为 iframe 内的独立文档，不会继承这些样式。解决方案：将...

查看详情

#50492023年4月13日作者 ronaldohoch4 个回答

2 个反应

提问组件缺陷 style-manager typescript

Problem when dragging component composed by image and link

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？勇敢的最后版本可复制演示链接 https://jsfiddle.net/rp7oc96v/1/ 描述一下那个虫子嗨，亚瑟！我正在创建一个新组件，一个链接中的图片，就像 mj-image 组件一样，但我卡在一个配置里，或者说是个bug...... 如何复现这个漏洞？放置“Link na Imagem”块当你尝试从图片中拖拽新组件时， grapesjs 选择图片而不是组件根标签（<a>）如果需要拖动整个组件，我需要使用工具栏中的图标。预期的行为是什么？子组件没有父元素就不会。目前的行为是什么？如果子节点 img 元素没有属性 data...

gustavohleal

嗨！我测试过你的方案。它确实能正确更改图像，且将图像锁定在主组件内，你可以移动它。模型中的“src”属性会被更改，但当你移动组件时，它会回到占位符图像。如果你更改图片然后打开视图代码模态，你会发现“src”属性不像模型中那样发生变化。我认为这是因为Grapes在导出代码中没有为图片设置“id”。检查打印件：在组件丢弃时不设置图像： ![图片]（https://user-images.githubusercontent.com/22385451/232051993-20...

artf

@gustavohleal我的错误，你必须直接更新'src'属性，而不是属性'image.set（{ src： asset.getSrc（） }）;'

artf

使用 'data-gjs-locked=“true”属性忽略图片，正确更新你的自定义组件 “''js 移除runCommand（“open-assets”）; 因为在模型端运行它没什么意义你可以通过方块激活组件（https://grapesjs.com/docs/api/block.html#properties）通过使用“激活”属性 init（）{ editor.runCommand（“open-assets”）; } 在视图中处理资产更新浏览量：{ 事件：{ db...

查看详情

#50462023年4月12日作者 abubaker4174 个回答

0 个反应

提问缺陷常规

有没有办法在选定默认值 Float、Position 和 text-align 时移除交叉 svg

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？版本 111.0.5563.147（官方构建）（64位）可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子如何复现这个漏洞？这是你可以查看的图片链接 https://ibb.co/0Qg7nTK 预期的行为是什么？点击默认值时，叉图标应该会被移除;如果选择float值为零，那么十字图标应该会显示non 目前的行为是什么？当前行为的十字图标在选择默认值时不会被移除行为准则 [X] 我同意遵守本项目的行为准则

artf

@Spiral1234默认值和定义值之间有很大区别（即使默认值和默认值相同）。比如在桌面端你定义了“float： right”，在移动端定义“float： none”，你仍然需要在移动端上移除“ne”这个值。

abubaker417

@artf，让我再给你定义一次。我的问题是，如果我点击任何模块的默认值，比如float，我选择“none”，那么“cross svg”应该是“display： none”，就像我对其他模块“position”、“text-align”的设置一样。如果有人选择默认值，那么在即将重置的“交叉SVG”上方应标注为“显示：无”。我截图里提到了重置的跨SVG，默认值应该是“display： none”。谢谢

artf

@Spiral1234选择默认值时不应该是“显示：无”，请仔细阅读上述使用场景，默认值和选择默认值是不同的。

查看详情

#50452023年4月12日作者 ronaldohoch2 个回答

1 个反应

提问缺陷 typescript

重复元素会失去父元素的引用

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？勇敢的最后版本可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子如何复现这个漏洞？发布一张图片。选择掉落的图片。运行上面的代码。复制图像选择掉落的图像。运行上面的代码。集合为零image.view.modelOpt.at 是从原元素开始的位置。预期的行为是什么？重复元素不得失去对父元素的引用。目前的行为是什么？被重复的元素失去了父元素的引用。如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则[X] 我同意遵守本项目的行为准则

artf

@ronaldohoch请使用正确的[文档API]（https://grapesjs.com/docs/api/component.html） “''js editor.getSelected（）.parent（）; editor.getSelected（）.index（）; ```

GJS Helper

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

查看详情

#50422023年4月11日作者 pittleCheung2 个回答

0 个反应

提问缺陷 typescript

每次调用 editor.loadData（data， opts）时，都会触发编辑器中定义的存储方法。Storage.add（“api-remote”， {...}），该文件记录“api-remote store”消息

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？最新版本的Chrome浏览器可复制演示链接无效描述一下那个虫子如何复现这个漏洞？很简单预期的行为是什么？我想用editor.load来加载数据和切换页面，但我不想每次都调用编辑器。存储。目前的行为是什么？ “每次调用 editor.loadData（data， opts）时，都会触发编辑器中定义的存储方法。Storage.add（”api-remote“， {...}），该方法会记录'api-remote store'消息。” 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则 [X] 我同意遵守本项目的行为准则

artf

你可以动态更新“stepsBeforeSave”，以避免在存储调用时触发存储。下次请使用讨论区，因为这不是个bug，而是实现问题。

GJS Helper

你遇到的问题，即editor.loadData(data, opts)触发了自定义存储的store方法，这是常见的混淆点，但不是loadData本身的bug。editor.loadData方法的设计目的是导入数据到编辑器，实际上是设置其内容。它不会直接调用存储管理器的store方法。根本原因调用store方法是因为GrapesJS有自动保存机制。当你调用editor.loadData时，你是在更改编辑器的内部状态（组件和样式）。如果启用autosave选项（通常是默认或...

查看详情

GrapesJS 问题

浏览所有主题