GrapesJS 问题

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

找到 220 个问题

🔍 canvas
#36732021年8月5日作者 imouou2 个回答
0 个反应

Option resizable:True会在Canvas中更改所有相同的组件。

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl Version: grapesjs-0.17.22 你能重现演示中的bug吗?[] 是的[ ] 不 预期的行为是什么? 在改变元素大小时,不应同时导致其他相同组...

artf

使用组件优先样式 “''js Grapesjs.init({ ... 选择经理:{ componentFirst: true, ... }, }) ```

ClaudeCode

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

#36682021年8月3日作者 anatoli-dp4 个回答
0 个反应

移动/缩放后无法重置画布

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么? 一种在缩放和移动后将画布重置回默认位置的方法。 详细描述你的功能需求详细 缩放后再移动画布后,你可以创建一个函数,调整大小并将...

artf

我不太明白你的问题,具体是怎么移动/缩放画布的?这无关,但有没有功能可以调用来缩放内容,而不是画布?比如我想放大,比如放在某个非常高DPI的页面上,以便更好地编辑。还是应该手动调整iframe缩放?因为iframe放大当然会放大工具/选择轮廓 ['编辑。Canvas.setZoom'](https://grapesjs.com/docs/api/canvas.html#setzoom)在你这种情况下不起作用吗?

anatoli-dp

我用编辑器来调整。用Canvas.setZoom,然后用空格键移动它。目前我移除了之前做过的部分,但大概是拿到画布元素,然后通过样式更新来定位它。不过这种变化不是永久性的,只要稍微移动,它就会跳回原位,比如如果它在26xx、18y(或26上、18左)的位置,稍微移动它会跳回那些坐标,而不是如果它是从0,0开始移动,如果它是天边。有没有什么功能可以把画布位置重置回视角中心,并重新缩放到100%?

artf

如果你说的是移动坐标,我们还没有直接的 API,但你实际上可以通过这种方式获取或更新坐标: “''js const canvasModel = editor.Canvas.getModel(); 获取数值 const { x, y } = canvasModel.attributes; 更新数值 canvasModel.set({ x: x + 50, y: y + 50 }) ```

#36552021年7月30日作者 TRIGGEREDcoder2 个回答
0 个反应

表单按钮名称的更改没有被生成的HTML代码捕捉到

版本: 版本 0.17.19(grapesjs) 版本 0.1.11(grapesjs-preset-webpage) 你能重现演示中的bug吗?[ ] 不 预期的行为是什么? 如果我通过在组件设置中更改按钮的文本来更改按钮名称,这些变化应该会反映在Canvas和代码视图中的HTML代码中。 详细描述那个漏洞 我在画布上拖动一个表单组件。 选择按钮标签,进入组件设置。 选择按钮类型并更改文本。 屏幕上的按钮文字会变化,查看代码HTML上的按钮类型也会变化,但按钮名称完全没有反映出来。 目前的行为是什么? 按钮标签被更改,HTML代码里根本没有体现。 你能附上截图、截屏或实时演示吗?**[ ] 是的(附上) 和Codebox一样,g...

artf

你好@TRIGGEREDcoder,预设网页插件存在问题,该插件引用了包含该漏洞的旧表单插件。所以,我决定关闭这个插件,因为它不属于核心,并且会很快更新插件引用。

ClaudeCode

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

#36072021年7月9日作者 gMakaan1 个回答
0 个反应

专长:代码查看器 - 前往选定的画布块

当点击“查看代码”并选中画布中的元素时,代码查看器可以显示对应代码并选择外部HTML——这对于即时复制或快速检查非常方便。

ClaudeCode

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

#35992021年7月7日作者 niranjank1512 个回答
0 个反应

@keyframes即使我通过关键帧对象后也没有添加

