GrapesJS 问题

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

找到 466 个问题

🔍 components
#47912022年12月19日作者 joukhar2 个回答
0 个反应

即使包含了Touch插件,Block:Drag事件在触摸设备上依然无法工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 桌面版本 108.0.5359.125 最新版本 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞? 当从块管理器拖拽组件时,事件不会触发。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js editor.on('block:drag',函数 (e, a) { 编辑。Commands.run('hide-panels') }) ```行为准则 [X] 我同意遵守本项目的行为准则

artf

谢谢@joukhar实际上“阻挡:拖拽”事件存在一些不一致,我会在下一个版本中尝试修复。

ClaudeCode

谢谢你举报,@joukhar。 关于block:drag事件在触摸设备上即使包含了触摸插件也无法正常工作,这个问题非常好。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('s...

#47652022年12月2日作者 wunksert4 个回答
3 个反应

官方的解析@keyframes方法并不起作用

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v107描述一下那个虫子 如何复现这个漏洞?按照[这里](https://grapesjs.com/docs/guides/Custom-CSS-parser.html#rule-objects)的说明创建你自己的CSS解析器,并输入@keyframes规则的CSS字符串。我用了这里预建的帖子解析器:[这里](https://github.com/artf/grapesjs-parser-postcss/blob/master/src/parser.ts)结构从解析器中导出并与文档匹配(见附图),但没有动画 <img width=“302”...

artf

你好@wunksert之前有个与关键帧相关的问题[这里](https://github.com/artf/grapesjs/issues/4727),已经修复但还没发布。

artf

修复该修复可在最新版本中 https://github.com/artf/grapesjs/releases/tag/v0.20.2

wunksert

@artf太棒了!你知道什么时候会发布吗?

#47632022年12月1日作者 quentin-bettoum2 个回答
0 个反应

_undoexc状态开放

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Firefox 106可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 你好, 当我从 0.19.5 升级到 0.20.1 时,我注意到用 'editor.getProjectData()' 获取的页面 JSON 比以前重了不少。 区别在于,在0.20.1中,JSON中的每个组件都包含以下代码: '''json “undoexc”:[ “状态”, “开门” ] 0.20.1 '''json “框架”: [ { “组件”: { “类型”:“包装器”, “可风格化”: [], “undoexc”:[ “状态”, “...

artf

哦,是的,那应该被删除,谢谢。

ClaudeCode

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

#47542022年11月30日作者 jasonliang-dev2 个回答
0 个反应

关闭脚本</script>属性的“''标签无法逃脱

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 107.0.5304.122(64 位) 可复制演示链接 https://jsfiddle.net/j5khz1gm/ 描述一下那个虫子 如何复现这个漏洞?创建具有以下默认属性的自定义组件类型: “''js { someText: “<\/script><svg onload='alert(1)'>”, “脚本道具”: [“someText”], 脚本:function() { this.innerHTML = “”; } } 行为准则 [X] 我同意遵守本项目的行为准则

derciesto

@jasonliang-dev,有最新进展吗?我也遇到同样的问题。

ClaudeCode

谢谢你举报,@jasonliang-dev。 关于关闭“</script>'标签未逃脱脚本属性的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.lo...

#47522022年11月28日作者 FaisalShaikhHA3 个回答
0 个反应

带有指针事件的组件:'all'(除封装器外)或可编辑组件可以拖拽并下放到自己身上。

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 107.0.5304.121(官方版本)(arm64)可复制演示链接 https://jsfiddle.net/artur_arseniev/aku70f5w描述一下那个虫子 如何复现这个漏洞?尝试拖拽可编辑组件或本身带有“指针事件:全部”CSS的组件。它会消失的。由于该操作执行无限循环,并在控制台上返回错误“未捕获范围错误:最大调用堆栈大小已超过”。即使将可拖拽的 false 设置为可编辑组件,它依然可以拖拽。 预期的行为是什么? 可编辑组件不应该像包装组件一样被拖拽到自己。 目前的行为是什么? 可编辑组件可以拖拽到自己。即使设置为可拖拽...

artf

演示本身有个问题,现在已经修复了(在包装组件中添加了“可拖拽:false”)

FaisalShaikhHA

getCSSS补丁让它始终返回可编辑组件的内容无法正常工作,你能帮我解决这个问题吗@artf 下面的代码(包含在可复现演示链接中)总是返回整个画布或包装器的CSS字符串。

ClaudeCode

谢谢你举报,@FaisalShaikhHA。 关于带指针事件的组件:“全部”(除了包装器)或可编辑组件可以拖拽到自己身上,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change',...

#47392022年11月20日作者 hemaltandel12 个回答
0 个反应

CSS 类名中 '/' 转换为 '-'

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Edge 版本 107.0.1418.52(官方构建)(64位)可复制演示链接 https://codesandbox.io/s/peaceful-glade-rbfbwt?file=/src/app/app.component.ts描述一下那个虫子 如何复现这个漏洞?用葡萄酱创建新应用调用 Grapejs 的初始化,使用默认配置。新增名为“test1/2”的新职业使用 developer toool 输入画布 html。它被重新命名为“test1-2”。 预期的行为是什么? 类别名称不应更改。它应该保持原名。例如test1/2 在之前的版本中,我们能够...

artf

你仍然可以使用“escapeName”选项 “''js 选择经理:{ escapeName: value => value }, ```

