PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#55302023年11月25日作者 Harshsne261 个回答
0 个反应

撤销管理器的开始和停止功能没有达到预期效果

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v91 可复制演示链接 https://codepen.io/dhanadsp1120/pen/ExrRvOB 描述一下那个虫子 如何复现这个漏洞?通过调用 um.stop() 禁用撤销管理器。对内容进行修改。使用 um.start() 重新启用撤销管理器。 预期的行为是什么? 按下Ctrl+Z后,系统应恢复到停止撤销管理器前的状态,只显示重新启用后所做的更改。 目前的行为是什么? 按Ctrl+Z会跳转到前一步,表示所有更改都在跟踪,尽管撤销管理器暂时停止。 ![撤销管理器](https://github.com/Grapes...

GJS Helper

你描述的 GrapesJS 撤销管理器(um.stop() 和 um.start())的问题是已知的行为,即尽管 um.stop() 方法将内部 enabled 标志设置为 false,但并不能始终阻止所有内部 GrapesJS 操作将命令推送到撤销栈。这导致在管理器理应停止记录时,仍然被记录在历史中。 根本原因 GrapesJS UndoManager 有一个 add 方法,可以在推送命令到历史栈前检查 enabled 标志。 um.stop() 方法设置 this.en...

#55232023年11月18日作者 lexoyo2 个回答
0 个反应

当没有选择任何东西时粘贴

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?选择舞台上的组件用 CTRL+c 复制组件选择实体(取消选择组件)用CTRL+V粘贴 预期的行为是什么? 在正文末尾粘贴当前页面 目前的行为是什么? 由于以下条件,它什么都不做: https://github.com/GrapesJS/grapesjs/blob/8025b95a645907574389e950f32950190ceb602c/src/commands/view/PasteComponent.ts...

lexoyo

注意,这个bug导致无法将元素复制粘贴到空白页面

GJS Helper

你描述的问题是GrapesJS默认 paste-component 命令中的已知行为。根本原因在于命令的实现,特别是其run方法开头的条件if (!selected || !selected.length) return;。如果画布上当前没有选中组件,这个检查会阻止粘贴操作继续。 设计上,默认paste-component命令期望选中的组件决定将复制内容插入的位置(通常是在所选组件旁边)。当没有选择任何内容时,它就没有上下文目标,因此没有任何作用。 为了实现预期行为——在没...

#55032023年11月6日作者 MaxwellTheSecond3 个回答
1 个反应

