GrapesJS 问题

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

找到 43 个问题

🔍 keyboard
#51592023年6月1日作者 CaptSadaf3 个回答
0 个反应

启用CKEditor后,无法在文本栏下拉选项中添加占位符

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://codepen.io/darrenbawag/pen/JjWBLrp描述一下那个虫子 如何复现这个漏洞?打开这个链接 https://codepen.io/darrenbawag/pen/JjWBLrp,尝试用这段代码显示 CKEditor 工具栏的占位下拉菜单,但只有当我们没有添加 grape grapesjs-plugin-ckeditor 时,下拉菜单才会显示。 “'' rte.add(”fontSize“, { 图标:“<select class=”gjs-field“> <option id=“defaultP...

CaptSadaf

CC:@jcamejo @artf

artf

这些动作只在内置RTE上使用,如果你用自定义RTE比如CKEditor替代,就看不到它们。你必须用 CKEditor 来实现自定义逻辑。

ClaudeCode

谢谢你举报,@CaptSadaf。 关于启用CKEditor后无法添加占位符下拉到文本字段下拉选项的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.lo...

#49202023年2月8日作者 c9a23342 个回答
0 个反应

De locale 的遗漏定位键

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 与浏览器无关 可复制演示链接 https://codesandbox.io/s/pensive-river-417grm?file=/index.js 描述一下那个虫子 如何复现这个漏洞?import grapesjs/src/i18n/locale/de.js在编辑器配置中将它用作一个位置 预期的行为是什么? 一切德语 目前的行为是什么? 除了英语缺少关键字外,还有“background-repeat-sub”、“border-width-sub”、“padding-top-sub”等。因此,即使你用的是德语本地编辑器,编辑器部分是英语的 如果需要...

artf

谢谢@c9a2334你愿意为这个修复贡献一下吗?

ClaudeCode

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

#48472023年1月15日作者 wunksert3 个回答
0 个反应

CSS的编辑不会被持久保存到DOM

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 109.0.5414.87描述一下那个虫子 如何复现这个漏洞?在 GrapesJS 画布上创建@keyframes动画在 JS 中,通过将以下字符串传递到编辑器中创建一个新的 CssRule。Css.addRules:将其添加到画布中:“编辑器。Css.addRules(updatedRule)' 预期的行为是什么? DOM应该更新 目前的行为是什么? DOM没有更新。但是,如果我调用“editor.getCss()”,我能看到不透明度的正确值返回了。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则[X] 我同意遵守本...

artf