ClaudeCode

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

#47352022年11月17日作者 vaneatka3 个回答
0 个反应

ResetId类型不匹配

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 无 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞?.去 https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L1839..去 https://github.com/artf/grapesjs/blob/dev/index.d.ts#L1747 预期的行为是什么? ...resetId 应声明为方法。 目前的行为是什么? ...在 类型中,resetId 是一个可被 bool 消除的属性行为准则 [X] 我同意遵守本项目的行为准则

artf

第一个是分量方法,第二个是块性质([此处使用](https://github.com/artf/grapesjs/blob/81295f637aa2542db9ba2aefb3ce34f0d6489d71/src/block_manager/index.ts#L166-L168))

vaneatka

我打开这个问题的原因是该方法不可见。 也许需要在类型中为方法声明创建一个新条目?比如setID /*在组件上设置新ID。 / setId(id: string): this;

ClaudeCode

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

#47192022年11月9日作者 ronaldohoch1 个回答
0 个反应

尝试更改按钮和文字颜色时出现奇怪的行为

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://jsfiddle.net/qsd9zjrc/ 描述一下那个虫子 如何复现这个漏洞?打开链接(https://jsfiddle.net/qsd9zjrc/)尝试更改文字颜色尝试通过点击按钮更改绿色按钮颜色,然后进入排版![图片](https://user-images.githubusercontent.com/2287371/200911324-4575abf0-e42b-4d27-8793-ee0402f536b3.png)你会注意到颜色里有“!important”。![图片](https://use...

ClaudeCode

谢谢你举报,@ronaldohoch。 关于尝试更改按钮和文本颜色时出现奇怪行为的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('some...

#47042022年11月2日作者 PaulSchult1 个回答
0 个反应

Angular 组件作为自定义颜色选择器只能创建一次

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 104.0.5112.101 可复制演示链接 https://codesandbox.io/s/awesome-dewdney-bwo5t1 描述一下那个虫子 如何复现这个漏洞?将文本块添加到编辑器内容中打开风格管理器,扩展装饰部门注意红色占位符,通常标准选色器所在的位置(该文本是基本的角度分量)接下来,向下滚动到“背景”标签页,添加一个新的背景再次注意红色占位符文字点击葡萄内容的主内容,样式管理器切换到主体设置现在再次点击文本块,向下滚动到背景标签页并展开注意颜色属性的占位符文本没有出现如果你查看浏览器的控制台,你会发现在选择另一个元素时,角...

ClaudeCode

谢谢你举报,@PaulSchult。 关于Angular组件作为自定义颜色选择器只创建一次的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“chan...

#46542022年10月11日作者 malonecj3 个回答
0 个反应

文本节点自定义组件,包含特殊字符

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v105 可复制演示链接 https://codesandbox.io/s/fancy-brook-ppyc8v?file=/index.js 描述一下那个虫子 背景: 我正在尝试配置 grapesjs,使其能够编辑包含 [Liquid 模板语言](https://shopify.github.io/liquid/)的标记。因此,我想创建两种类型的自定义组件。一个模板块,形式为“{{some_variable}}”一个条件块,形式为“{% 如果条件 .... %}” 自定义组件应配置为允许用户修改组件的某些方面。 然而,似乎在实现第二个...

artf

你好@malonecj我不太确定你具体如何期望看到和管理这些组件(尤其是当你在条件内组合模板时),但我觉得你目前在“isComponent”中的处理方式不太正确,因为你必须处理文本节点。 在你的liquidhandle 'isComponent'里,你用的是'el.textContent',我觉得这应该和liquid condition用'el.nodeValue'类似,因为它只在文本节点上可用(可能最好确认一下它是否真的是文本节点'el.nodeType === 3')。...

artf

我决定关闭这个,因为核心本身没有问题,如果你还有其他问题@malonecj告诉我。

ClaudeCode

谢谢你举报,@malonecj。 关于文本节点自定义组件,包含特殊字符的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行...

浏览所有主题