你好,@artf, 我已经添加了 '让CC = 编辑器。Css作曲家; cc.setRule('.fadetop-animate', { 不透明度:0,'animation-name': 'fadeTop' }, { atRuleType: 'keyframes', atRuleParams: 'fadeTop', 选择器:“to”, 风格:{ 不透明度:1 } });` 根据文件[](https://grapesjs.com/docs/api/css_composer.html#setrule) 但关键帧规则不会被添加到组件中。 如何为组件样式添加关键帧?

artf

用这个 “''js 编辑。CssComposer.getAll().add('@keyframes fadeTop { ... }') // 你的CSS字符串 ```

ClaudeCode

谢谢你举报,@niranjank151。 关于@keyframes即使我传递关键帧对象后也没有添加,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => conso...

#35792021年6月30日作者 mcottret4 个回答
2 个反应

在放置“activeOnRender”组件后立即打开RTE时丢失了

版本: 0.17.4 你能重现演示中的bug吗?[x] 是的[ ] 不 繁殖步骤:前往[演示](https://grapesjs.com/demo.html)在画布内放置一个“文本”方块点击刚刚丢弃的“文本”组件打开的RTE丢失了位置(参见[附图](https://user-images.githubusercontent.com/9916749/123977724-89465180-d9bf-11eb-9e99-d1b1f9cb897c.png)) 预期的行为是什么? 打开的RTE应正确定位 目前的行为是什么? RTE位置不对,它隐藏了“文本”部分的内容,可能妨碍编辑(尤其是使用像CKEditor这样较大的自定义RTE时)。 这...

artf

是的,我想你说得对。实际上,在没有选择组件的情况下激活RTE其实没什么意义(可能对所有其他“可激活”的方块来说都合理)。

gustavohleal

嗨。我和@ronaldohoch找到了一个解决这个问题的办法。 当 RTE 启用时,我们会触发滚动事件。 这是代码: “JavaScript 触发Canvas上的滚动事件,使得葡萄 正确修复CKEditor位置 editor.on(“rte:enable”, () => { editor.trigger('canvasScroll'); }); ```

ronaldohoch

你好,刚刚更新了提交 bb4a661 的文件,我觉得非常接近,我用的是 grapesjs-ckeditor 代码和 RTE 的第一次打开,its 放置正确: ![图片](https://user-images.githubusercontent.com/2287371/129779602-382fcbd7-2ecb-4c20-8302-d767f52a5066.png) 但第二次打开时,又放错地方了...... :/ ![图片](https://user-images.gi...

#35772021年6月29日作者 alimajed933 个回答
0 个反应

UndoManager hasUndo() 方法在不该返回时返回为真

我正在尝试禁用撤销按钮,因为没有撤销操作。 为此,我正在监听“change:changesCount”事件,并使用“editor?”。属性?撤销Manager?hasUndo()' 来设置撤销按钮的禁用状态。 'editor.on('change:changesCount', editor => setHasUndo(editor?.属性?撤销Manager?hasUndo()));' 除了以下这种情况,它对我来说还算是有效的:我在空白画布上创建新模板我拖放一个方块我撤销 问题是,虽然撤销现在应该被禁用,但它没有,因为“编辑器?”属性?撤销Manager?hasUndo()' 返回为真,和 'editor?' 一样。撤销Manag...

artf

所以队列中增加了一个额外的动作,而实际上不应该有,那就是我在画布上拖动一个方块时。 不太行,你能做一个可复现的演示吗?我不能复现?

no-response[bot]

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

ClaudeCode

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

#35752021年6月28日作者 jcsofts3 个回答
0 个反应

Grapes.min.js:2 未捕获类型错误:无法读取未定义的属性“长度”

我添加 <iframe src=“https://app.conversiobot.com/boot/fvMEvO” width=“100%” height=“500” frameBorder=“0” allow=“geolocation”></iframe> 使用了自定义代码组件。 我的代码在0.17.4时运行正常,但在0.17.19时错误率低于 grapes.min.js:2 未捕获类型错误:无法读取未定义的属性“长度” 在r.loadTraits (grapes.min.js:2) 在r.initTraits (grapes.min.js:2) 在r.initialize (grapes.min.js:2) at r.e.m...

artf

感谢你的报告,修复已经准备好下一次发布。

rahul-singh-bv

我在v0.19.5尝试在自定义代码块内添加iframe时也遇到类似问题

ClaudeCode

谢谢你举报,@jcsofts。 错误 TypeError:无法读取未定义的属性“长度” 发生在 Canvas 尝试访问属性时,尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript if (component && typeof component.method === 'function') { 你的准则 } ``` 根本原因分析: Canvas 在调用你的方法之前不会验证状态。当...

#35642021年6月24日作者 theSC0RP4 个回答
0 个反应

无法刷新iframe

0.17.19 你能重现演示中的bug吗? 是的 预期的行为是什么? 我之前问过一个关于iframe刷新(#3413)的问题。[提案的解决方案](https://github.com/artf/grapesjs/issues/3413#issuecomment-831892231)在该版本(0.17.3)中是正常工作的,运行代码后,iframe应该会刷新,画布也会显示出已有的组件和样式。 详细描述那个漏洞 我在控制台第97行出现错误,显示“无法读取未ComponentView.js定义的属性'移除'” 目前的行为是什么? 在控制台运行代码后,画布不再可见,而上述错误在控制台上依然存在。 你能附上截图、截屏或实时演示吗?* 截图*...

artf

我需要确认他为什么还在试图移除那个框架,但现在,直接跳过这句“frameView.remove()”吧。

theSC0RP

@artf。谢谢。这方法只做一次就有效。 如果我在画布里做点点击,然后再运行'frameWrapView.render();',又会报错。截图和视频附在下方。 <hr> https://user-images.githubusercontent.com/30771519/123492864-5ce5aa80-d638-11eb-984e-1807614a3bfb.mp4 ![截图来自2021-06-26 04-37-24](https://user-images.githu...

artf

我会尝试在下一个版本修复,但目前你需要在“frameWrapView.render()”之前取消选中组件,渲染后再重新选择组件

#35602021年6月23日作者 hadeel944 个回答
2 个反应

自定义块样式 - grapesjs Angular

我刚接触葡萄JS,想用不同的风格来做拖拽的方块 例如图像块 1 - 当未被拖拽或悬停时,取样式A。 2- 当滑鼠采用样式B时。 3- 拖拽时,当它越过画布时,取出风格C。 有人能帮我解决这个问题吗? 谢谢 ![达什博拉德 – 12](https://user-images.githubusercontent.com/86350308/123074122-b45cfe00-d41f-11eb-9738-a7f53401c58e.png) ![达什博拉德 – 11](https://user-images.githubusercontent.com/86350308/123074131-b626c180-d41f-11eb-82b4-...

ronaldohoch

也许通过这些事件你能做到:https://grapesjs.com/docs/api/editor.html#blocks 或 https://grapesjs.com/docs/api/editor.html#canvas

artf

在这种情况下,可能只有完全自定义的块管理器界面(比如用你自己的块管理器组件在Angular中渲染)。这应该已经是可行的,但我更愿意花时间更新[Blocks](https://grapesjs.com/docs/modules/Blocks.html)文档,包含从零开始构建BlockManager UI所需的所有步骤和示例。

hadeel94

在这种情况下,可能只有完全自定义的块管理器界面(比如用你自己的块管理器组件在 Angular 中渲染)。这应该已经是可行的,但我更愿意花时间更新[Blocks](https://grapesjs.com/docs/modules/Blocks.html)文档,包含从零开始构建BlockManager UI所需的所有步骤和示例。 谢谢你的回复,我还有其他问题: 1- 我试着在画布里添加带有样式的 div,但它不能编辑,也不能拖拽,只能只读,这可能吗? 2- 我能否将RTE作为...

浏览所有主题