似乎与 CssGroupRuleView [这里](https://github.com/artf/grapesjs/blob/e6a086afac77d8da73f225dd0aa84b3d178ec47b/src/css_composer/view/CssRulesView.ts#L64-L80)有关。对于像“@keyframes”这样的at规则,我们必须强制重新渲染父容器。

wunksert

@artf又遇到了“editor.”这个问题。CssComposer.remove(myCssRule)' 编辑器CSS会移除规则,但规则不会被冲入DOM。你建议我如何在保持编辑器状态不变的情况下强制重新渲染 DOM?“editor.refresh” 并没有把样式冲入 DOM

ClaudeCode

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

#47712022年12月7日作者 henry-mmw3 个回答
0 个反应

GrapesJS 不理解 '@-webkit-keyframe' CSS 规则。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v108 可复制演示链接 无关联 描述一下那个虫子 在编辑器中添加任何“@-webkit-keyframe”的CSS规则。显示为“@media”。 我现在给构建器添加了不少工具,似乎每当我添加任何webkit-keyframe的CSS规则时,编辑无法理解它们,显得“有@media”“的”。只是想知道它是否支持这个功能,我只是多心了,或者如果不支持,有没有什么办法可以帮你实现?行为准则 [X] 我同意遵守本项目的行为准则

ronaldohoch

我只是来这里开启同样的问题!:( @artf,你可以添加这个代码来检查。 “''js 编辑。CssComposer.addRules(' .animateanimated { -webkit-animation-时长:300ms; 动画时长:300毫秒; -webkit-animation-fill-mode:两者兼用; 动画填充模式:两者兼具; } @keyframes 渐入 { 0% { 不透明度:0 } 到 { 不透明度:1 } } .animatefadeIn {...

artf

报告并修复 [此处](https://github.com/artf/grapesjs/issues/4727)

ClaudeCode

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

#46072022年9月23日作者 RomanGlazkov2 个回答
0 个反应

当带子元素移动时的 JS 错误

葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v104可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞?选择一个元素按住CTRL键,选择子元素尝试移动这些元素 预期的行为是什么? 编辑器不允许移动 目前的行为是什么? 搬家没有发生,但出现了 js 错误 ![偷看 2022-09-23 15-20](https://user-images.githubusercontent.com/66161402/191958965-85b27a78-9e0d-4598-9324-697d67aef2f2.gif)行为准则[X] 我同意遵守...

artf

我想我们应该避免一开始就选择已经选定组件的子节点。

ClaudeCode

谢谢你举报,@RomanGlazkov。 关于带子元素移动元素时出现的JS错误的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事...

#46062022年9月22日作者 bit-ocean2 个回答
0 个反应

“Commponent & JS”文档页面上的脚本延迟错误。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 与问题无关 可复制演示链接 https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 描述一下那个虫子 嘿,与其为这么小的变动创建拉取请求,我直接在这里分享。 Basic Scripts at https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 的引入代码遗漏了一个关键词,可能会让新用户感到困惑或误导,因为页面上没有其他声明组件脚本的示例: “''js 型号:{ 默认值:{ 脚本, 行为准则 [...

artf

“脚本”就在上面 ![CCC](https://user-images.githubusercontent.com/11614725/192133350-34390584-4b07-4533-ac1b-15dcf33f1195.png) 附注:如果你不是在报告bug,可以使用讨论区

ClaudeCode

感谢你报告,@bit-ocean。 在“Commponent & JS”文档页面出现脚本延迟错误的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)—...

#44402022年7月11日作者 skru2 个回答
1 个反应

扩展文本组件会破坏可文本的块

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 版本 102.0.5005.115(官方构建)(64位)可复制演示链接 https://jsfiddle.net/trh1sbmk/17/描述一下那个虫子 如何复现这个漏洞?GoTo 提供的提琴。将“扩展文本组件”块拖入编辑器。尝试将“Textable Component”块拖入上一个块的文本中。 预期的行为是什么? 你可以在现有“文本”组件扩展的文本块内,将可文本块的任意位置拖动。 目前的行为是什么? 你只能拖到文本开头。 这在#3681中提到,但当时已关闭。 所以,是的,和之前 #2771 修复的文本组件问题一样。 这很奇怪,因为它允许你拖入可文本的...

artf

谢谢@skru是的,我确实有内部问题需要修复,才能正确处理扩展文本组件,但修复后,扩展文本组件时还要记住,使用“components”属性而不是“content”。 “diff” 默认值:{ 标签名:“p”, 样式:{填充:“25px”}, Droppable:确实如此,内容:“你好,扩展文本组件世界!!”components:“你好,扩展文本组件世界!!” }, ```

ClaudeCode

谢谢你举报,@skru。 关于扩展文本组件会破坏可文本块的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期...

#44222022年7月4日作者 m-jojo-s1 个回答
0 个反应

无法在触摸中移动可编辑的文本光标

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 102.0.5005.115(官方版本)(arm64) 可复制演示链接 https://jsfiddle.net/zeq457u0/ 描述一下那个虫子 如何复现这个漏洞?加载编辑器并启用触摸支持双击进入文本内容编辑模式回到启用触摸支持后,尝试点击鼠标移动光标 预期的行为是什么? 光标应放在触点 目前的行为是什么? 触控没有变化,只能通过触控拖动、鼠标点击(无触控)或方向键来操作 可能相关问题 #2244 #1649 如果修复需要时间,欢迎任何建议让我能解决问题,我会申请永久注册 行为准则 [X] 我同意遵守本项目的行为准则

ClaudeCode

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

#44162022年6月29日作者 bimsina2 个回答
0 个反应

无法用模板文字解析特征值(字符串插值)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v103.0.5060.53 可复制演示链接 https://codesandbox.io/s/grapes-js-template-literal-1p7sx2?file=/src/App.js 描述一下那个虫子 如何复现这个漏洞?添加带有自定义特征的新类型用以下方式解析性状值 “''js var inputName = “{[ firstName ]}”; 预期的行为是什么? 两者都应该显示从组件设置面板输入的特性值。 目前的行为是什么? 看起来特征值只能用第一种方式解析,通过字符串插值解析会得到{[ firstName ]},而不...

artf

抱歉,这不是bug,只是不是这样运作的。 无论如何,请务必查看最新的文档 https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts 因为这种传递属性的方法多年前就被淘汰了。

ClaudeCode

谢谢你举报,@bimsina。 关于无法用模板文字(字符串插值)解析特征值的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'))...

#43332022年5月17日作者 Merorh1 个回答
0 个反应

未捕获类型错误:无法读取 null 属性(读取“ownerDocument”)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chromium 101.0.4951.64(官方构建)快照(64位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?选择图片并调整大小——并按住鼠标按键调整大小通过键盘删除按钮删除图片,同时按住鼠标并调整图片大小 预期的行为是什么? 图片已删除 目前的行为是什么? 图片被删除,控制台显示大量错误日志: 后者日志的实例随着每次新的操作和错误重复而不断增加。行为准则 [x] 我同意遵守本项目的行为准则

ClaudeCode

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

浏览所有主题