GrapesJS 问题

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

找到 336 个问题

🔍 style-manager
#52322023年7月11日作者 bgrand-ch4 个回答
5 个反应

工作者 - 无头“文档未定义”

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 114.0.5735.133 可复制演示链接 不可能添加工蚁来繁殖。 描述一下那个虫子 如何复现这个漏洞?添加一名网页工作人员。在工作者内部初始化 GrapesJS,并设置“无头”选项。添加一个带有“编辑器”的插件。DomComponents.addType“ + ”styles“。给员工发消息。参考文献错误:文档未定义。 预期的行为是什么? 在工作程序中使用 GrapesJS 时,可以避免出现“ReferenceError: document is not fined”错误。 目前的行为是什么? 参考错误:文档未定义。 如果需要执行某些代码以重现该...

artf

你好,@bgrand-ch,不幸的是,所有涉及解析器(HTML/CSS)的内容都需要使用与DOM相关的API。对于CSS,也许你可以试试用[parser-postcss插件](https://github.com/GrapesJS/parser-postcss),我预计它能在工作环境下工作

bgrand-ch

你好,@artf,非常感谢你的快速回复😄,我这周会试试看。

bgrand-ch

@artf Post CSS 解析器插件在 Web Worker 中运行得非常完美!谢谢你的帮助。

#52292023年7月10日作者 joukhar4 个回答
1 个反应

内容为“null”的TextNode被渲染为“null”,而不是空白

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 114.0.5735.199(官方构建)(64位)可复制演示链接 无描述一下那个虫子 如何复现这个漏洞?丢弃该组件 '<div class=\“flex items-center rounded shadow-md overflow-hidden max-w-xl relative dark:bg-gray-900 dark:text-gray-100\”> <div class=\“self-stretch flex items-center px-3 flex-shrink-0 dark:bg-gray-700 dark:text...

artf

大概是在八月的第一周

artf

你好@joukhar最新版本是不是也这样? 如果我用你的 JSON 示例,我能在导出代码中看到“null”(这应该可以修复),但我无法用你的 HTML 示例生成带有 “null” 的 “textnode”,你能为这个用例创建一个可复现的演示吗? 不确定在哪种情况下textnode可能是“null”,但我们可以肯定能防止这种情况......

joukhar

谢谢你的重玩,如果你需要试玩版,请给我点时间,等我做完会再评论 问题只在存储和加载时出现,但第一次丢弃组件时却没有反应

#52212023年7月7日作者 Staubgeborener2 个回答
0 个反应

移动设备上的桌面版本

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Safari 16.5可复制演示链接 https://grapesjs.com/demo.html https://staubgeborener.de/描述一下那个虫子 我试用的是官方的[演示](https://grapesjs.com/demo.html)。我什么都没改,只是点击“查看代码”按钮,把html和css文件下载成压缩包。这些文件上传到了我的网页服务器,桌面设备运行良好。但只要我用移动设备(比如iOS——Safari浏览器)访问这个网页服务器,网站还是桌面版,而不是移动版。演示本身已经实现了移动端版本。 如何复现这个漏洞?访问 https:/...

artf

这与核心无关,只是导出 HTML 中缺少一个元标签demo.html '''html <meta name=“viewport” 内容=“width=device-width,initial-scale=1”> ``` 如果你想提交永久居民申请,我很乐意帮你合并

ClaudeCode

谢谢你举报,@Staubgeborener。 关于错误的移动设备上的桌面版,这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('so...

#52072023年6月28日作者 gxanshu3 个回答
1 个反应

创建多页面时的重复CSS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome最新款 可复制演示链接 https://codesandbox.io/s/withered-bush-wv29dx?file=/index.js 描述一下那个虫子 如何复现这个漏洞?...在 grapesjs.init() 中创建多页面...检查每页的样式 预期的行为是什么? 每个页面都包含自己的样式,不包括其他页面的CSS ... 目前的行为是什么? 目前所有页面的CSS将合并并应用于所有页面。欲了解更多详情,请访问复制链接并查看所有页面的代码 ... 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 简单的演示代码 从...

artf

这是有意为之,我不打算改变这种行为,因为如果你需要每页不同的样式,可以很容易地创建特定的 CSS 选择器。 这种方法的最大好处是允许在不同页面间重复使用选择器。

hasan-aa

我觉得我遇到了这种方法的问题。 我把页面保存到服务器上是这样: “JS const component = page.getMainComponent(); const css = editor.getCss({ component, avoidProtected: true }) saveToBackendApi(component,css) 针对 ID 的 CSS 规则运行正常,但带类的规则即使加载在不同页面时也会重复。 例如,'.gjs-row' 类的 #s 规则在每...

ClaudeCode

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

#51842023年6月14日作者 acantepie2 个回答
1 个反应

Ckeditor组件工具栏未正确刷新

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 版本 113.0.5672.126(Build officiel)(64 位)可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html描述一下那个虫子 如何复现这个漏洞?访问演示网站:https://grapesjs.com/demo-newsletter-editor.html清空画布并添加文字块两次: https://github.com/GrapesJS/grapesjs/assets/12775815/b6bf6a1a-6907-4054-a93b-f5939efb353f => 第一个工具...

artf

谢谢@acantepie请在[proper repo](https://github.com/GrapesJS/ckeditor)中打开问题,因为这不是核心相关的问题

ClaudeCode

谢谢你举报,@acantepie。 关于ckeditor组件工具栏没有正确刷新的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somet...

#51732023年6月9日作者 FaisalShaikhHA3 个回答
1 个反应

编辑。Css.setRule API 没有按预期工作,它没有更新现有规则。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 112.0.5615.137(官方构建)(arm64) 可复制演示链接 https://jsfiddle.net/yhj6qa1u/6/ 描述一下那个虫子 如何复现这个漏洞?选择一个组件,并使用样式管理器添加样式。使用'编辑器'。为了为该组件设置某种样式,请注意之前的样式已被移除,但根据文档,它应该会更新 CSS 规则。 预期的行为是什么? 它应该更新现有规则。 目前的行为是什么? 它取消了现有规则,而不是更新现有规则。 https://github.com/GrapesJS/grapesjs/assets/102785785/28560d08...

artf

你好,@FaisalShaikhHA这是预期中的行为,但我猜“setRule”的文档有点误导。规则实际上是更新的(不会用相同的选择器创建新的规则),但样式只是被替换。 如果你需要添加新样式而不是替换它们,这就是你应该做的 “''js const selector = '#${this.getId()}'; const rule = 编辑器。Css.getRule(selector); 编辑。Css.setRule(selector, { ...统治?getStyle(),...

FaisalShaikhHA

感谢@artf的澄清

ClaudeCode

谢谢你举报,@FaisalShaikhHA。 关于编辑器的好问题。css.setRule API 没有按预期工作,它没有更新现有规则。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', (...

#51562023年5月31日作者 loclovepop3 个回答
0 个反应

手机屏幕上拖放不了,连加葡萄触摸都做不到

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome,IOS可复制演示链接 https://www.lovepoptestsite.com/products/disney-s-hocus-pocus-black-flame-candle-pop-up-card?variant=40356218077273&previewlink=124907487321 密码:ilovecards描述一下那个虫子 如何复现这个漏洞? 我试过用 Grapejs 编辑器在手机屏幕拖放,一切都没问题。但我尝试在注入编辑器测试存储后做,结果并没有达到预期效果。 预期的行为是什么? ...它应该允许拖放组件 目前的行为...

loclovepop

[screencast-www.lovepoptestsite.com-2023.06.01-001711.webm](https://github.com/GrapesJS/grapesjs/assets/124012807/a171fbbb-dd8b-45a6-901c-d0c2519c8304) 这是关于bug的视频

artf

我看到触摸插件是正常工作的,确保加载时启用移动设备(比如加载后不要模拟),这样聚合物填充才能正确加载。

ClaudeCode

谢谢你举报,@loclovepop。 关于手机屏幕无法拖放,连加葡萄-触摸都不能的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”...

#51542023年5月31日作者 jmtt894 个回答
6 个反应

TS2416:类型为“PropertyStack”中的属性“_up”不可分配给基类型“PropertyComposite”中的同一属性<PropertyStackProps>

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? ---- 可复制演示链接 https://codesandbox.io/p/sandbox/pensive-browser-mfhxp8 描述一下那个虫子 如何复现这个bug?创建Angular项目添加 grapeJS 依赖在tsconfig(用于骨干网)中包含“allowSyntheticDefaultImports”: true”为 GrapeJS 创建包装组件在项目中使用包装组件 预期的行为是什么? 渲染葡萄JS编辑器目前的行为如何? 构建时就坏了 行为准则 [X] 我同意遵守本项目的行为准则

marktamis

我把一些tsconfig设置从一个正在运行的vite gjs项目复制到我的stenciljs项目里,现在它运行正常了。我觉得你需要对你的 Angular TSCONFIG 做些调整,这样它就不会再抛出错误了 下面是我正在运行的 Stencilsjs TSCONFIG: 似乎正是这个功能让编译成为可能的原因

Deepakanandrao

“skipLibCheck”:true, “skipLibCheck”: true “”成功了。谢谢@marktamis 👍

artf

是的,在我找到该TS输出😞的修复之前,这里需要用“skipLibCheck”: true”

#51352023年5月22日作者 duclet2 个回答
0 个反应

StyleManager.addProperty 的类型定义错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 全部 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞?根据这里的定义:https://github.com/GrapesJS/grapesjs/blob/dev/src/stylemanager/index.ts#L304,你应该把选项作为“PropertyProps”的“选项”来提供。然而,这里定义的“PropertyProps”:https://github.com/GrapesJS/grapesjs/blob/dev/src/stylemanager/model/Property.ts#L9,并不具备这样的属性。这导致TS编译器开始抱...

SachinPuthiyoth

看起来 StyleManagerConfig.sectors 中的类型定义没有变化 : https://github.com/GrapesJS/grapesjs/blob/5c890449a52f526bc480d6dc649ff5e01ec59140/src/stylemanager/config/config.ts#L8 我们是不是应该更新它,使用像 PropertyTypes 这样的功能: https://github.com/GrapesJS/grapesjs/bl...

ClaudeCode

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

#51312023年5月20日作者 sdimitrenco2 个回答
0 个反应

JSON.stringify 之后,组件并非所有字段都存在

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://jsfiddle.net/sdimitrenco/rn8u4pc0/7/描述一下那个虫子 我不确定这是不是bug,但对我来说,这种行为看起来很奇怪 我有一个组件列表,包含组件ol和组件LI。 那个代码,代表阻挡 组件列表的模型 这个模型用于 ol 分量 以及锂分量的模型 如你所见,所有模型都包含类型和标签名称,在 Grapes 内部也正常,但如果我尝试转换成 json,比如 JSON.stringify(this.grapesInstance.getComponents()),我有 json 丢失了带标签名的所有字段,看...

artf

如果属性的值与默认定义相同,则跳过。这由 ['avoidDefaults'](https://github.com/GrapesJS/grapesjs/blob/e217dc75d463a84333ee4d9f37216f4f56c77024/src/editor/config/config.ts#L250-L256) 配置选项控制,强烈建议尽量保持 JSON 小。

ClaudeCode

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

浏览所有主题