PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 545 个问题
🔍 typescriptGrapesJS 版本 [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拖放功能
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...
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...
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 文件出...
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...
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...
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 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 111.0.5563.147（官方构建）（64位） 可复制演示链接 我提供了代码 描述一下那个虫子 增加了可样式事件，使样式可以覆盖 https://github.com/GrapesJS/grapesjs/issues/1041 https://github.com/GrapesJS/grapesjs/pull/1056 @tommedema，@artf你能帮我查一下吗？ 我用这个逻辑来覆盖一个风格 使用这个功能时，样式第一次被覆盖，第二次从style-manager中移除样式后再添加时，样式无法使用，也没有样式。 刷新后又重新激活...
GJSBlock
感谢你报告，@abubaker417。 添加可样式事件导致样式可以被覆盖、开启的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快...
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 https://jsfiddle.net/em9kt2Lb/描述一下那个虫子 如何复现这个漏洞？ 在编辑器加载时实现下面的代码 预期的行为是什么？ 按钮标题会变，也会保持变化 目前的行为是什么？ 按钮标题会变，但点击一个后又会恢复原状。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则[X] 我同意遵守本项目的行为准则
artf
你好，面板按钮的 @at-code 标题直接连接到 [i18n locale strings]（https://github.com/GrapesJS/grapesjs/blob/976e791c5abd6f876a0f29b58de32ff1549f32c2/src/i18n/locale/en.js#L48），所以你需要在那里更新这些字符串。你可以在这里找到更多关于i18n模块的信息[https://grapesjs.com/docs/modules/I18n.html...
GJS Helper
你遇到的问题，即点击按钮标题后会恢复，源于直接操作 GrapesJS UI组件中的DOM元素。 GrapesJS，像许多现代Web框架一样，通过底层数据模型和视图管理UI（通常内部使用Backbone.js面板和按钮）。当你直接用jQuery更改 title 属性时，你绕过了模型视图架构。在交互（比如点击）时，相关视图可能会根据模型重新渲染或更新状态，实际上覆盖了你的直接DOM更改。 根本原因： 直接操作 GrapesJS 面板按钮（例如使用 $(elem).attr('t...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v111 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-forked-h3j496？file=/src/index.js 描述一下那个虫子 如何复现这个漏洞？用 Reactjs 启动一个项目 grapesjs 编辑器初始化后立即使用 loadProjectData(data) 通过 editor.onReady(() => { editor.runCommand("preview"); }); （或任何其他方式）设置预览模式 预期的行为是什么？ 编辑器应该...
julia-alberici
声明一下，这其实不算是个bug，我能实现预期的行为，替换了'editor.onReady（（） => { editor.runCommand（“preview”）; }）;' 与 'editor.on（'update'， （） => { editor.runCommand（'preview'）; }）;`
GJS Helper
你遇到的问题是，尽管GrapesJS组件在loadProjectData()后运行了preview命令，仍然保留编辑模式的行为（比如悬停/选择样式），这是与异步操作相关的时序问题。 根本原因 当你初始化GrapesJS并立即调用editor.loadProjectData(data)时，这个操作是异步的。editor.onReady()回调会在编辑器实例本身完全初始化并准备交互时触发，但它不会等待loadProjectData()方法完成将项目组件渲染到画布上。 因此，当e...