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

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#49122023年2月6日作者 lexoyo3 个回答
1 个反应
缺陷提问文档typescript

Broken links in the docs

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 任何 可复制演示链接 不 描述一下那个虫子 自从从artf转到 GrapesJS 后，我相信许多链接仍然指向原始仓库 https://github.com/GrapesJS/grapesjs/search？q=artf 我应该尝试替换它，还是我们只能信任GitHub的重定向？ 行为准则 [X] 我同意遵守本项目的行为准则

lexoyo

我做了个人最佳，希望没漏掉什么，几乎每个链接都测试过

artf

我觉得有些内容会重定向，但有些可能坏了，如果有人愿意帮忙🙏，我会很感激

GJSBlock

谢谢你举报，@lexoyo。 文档中链接损坏的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 Gra...

查看详情
#49062023年2月6日作者 panditlakshya2 个回答
0 个反应
提问组件缺陷画布typescript

Grapesjs 在通过脚本设置 innerHTML 时无法识别组件类型。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v108.0.5359.98 可复制演示链接 https://codesandbox.io/s/grapes-js-template-literal-forked-6kgvrb？file=/src/App.js 描述一下那个虫子 我正在尝试创建一个自定义组件，通过脚本注入HTML代码后，能够识别内部HTML组件类型。 如何复现这个漏洞？直接通过脚本注入 HTML 预期的行为是什么？ Canvas 应该能在注入代码后识别文本、图片等组件类型。 目前的行为是什么？ 注入部分被识别为整个文本组件。（注入代码可能包含带有图像或文本的d...

artf

请仔细阅读[本指南]（https://grapesjs.com/docs/modules/Components-js.html），“脚本”中的所有内容都不在编辑器的权限范围内。你可以用 [component.components]（https://grapesjs.com/docs/api/component.html#components） 方法更新组件本身，或者直接在定义中指定 'components： '<div ....'。

GJSBlock

谢谢你举报，@panditlakshya。 关于Grapesjs在通过脚本设置innerHTML时无法识别组件类型，这个问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => co...

查看详情
#49002023年2月5日作者 handhikadj2 个回答
0 个反应
style-manager提问组件缺陷typescript

SetStyle/getCss() produces duplicated css

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 最新动态可复制演示链接 https://codesandbox.io/s/silent-river-ifczcv描述一下那个虫子 如何复现这个漏洞？访问网站查看控制台。注意 * 和 body 选择器 预期结果 不应重复 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 描述 我这么做是因为新的 storageManager 机制/模式会破坏我整个应用，尤其是后端部分。行为准则[X] 我同意遵守本项目的行为准则

artf

有一些默认样式应用，你可以简单地禁用（传递空字符串）https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147

GJSBlock

谢谢你举报，@handhikadj。 关于 setStyle/getCss（） 生成重复的 css 这个问题，非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => con...

查看详情
#48972023年2月3日作者 rudacs4 个回答
1 个反应
提问style-manager组件缺陷typescript

Component：styleUpdate / component：styleUpdate：propertyName 未被触发

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge 109.0.1518.70 可复制演示链接 https://jsfiddle.net/rudacs/kr2x1mnh/ 描述一下那个虫子 如何复现这个漏洞？在 StyleManager 中更改某些属性。更改 StyleManager 中的宽度属性。 预期的行为是什么？ 事件 component：styleUpdate 被触发。 目前的行为是什么？ 不会触发任何事件 component：styleUpdate。 行为准则 [X] 我同意遵守本项目的行为准则

artf

嘿，@rudacs你试过用'style：property：update'吗？

rudacs

这个活动奏效了。它被改成了这个吗？ 而且只针对一处房产？ 我该如何获得组件和属性被更改的？ 特朗克。

SagarMaria

我来这里是因为我也有同样的问题。 使用建议的“style：property：update”似乎有效，但不知为何每次点击都会触发。 另外，我们如何针对某个特定的样式属性变更，比如“文本对齐”？

查看详情
#48682023年1月26日作者 LukasSouza2 个回答
1 个反应
提问组件缺陷typescript

悬停的框在更改编辑器位置后显示错位

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 109.0.5414.87 可复制演示链接 https://jsfiddle.net/o45ncveu/6/ 描述一下那个虫子 如何复现这个漏洞？打开小提琴链接在超时前悬停部分组件等待时间结束以添加边距并更改编辑位置再次悬停组件 预期的行为是什么？ 悬浮方块应与组件边距对齐 目前的行为是什么？ 更改编辑器位置后，悬停方块显示与组件错位 行为准则 [X] 我同意遵守本项目的行为准则

artf

不幸的是，这是预期中的，你必须在“外部”布局更改后使用 'editor.refresh（）'。

GJSBlock

谢谢你举报，@LukasSouza。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在： 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本，可能已经解决了这个问题 如有稳定版，升级前先测试最新稳定版 如果漏洞非常严重，可以使用“npm audit fix --force”，但请务必彻底测试 理解风险： 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触...

查看详情
#48592023年1月20日作者 zoilorys2 个回答
0 个反应
提问style-manager缺陷typescript

