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

GrapesJS 问题

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

找到 3,464 个问题

#54422023年10月3日作者 kishanp1024 个回答
0 个反应

应用文本颜色后,无法设置背景颜色

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 镀铬 可复制演示链接 https://jsfiddle.net/a3xgLm7c/3/ 描述一下那个虫子 如何复现这个漏洞?选择文本并应用文本颜色选择相同的文本并应用背景色 预期的行为是什么?两种颜色都应适用 目前的行为是什么?背景色应在应用文本颜色后应用 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则 [X] 我同意遵守本项目的行为准则

mapsmarketing

你好@kishanp102, 我尝试按照步骤重现问题,但文字和背景颜色都被应用了(请参见截图)。 <img width=“318” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/79551469/74b22828-610a-4530-9582-96c0c120a805”>

kishanp102

拖放文本组件,然后应用字体颜色,再点击外部,点击文本并放置它未应用的背景色 [screencast-jsfiddle.net-2023.10.11-091942.webm](https://github.com/GrapesJS/grapesjs/assets/43177161/1f7e270d-a144-41fa-84c1-763c7896ae18)

mapsmarketing

没错,你说得对@kishanp102它不会在你已经设置好背景色后给它应用新的背景色。这绝对是个bug。

#54412023年10月3日作者 padcom2 个回答
0 个反应

没有ID,显示没有样式但带有“script”的元素,导致脚本无法运行这些元素

GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器? Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-无ID-for-element-示例描述一下那个虫子 在创建自定义GrapesJS组件时,如果这些组件具有script()(组件的运行时行为),且该组件没有样式,那么根元素没有id属性,这会导致document.querySelectorAll('#<id-goes-here')失败,运行时脚本也不会被调用。 在给出的示例中,我创建了一个特殊的自定义元素,称为<content-preview>(https://github.com/padcom/...

artf

问题源于'jsInHtml: false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。

GJS Helper

你描述的问题是GrapesJS中已知的行为,涉及HTML序列化过程中组件ID的生成和优化。当自定义组件有script()函数但没有显式样式应用时,GrapesJS可能会在最终HTML输出中省略组件根元素中的id属性(由editor.getHtml()生成)。这是因为GrapesJS主要使用ID来引用组件以进行样式设计。如果没有样式,ID可能被认为内部GrapesJS操作中没有必要,从而省略。 这种遗漏会破坏依赖document.querySelectorAll('#<com...

#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...

#54252023年9月26日作者 javadsamiee2 个回答
2 个反应

添加相似页面时,仅会更改组件ID。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 117 可复制演示链接 https://jsfiddle.net/mirjavad/ctsx7zer/5/ 描述一下那个虫子 我想为一个页面创建一个克隆动作,并注意到了这个bug。 如何复现这个漏洞?创建多个具有相同组件ID和CSS的页面 页码: [{ 编号:“第1页”, 名称:“第1页”, 组件: '<div id=“comp1”>Page 1</div>', 风格:“#comp1 { 颜色:红色 }', }, { 编号:“第2页”, 名称:“第2页”, 组件: '<div id=“comp1”>Page 2</div>', 风格:'#c...

artf

好的抓包@javadsamiee将在下一次版本中修正

GJS Helper

你遇到的问题是GrapesJS中在初始化多个组件时已知的行为,这些组件拥有相同的初始 ID 和对应的内联样式。GrapesJS 正确识别并重命名组件 ID,以确保编辑器 DOM 内的唯一性(例如 comp1、comp1-2、comp1-3)。但它不会自动解析和更新每个页面对象 styles 属性中定义的 CSS 选择器。结果是所有页面最终都采用针对原始非唯一 ID(#comp1)的 CSS 规则,导致样式错误。 根本原因 当GrapesJS在初始化时处理pages数组,它将...

#54242023年9月26日作者 bgrand-ch2 个回答
1 个反应

'component:styleUpdate' 事件未被触发

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome 116.0.5845.187可复制演示链接 https://jsfiddle.net/yLcvbwjd/描述一下那个虫子 如何复现这个漏洞?添加 component:styleUpdate 事件用 addStyle 或 setStyle更新组件样式 预期的行为是什么? component:styleUpdate 开除 目前的行为是什么? component:styleUpdate 没有被解雇 行为准则[X] 我同意遵守本项目的行为准则

bgrand-ch

@artf ❤️

GJS Helper

GrapesJS中的component:styleUpdate事件是编辑层事件,主要由GrapesJS风格管理器或其他内部编辑器机制触发,当组件样式通过UI修改时触发。当你直接调用Component模型实例的component.setStyle()或component.addStyle()时,你是在修改组件底层的骨干模型的style属性。此操作会触发组件模型本身的change:style事件,但不会自动传播到编辑器触发component:styleUpdate事件。 根本原...

#54082023年9月21日作者 quentin-bettoum3 个回答
0 个反应

Main.scss 在 0.21.6 中缺失

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefox 118 可复制演示链接 没有 描述一下那个虫子 你好, 我按照医生的指示做了主题 GrapesJS :https://grapesjs.com/docs/getting-started.html#themeing 但从 0.21.6 版本开始,SCSS 已经无法再进行 @import "grapesjs/src/styles/scss/main.scss"; ,因为 node_modules/grapejs/ 文件夹里的文件缺失了行为准则 [X] 我同意遵守本项目的行为准则

joukhar

是的,'src'文件夹缺失了

artf

和 https://github.com/GrapesJS/grapesjs/issues/5392 一样的问题

GJS Helper

你好!你正确地发现了 GrapesJS 从版本0.21.x开始打包样式的方式发生了变化。通过npm安装 main.scss 文件和整个 src/styles/scss 目录,确实不再包含在 nodemodules/grapesjs 文件夹中。 根本原因 此变化的原因是 GrapesJS npm包现在分发的是预编译的CSS文件,而非原始SCSS源码。现代库通常这样做是为了简化使用、缩小包大小,并确保不同构建环境中的样式一致。包含SCSS文件的 src 目录是 GrapesJS...

#53982023年9月19日作者 padcom2 个回答
0 个反应

Package.json 中导出时缺少类型声明

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 镀铬可复制演示链接 https://github.com/padcom/grapesjs-import-error描述一下那个虫子 0.21.6 改变了导出方式,现在 VSCode 不再识别类型声明: ![图片](https://github.com/GrapesJS/grapesjs/assets/553994/1505cca4-2436-4840-8efd-2f2adccb4723) 当TypeScript使用以下情况时,就会发生这种情况: 这是所有Vue.js应用程序中使用的 [@vue/TSCONFIG/tsconfig.json](h...

padcom

PR:https://github.com/GrapesJS/grapesjs/pull/5399

GJS Helper

这确实是一个有效的错误报告,涉及TypeScript在使用现代模块解析策略时如何解析类型声明,特别是moduleResolution: "bundler"(或node16/nodenext)。 根本原因 问题源自 0.21.6 版本package.jsonGrapesJS中的 exports 字段。当 compilerOptions.moduleResolution 设置为 "bundler"(这在现代构建如 Vite 和 Vue CLI 中很常见)时,TypeScript...

#53922023年9月17日作者 joukhar4 个回答
11 个反应

最新版本0.21.6没有src文件夹

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 版本 114.0.5735.199(官方构建)(64位) 可复制演示链接 无 描述一下那个虫子 最新版本0.21.6没有 src 文件夹 安装 grapesjs 使用NPM时 npm install [email protected] 行为准则 [X] 我同意遵守本项目的行为准则

joukhar

只有一个文件 “嘶嘶声” @import “./editorvariables”; @import “./editorvendor”; @import “./editorfonts”; @import “./editoricons”; @import “./custom”; @import “./custom/main”; @import “./装填手”; ``` SCSS文件比CSS文件更有组织、更强大,但我有备份计划

artf

@bgrand-我觉得你提到的问题可以用CSS变量解决。 我还在考虑引入一个新的主题小模块,允许通过程序更新编辑器外观,底层则是更新内部CSS变量。

joukhar

因为SAS文件可以覆盖变量,这一点非常重要

#53892023年9月16日作者 hannydevelop3 个回答
1 个反应

GrapesJS v0.21.5 在 NodeJS(无头)中无法工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? ChromeV117.0.5938.62 可复制演示链接 https://stackblitz.com/edit/node-1zsusv 描述一下那个虫子 如何复现这个漏洞? 运行 node index.js 开始应用。 预期的行为是什么? ... 目前的行为是什么? 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则 [X] 我同意遵守本项目的行为准则

hannydevelop

你能查查最新版本吗 https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.6 非常感谢@artf这方法非常有效。

artf

你能查查最新版本 https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.6

GJS Helper

你遇到的问题,TypeError: grapesjs.init is not a function在Node.js环境中运行GrapesJS时,源于对GrapesJS运作方式和headless: true选项目的的根本误解。 根本原因 GrapesJS 主要是一个客户端、基于浏览器的 JavaScript 库。它设计用于在网页浏览器环境中运行,并高度依赖浏览器特定的 API,如文档对象模型(DOM)、window对象以及各种渲染功能。grapesjs包在直接导入纯 Node...

#53882023年9月16日作者 hannydevelop4 个回答
0 个反应

运行无头模式时,编辑器返回不同的 HTML

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? ChromeV117.0.5938.62 可复制演示链接 https://codesandbox.io/embed/quizzical-galileo-cqldjh?fontsize=14&hidenavigation=1&theme=dark 描述一下那个虫子 如何复现这个漏洞?使用商店管理器的商店页面尝试用无头模式取回他们 预期的行为是什么? 创建的HTML应与编辑器相同,包括自定义标签。 目前的行为是什么? 自定义标签和其他非默认标签如 input 会被转换为 div。例如,以下是编辑器的正常行为: 不过,这里有无头模式的代码: 看看...

artf

你好,@hannydevelop你有自定义组件类型,但你没有在“grapesjs.init”上传递任何插件,这就是为什么默认的“div”应用了

hannydevelop

你好@hannydevelop你有自定义组件类型,但没有传递任何插件 grapesjs.init ,所以才应用了默认 div 抱歉我又要重新打开这个,按正常方式添加插件会返回错误:

artf

@hannydevelop能给我看代码吗?

浏览所有主题