ReplaceWith 方法没有字符串类型

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 没有 描述一下那个虫子 Component.ts 的 replaceWith 方法没有字符串类型。 预期的行为是什么? 我应该能像示例中那样用字符串替换组件 component.replaceWith('<div>Some new content</div>'); 目前的行为是什么? ![grapesproblem](https://github.com/GrapesJS/grapesjs/资产/81811949/67837b49-a81f-4c07-a8b1-9d5481f457a1) 行为准则 [X] 我同意遵守本项...

MaxwellTheSecond

纪录:#5504

artf

合并 https://github.com/GrapesJS/grapesjs/pull/5504

GJS Helper

你正确识别了GrapesJSreplaceWith方法的TypeScript类型问题。虽然该方法内部支持用HTML字符串替换组件,但其TypeScript定义(Component.d.ts)目前未反映这一点,导致开发环境中出现类型错误。 根本原因 GrapesJS 中的 replaceWith 方法设计为灵活。当你传递字符串时,GrapesJS的内部 HTML 解析器(editor.Parser.parseHtml)会被调用,将该字符串转换为GrapesJS组件,然后再执行...

#55012023年11月5日作者 eko3alpha1 个回答
0 个反应

“入门演示”面板调整尺寸问题

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器? Chrome/Safai/Firefox 可复制演示链接 https://grapesjs.com/docs/getting-started.html#layers 描述一下那个虫子 如何复现这个bug? 请访问[此链接](https://grapesjs.com/docs/getting-started.html#layers)的“GrapesJS入门指南”文档。 尝试通过拖动图层面板的左边来调整它的大小。 注意面板的漂移行为。 预期的行为是什么? 调整图层面板大小时,宽度应平滑调整,不会左右偏移。面板右边应固定固定,只有宽度变化。 目前的行...

GJS Helper

你准确地指出了GrapesJS“入门”演示中关于右侧面板尺寸调整的布局漏洞。你观察到的漂移行为确实不是预期的平滑调整尺寸,面板右边保持固定。 根本原因分析 GrapesJS编辑器通常使用弹性盒布局作为主结构。面板(如图层面板)是主编辑器容器(.gjs-editor)中的flex项。为了确保右侧面板始终被推向最右边并从左边调整大小,GrapesJS的默认CSS包含一条规则来应用margin-left: auto;。该margin-left: auto;属性会占用元素左侧的所有...

#54972023年11月3日作者 pittleCheung1 个回答
0 个反应

添加背景图片失败

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?我的图片链接 https://topkeeoss.cdn.weberss.com/602907992031105024-public/Beige%20and%20Black%20Spacious%20Office%20Workspace%20Instagram%20Post%20(600%20x%20900%20%E5%83%8F%E7%B4%A0)%20(600%20x%20800%20%E5%8...

GJS Helper

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

#54872023年10月28日作者 MaxDBenson3 个回答
0 个反应

样式管理器不会为同一类显示多个规则

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 https://jsfiddle.net/497zkrpm/1/ 描述一下那个虫子 如何复现这个漏洞?选择“Hello World”组件打开样式管理器,确保在类部分勾选了“myclass”检查“高度”和“背景颜色”属性的值 预期的行为是什么? 样式管理器应反映与所选类相关的所有规则(此处为 .myclass {height: 100px} 和 .myclass {background-color: green} 目前的行为是什么? 样式管理器只反映与所选类相关的第一个规则(此处为: .myclass {hei...

artf

这不是bug,样式管理器一次只处理一条规则,如果你想要更高级的使用,可以用API实现功能(比如用同一选择器选择不同规则)。

MaxDBenson

这不是个bug,样式管理器一次只处理一条规则,如果你想要更高级的使用,可以用API实现你的功能(比如用同一个选择器选择不同规则)。 我明白了。 你介意详细说说该怎么做吗? 而且,风格管理器似乎一次只处理一条规则;因为当我选择类时,我会看到属性/值设置被应用到ID上,反之亦然。

GJS Helper

你遇到的 GrapesJS 样式管理器无法显示同一类所有规则的问题,是由于编辑器内部CssComposer和StyleManager与 CSS 规则的交互方式,这是已知的行为。虽然 CSS 本身允许同一选择器使用多个规则块(浏览器会根据级联正确应用所有规则块),但GrapesJS样式管理器的界面主要反映的是与某个选择器关联的单个 CssRule 模型的属性。 根本原因 当GrapesJS解析你的CSS时,它会为每个不同的CSS规则块创建独立的CssRule模型。所以,针对你...

#54842023年10月26日作者 pittleCheung2 个回答
0 个反应

Clone Tab 和 Clone Tab 目前没有

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 https://github.com/GrapesJS/components-tabs 问题一 <img width=“1421” alt=“image” src=“”https://github.com/GrapesJS/grapesjs/assets/114127651/a3afe6c7-d644-40f0-97e5-cc3e3c595939“> 点击标签克隆,标签四是被克隆的,请看下面的图片 <img widt...

artf

请只针对核心库相关的漏洞问题,而不是插件。

GJS Helper

你在GrapesJS中克隆标签页和整个标签组件时遇到的问题,特别是针对grapesjs-components-tabs插件,源于GrapesJS在克隆过程中如何处理组件ID。grapesjs-components-tabs插件依赖于标签按钮上的独特data-tab-id属性,以及标签内容面板上的相应id和data-tab-pane-id属性来连接它们。当组件被克隆时,GrapesJS会为克隆组件本身生成新的唯一ID,但它不会自动更新这些自定义链接属性(data-tab-id...

#54782023年10月21日作者 bryanjamesmiller2 个回答
1 个反应

自定义块类别不能像原型对象方法名一样命名,否则会破坏 Grapes

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 版本 118.0.5993.88(官方构建)(arm64) 描述一下那个虫子 如何复现这个漏洞? 视频演示第一部分: https://github.com/GrapesJS/grapesjs/assets/8781182/bfbbf6ea-7780-417e-880b-61992897c740 第二部分: https://github.com/GrapesJS/grapesjs/assets/8781182/c61fa3b5-c62a-459d-bdf2-d8dc106E310b 第三部分: https://github...

artf

感谢@bryanjamesmiller所有的见解,我会去调查解决办法。

GJS Helper

这确实是一个有效的错误报告,你准确地识别了 GrapesJS块分类处理中经典的JavaScript陷阱。问题在于自定义块类别被用内置 Object.prototype 方法命名。 根本原因 GrapesJS和许多 JavaScript 应用一样,内部使用纯 JavaScript 对象来管理项目集合,比如块类别。在这个结构中,你提供的类别名称(例如 'constructor')会成为内部对象中的一个键。例如: JavaScript的对象属性查找机制涉及原型链。当你尝试访问像...

#54572023年10月11日作者 boardmain4 个回答
3 个反应

加载ProjectData 0.21.7时编辑器冻结

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 117.0 可复制演示链接 本地主持 描述一下那个虫子 grapesjs“: ”^0.21.7“, editor.loadProjectData({ “资产”: [], “风格”: [], “pages”: [{ “组件”: “<div>TEST TEST TEST</div>” }] }) 编辑冻结 行为准则 [X] 我同意遵守本项目的行为准则

antoinematyja

Hi, I encountered the same issue using Vue 3 and using a vue 0 to store the editor. Not sure if this is a good idea though. 代码复制品大致如下: 解决办法:不要用 ref 😅

artf

你能提供一个可复现的演示吗?试了你的例子,我没看到冻结......

boardmain

尝试使用最新版本21.7 我试着把它放到网上,但我只是用自定义命令粘贴了 HTML,粘贴了源代码,但之后编辑器卡住了(我需要关闭页面)。 例如: ~~~ btnImp.onclick = () => { editor.runCommand('core:canvas-clear') 编辑。css.clear() editor.setComponents(codeViewer.getContent().trim()) 编辑。Modal.close() } ~~~ 其中 code...

#54322023年9月29日作者 mahmudz1 个回答
0 个反应

TailwindCSS 响应式 md:w-2/3 类被转换为 md:w-2-3

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 117.0.5938.132 可复制演示链接 https://jsfiddle.net/bx8rtseh/2/ 描述一下那个虫子 如何复现这个漏洞?设置远程商店管理器加载一些带有tailwindCSS类的html 样本 预期的行为是什么? 未变的级别名称 目前的行为是什么? 意外更改了职业名称 ![图片](https://github.com/GrapesJS/grapesjs/assets/22455598/c4a4cc2b-4228-4f56-bd53-0e0d23fc5fb8)行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

你遇到的问题,比如TailwindCSS类md:w-1/2在加载到GrapesJS时会变成md:w-1-2,这源于GrapesJS内部的类管理和解析逻辑。 根本原因 GrapesJS默认处理加载HTML中的所有类名,创建内部Selector模型。这些Selector模型被样式管理器及其他核心功能使用。/字符虽然在TailwindCSS工具类中有效(由Tailwind的PostCSS插件处理),但在CSS标识符(类名)中并非标准有效字符,除非被转义(例如w-1\/2)。 当G...

浏览所有主题