编辑 CSS 属性将样式设置为一个通用类，而不是元素

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v108可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞？编辑器 grapesjs 设置导入模板 https://pastebin.com/d9S2M0iS在模板的最底部，你会看到包裹的Facebook按钮选择它所在的表格单元格，尝试改变其宽度 预期的行为是什么？ 当元素的样式属性被编辑时，样式应仅更新所选元素。 目前的行为是什么？ 不知为何改变单元格宽度会编辑模板中的常见类，这个类别也会应用到其他元素上，导致意外行为（见视频）。演示时我无法复现这一点，也无法向公众提供...

artf

你只需要启用这个选项： https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

GJSBlock

谢谢你举报，@zoilorys。 关于编辑CSS属性设置样式为公共类而非元素的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'someth...

查看详情
#48552023年1月19日作者 ronaldohoch4 个回答
1 个反应
提问组件缺陷typescript

Outline disappears after applying loadProjectData

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 勇敢的最后版本 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？打开演示页面打开开发者工具跑动： let projectData = editor.getProjectData()跑： editor.DomComponents.clear()运行：editor.loadProjectData（projectData）; 预期的行为是什么？ 组件轮廓应被展示。 目前的行为是什么？ 应用项目后，组件的轮廓没有显示。行为准则 [X] 我同意遵守本项目的行为准则

allenhwkim

@ronaldohoch用Edge浏览器，它用的是你提供的命令。 'let projectData = editor.getProjectData（）;' “编辑。DomComponents.clear（）;' 'editor.loadProjectData（projectData）;' 我觉得GrapesJS不支持Brave浏览器，而Brave浏览器在 https://github.com/browserslist/caniuse-lite 里没有列出。 <img wid...

ronaldohoch

我还运行了命令 'editor.runCommand（“core：component-outline”）'，但又没显示，我需要点击按钮两次才能显示

ronaldohoch

你好，@allenhwkim，谢谢你的评论。但尴尬的是我没在其他浏览器里测试。 我相信我的客户不使用Brave，所以我打算放弃这部分。 不过，通过所有这些测试，我成功地让它按我想要的方式工作，应用了以下代码： “''js editor.loadProjectData（JSON.parse（sessionStorage.getItem（commandOpts.value）））; if（editor.Commands.isActive（“sw-visibility”）{ 编辑。...

查看详情
#48512023年1月17日作者 chaegumi3 个回答
0 个反应
提问组件缺陷style-managertypescript

This.on（'change：attributes：type'， this.handleTypeChange）不支持数组类型

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 108.0.5359.125可复制演示链接 https://codesandbox.io/s/frosty-darkness-7po7xl描述一下那个虫子 如何复现这个漏洞？使用 myBlock点击测试按钮 预期的行为是什么？ this.on（“change：list1”， this.handleList1Change）; 每次都要工作 目前的行为是什么？ this.on（“change：list1”， this.handleList1Change）; 只跑一次 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![图片]（h...

artf

监听者看不到深度变化，所以这种情况下你得重新创建一个数组 “''js component.set（this.traitName， [...this.items]）; ```

chaegumi

谢谢@artf。 我用 JSON.stringify 和 JSON.parse 来处理数据。

GJSBlock

谢谢你举报，@chaegumi。 关于this.on（'change：attributes：type'， this.handleTypeChange）不支持数组类型的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'cha...

查看详情
#48482023年1月16日作者 NicoGGG2 个回答
1 个反应
提问组件缺陷画布typescript

内联编辑后，组件内容被设置为空字符串

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox v91.4.1 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？进入 grapesjs 基础演示：https://grapesjs.com/demo.html清理画布添加组件链接在浏览器控制台中执行 editor.getComponents().models[0].attributes.content 。输出为“链接”，即链接组件的内容通过内联编辑来更改链接文本再次在浏览器控制台执行 editor.getComponents().models[0].attri...

artf

这是与富文本编辑器相关的一些逻辑所预期的。 你可以用 'component.getInnerHTML（）' 获取内部 HTML，或者用 'component.components（）' 获取内部组件。

GJSBlock

谢谢你举报，@NicoGGG。 关于组件内容在内联编辑后设置为空字符串，这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...

查看详情
#48372023年1月10日作者 quentin-bettoum4 个回答
4 个反应
组件缺陷提问画布typescript

HTML元素的ID会在projectData加载的不同页面上递增

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好， 我注意到当我在 projectData 中加载多个 HTML 中使用相同id的页面时，grapes 会自动在每个页面上递增id，尽管这些页面是不同的。 为了演示这个问题，下面有一段代码，我用包含两个页面的 projectData 初始化，grapesjs 页面在某些 HTML 标签上使用相同的 ID。 在最终的HTML列表中，你可以看到body和main-title等id在第二页被递增到body-2和main-titl...

artf

嘿，@bgrand-ch，我认为有一天所有Grapesjs实体都会有一个全局“UID”，所以从长远来看，我预计这个问题会被修复 🤞

quentin-bettoum

起初，我想把所有页面一起生成，这样所有页面都能输出一个统一的CSS输出。但现在我尝试另一种风格方案。 所以对于“id”问题，分别生成每个页面可能是解决方案。谢谢你的建议。

bgrand-ch

Grapes 使用一些数据属性（类似“data-grapes-id”）作为唯一标识符，以便让 id 留给某些前端脚本使用。 我喜欢这个想法 💯

查看详情

浏览所有主题