PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 743 个问题
🔍 bug我尝试在Grapejs控制台启用编辑，但没有收到RTE，而是出现编辑器未定义错误
yashvi2026
如何使用“启用编辑” editor.getSelected（）.view.enableEditing（）; 这会产生一个错误
GJS Helper
在浏览器控制台中尝试使用enableEditing时出现“编辑器未定义”的问题，表明GrapesJS编辑器实例在当前控制台的作用域中不可访问。enableEditing方法是GrapesJS编辑器对象的一部分，因此你必须有该对象的引用才能调用它。 根本原因 当你初始化GrapesJS时，grapesjs.init()方法返回一个编辑器实例。如果你没有将该实例分配给全局可访问变量（如 window.editor），或者初始化GrapesJS的脚本运行在不同的作用域（例如不全局...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 匿名 描述一下那个虫子 如何复现这个漏洞？npm 安装 grapesjs-basic-blocks 中的任意插件之后运行应用程序，就像我用的是 Angular 应用一样 预期的行为是什么？ 应该能正常运行 目前的行为是什么？ 它会报错，因为命名空间 grapesjs 未找到或 tui-image-editor 找不到行为准则 [X] 我同意遵守本项目的行为准则
artf
如果你没有可重复的链接，请避免制造错误问题
GJS Helper
在 Angular 应用中安装 GrapesJS 插件如 grapesjs-basic-blocks 或 tui-image-editor 时出现的“命名空间未找到”错误，通常表明模块的导入和初始化方式存在问题，或者其依赖关系（如 tui-image-editor的 CSS ）加载方式。在现代 Angular（TypeScript）环境中，你主要使用 ES 模块，插件通常期望通过 GrapesJS 编辑器实例初始化，而不一定依赖全局变量。 根本原因 错误的产生是因为插件或其...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome@latest 可复制演示链接 https://no-link.com 描述一下那个虫子 ![图片]（https://github.com/GrapesJS/grapesjs/assets/133208978/3a5ce51a-fedf-4fd7-9063-a5af519690b9） ![图片]（https://github.com/GrapesJS/grapesjs/assets/133208978/0b990b40-94b1-48c1-94dc-c4d81ADF0368）行为准则 [X] 我同意遵守本项目的行为准则
artf
谢谢@Baghunts，发现得很好。目前的解决方法是 '.addStyle（{ 'border-left'： '...' }）`
GJS Helper
GrapesJS中组件中没有正确应用background-image样式的问题通常有两个常见原因之一：CSSurl()语法错误，或者组件缺乏足够的维度来显示背景。 根本原因分析 缺少url()封装： 在 CSS 中设置background-image时，图像路径必须包含在 url() 函数中。如果你只提供 URL 字符串而没有url()，浏览器会将其视为无效的 CSS 值，样式不会被应用。 错误： "https://example.com/image.jpg" 正确： "u...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 112.0.5615.137（官方配置）（arm64） 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 组件定义： 丢弃、保存和重新加载时，有两个地方调用同一个脚本。一个在保存的 HTML/JSON 里，另一个是 Grapesjs 自己添加的。 如何复现这个漏洞？添加带有脚本函数的自定义组件类型。放下它并保存页面。重新加载页面时，脚本函数运行两次。 预期的行为是什么？ 脚本函数应该只运行一次。 目前的行为是什么？ 脚本函数运行两次。 行为准则 [X] 我同意遵守本项目的行为准则
artf
正如[这里]（https://grapesjs.com/docs/modules/Storage.html#project-data）解释的，编辑项目时不应重新导入输出HTML，只需导入JSON。
GJS Helper
你遇到的组件 script 函数在保存并重新加载页面后运行两次的问题，是 GrapesJS脚本管理系统中的已知行为（或者说是个 bug，视角度而定）。这源于 GrapesJS 如何处理和序列化组件脚本，用于编辑器画布和最终导出的 HTML。 根本原因解释 当你在GrapesJS组件模型中定义script属性为函数时，GrapesJS执行两个主要动作导致双重执行： 内联脚本嵌入： GrapesJS将脚本函数序列化成字符串，并直接嵌入组件HTML结构中的<script>标签中。...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 112.0.1 可复制演示链接 https://github.com/davidrhoderick/grapesjs-检验 描述一下那个虫子 如何复现这个漏洞？跟随入门（你可以用Typescript和SCSS看到我用一个基础的Parcel项目来理解的结构）当你进入“主题”步骤时，尝试导入 Grapes SCSS时会报错。 预期的行为是什么？ 只要我按照“入门教程”操作，一切都能正常工作。 目前的行为是什么？ 当我进入应该允许我用SCSS自定义应用外观的步骤时，出现了以下错误： 如果需要执行某些代码以重现该漏洞，请将其粘贴到下...
davidrhoderick
有趣的是，基于CSS的样式确实有效。
artf
看起来 Parcel 变换器试图导入的是 'codemirror/lib/codemirror.js'，而不是 'codemirror/lib/codemirror.css'： “''CSS @import“codemirror/lib/codemirror”; ``` 所以我建议你在相关包裹上开启问题
GJS Helper
你遇到的问题，@parcel/transformer-sass: expected "{"导入GrapesJSSCSS时，是模块捆绑器如Parcel解析和流程样式表导入时常见的问题，尤其是在处理既有JavaScript又包含CSS组件的第三方库时。 根本原因 GrapesJS 利用 CodeMirror 实现其富文本编辑器和代码编辑器功能。虽然 GrapesJS的核心 SCSS（grapesjs/src/styles/scss/main.scss）对自身组件进行了样式化，但...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 112.0.5615.137（官方版本） 可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子 如何复现这个漏洞？在 jsfiddle 中只需点击“Hello World”组件。 观察大量控制台日志。点击画布上其他地方，重复。 预期的行为是什么？ style:property:update 应该只在所选组件的样式属性更改时触发 目前的行为是什么？ style:property:update 事件反而会多次触发，即使只是选择了某个组件 如果需要执行某些代码...
artf
该行为是正确的，因为“style：property：update”会在风格管理器[属性]（https://grapesjs.com/docs/api/property.html#property）的任何更新时触发（不仅仅是其值）。所以针对你的具体情况，你需要以这种方式更新回调 “''js Editor.ON（'style：property：update'， （{ property， to }） => { 检查房产名称，以及更新是否与价值相关 如果 （property.get...
SagarMaria
你好，@artf感谢你的快速回复，但实际上问题的一部分仍然是，即使你做了更改，比如点击“中心”对齐无线电选项和你建议的 if 语句，后续选择该组件时，'style：property：update' 值仍然会被 loging 出去，'property' 和 'to' 仍是现有值（即使你不改动，只选择组件）。下面有个简短的视频，我也根据你的建议更新了 jsfiddle。 有没有办法直接监听收音机值的变化，或者在样式管理器里点击不同的收音机选项？我也尝试使用属性的“onChang...
GJS Helper
谢谢你举报，@SagarMaria。 关于Style：property：update和Property onChange过度触发的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'，...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 陶瑞 可复制演示链接 描述一下那个虫子 如何复现这个漏洞？... 预期的行为是什么？ ... 目前的行为是什么？** ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
DanavsSite
![2023-04-29 143431-Greenshot]（https://user-images.githubusercontent.com/109663198/235335067-0d202a20-e26e-4fce-8d4d-168504175239.png）
DanavsSite
我刚发现是因为 WebView2。Webview2 的支持??!
artf
我觉得这更多是因为Tauri配置的问题，而不是GrapesJS，因为我们用的是原生的HTML5拖放功能
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 112.0.2（64位） 可复制演示链接 https://github.com/TO-JHummel/grapesjs-子 描述一下那个虫子 如何复现这个漏洞？启动最小的vue+vite页面。将capitalizedfor块放入编辑器中。将一列模块放入编辑器中，放置在另一个模块之外。将capitalizedfor块上的每个div拖拽到1列块中。 预期的行为是什么？ 方块只需直接放入柱中即可。 目前的行为是什么？ 浏览器在放下最后一个块时会卡死。 行为准则 [X] 我同意遵守本项目的行为准则
artf
这和这个[https://github.com/GrapesJS/grapesjs/issues/4497]类似，你必须把编辑器实例放在Vue实例之外，才能绕过它的代理
GJSBlock
谢谢你举报，@TO-JHummel。 关于用Vue+Vite拖入嵌套组件时崩溃的问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 111.0.5563.147（官方构建）（64位） 可复制演示链接 我在jsfilddle上无法实现可重复的版本。我在下面提供了详细说明。 描述一下那个虫子 如何复现这个漏洞？这是我 Grapes 年上传的模板，头部有风格标签的内联CSS，正体标签也有内联风格 https://jsfiddle.net/spiral417/udye5ov1/第一次 Grapesjs 从正体标签获取内联CSS，插入随机ID，并在这些ID中放入CSS。所以我保存了所有CSS样式，但当我第二次使用同一个模板和 grapes 提供的setStyle时， gra...
artf
@Spiral1234如果你无法重现问题，很可能是你这边的问题，没有可复现的演示，很难判断问题所在
GJS Helper
你遇到的问题源于GrapesJS在导入HTML时如何处理和规范样式，尤其是内联样式。让我们拆解根本原因，提供正确的方法。 根本原因解释 GrapesJS导入HTML时，执行一个关键的样式规范化步骤： 内联样式提取：对于具有style属性的元素（内联CSS），GrapesJS“提取”这些样式从HTML中移除。它从元素中移除style属性。 唯一ID分配： 为了维护样式，GrapesJS为该特定元素分配唯一标识符（例如data-gjs-id="cXXX"或生成类名如gjs-co...
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ FireFox 112.0（64位） 可复制演示链接 没有演示链接 描述一下那个虫子 我最近从v0.20.1升级到了v0.21.1。 很多在 v0.20.1 中存在的类型在 v0.21.1 中被改成了 any 。 例如， v0.20.1 中的 Components.addType 类型是 AddComponentOptions ![图片]（https://user-images.githubusercontent.com/53241275/232444631-243b6872-1655-490b-b5b4-5c5ad546a315.png）...
artf
谢谢@ngoc199如果之前版本还有其他缺少声明的话，请告诉我
GJS Helper
这是与GrapesJS v0.21.1中TypeScript声明文件（.d.ts）相关的已知问题。问题的出现是因为某些核心功能的类型定义，如Components.addType和自定义组件中的model定义，在该版本中生成不完整或错误，导致TypeScript推断出这些类型的any。 根本原因 GrapesJS 主要使用 JavaScript 编写，但它提供了 TypeScript 声明文件，以提供类型安全和更好的开发者体验。在 v0.21.1 中，这些 .d.ts 文件出...