GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#58822024年5月13日作者 Riddle10011 个回答

0 个反应

ID在更改后没有更新

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子如何复现这个漏洞？创建方块点击它进入特质标签页设置新ID进入样式标签页查看身份未变（类别下）要查看身份证，您必须：执行前述步骤方块失焦（例如点击身体）聚焦方块预期的行为是什么？让ID更新时无需重新聚焦目前的行为是什么？需要重新聚焦才能看到ID的变化行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

这确实是GrapesJS中已知的同步问题，比如样式标签的选择器显示不会立即反映通过特性面板对组件ID所做的更改。你描述的行为是准确且可复现的。根本原因根本原因在于GrapesJS UI组件，特别是样式标签中的SelectorManager及其关联视图，如何对属性变化做出反应。当你通过Trait面板修改组件的ID时，底层组件模型的id属性会被更新。然而，负责显示活动选择器（包括ID选择器）的SelectorManager视图，不会在已选中组件的id属性变化时自动重新渲染或...

查看详情

#58692024年5月7日作者 ajayagrahari092 个回答

0 个反应

缺陷提问常规

图标和形状选项

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？铬可复制演示链接测试描述一下那个虫子我没看到任何显示图标或形状的方法行为准则[X] 我同意遵守本项目的行为准则

artf

如有疑问，请使用讨论面板。

GJS Helper

GrapesJS作为一个高度灵活且无偏见的框架，默认不包含内置的图标或形状集合。相反，它提供了强大的 API，可以集成任何外部库或创建自定义组件以实现这一点。这种方法允许你选择图标库（例如 Font Awesome、Material Icons）或最适合项目需求的形状样式。下面，我们将介绍如何集成Font Awesome图标，并利用GrapesJS自定义组件和块创建基础形状组件。 1.添加图标（例如，字体超棒）添加图标时，通常会按照以下步骤操作：加载图标库：将你所选图...

查看详情

#58572024年5月2日作者 hasan-aa1 个回答

0 个反应

提问组件缺陷 typescript

在渲染<tr>标签内的标签<template>时，标签会被裁剪，只保留字符串内容。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v121可复制演示链接 https://jsfiddle.net/L27powtg/30/（修复也在那里，评论中删除了）描述一下那个虫子如何复现这个漏洞？创建自定义的GJS模板标签组件，详见此处说明：https://github.com/GrapesJS/grapesjs/issues/244#issuecomment-324449748添加一个带有表行的模板组件作为子节点。例如：检查 editor.toHTML（）的结果。预期的行为是什么？ toHTML 的结果不应修剪 tr， td 标签。目前的行为是什么？结果的H...

GJS Helper

这确实是处理在独立上下文中无效的HTML片段时的已知行为，比如<table>元素外的<tr>或<td>标签。GrapesJS，像许多HTML解析器一样，依赖浏览器原生的DOM解析机制（例如，innerHTML在div或DOMParser上）。根本原因浏览器中的默认HTML解析机制（因此在GrapesJS的parserHtml中默认如此）会隐式纠正或删除在特定上下文中被认为无效的HTML元素。当你提供一个HTML字符串，比如<tr><td>Cell content</td...

查看详情

#58292024年4月19日作者 Mustufask3 个回答

0 个反应

缺陷提问 style-manager 组件 accessibility

未捕获类型错误：__webpack_require__.r 不是 ./node_modules/grapesjs/dist/grapes.mjs （grapes.mjs：1：1） at __webpack_require （bootstrap：789：1） at fn （bootstrap：150：1） at ./src/Demo/Templates/TextEditor.js （Templates.js：31：1） webpack_requireat fn （bootstrap：150：1） at ./src/Demo/Templates/Templates.js （Templates.css：45：1） at webpack_require__ （bootstrap：789：1） at fn （bootstrap：150：1）

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？版本 123.0.6312.123可复制演示链接未捕获类型错误：_webpackrequire_.r 不是 ./nodemodules/grapesjs/dist/grapes.mjs （grapes.mjs：1：1）在 _webpackrequire （bootstrap：789：1） at fn （bootstrap：150：1）在 ./src/Demo/Templates/TextEditor.js （Templates.js：31：1）在 webpackrequire （bootstrap：789：1） at fn （boots...

Mustufask

@artf请帮我解决这个问题，因为这个节点模块文件不允许 Grapesjs 在我的基于 react 的环境中工作项目

artf

相关讨论 https://github.com/GrapesJS/grapesjs/discussions/5400 请在开启问题前使用搜索功能。

GJS Helper

你遇到的Uncaught TypeError: _webpackrequire.r is not a function错误是Webpack常见的特有问题，涉及其处理ES模块（以.mjs结尾的文件）及其内部模块互操作逻辑。webpackrequire.r函数是Webpack的辅助工具，用来标记模块为ES模块（例如，Object.defineProperty(exports, 'esModule', { value: true });）。当该函数被报告为not a functi...

查看详情

#58282024年4月18日作者 HBR122 个回答

0 个反应

组件常规

事件也可以在组件挂载上运行

artf

请按照问题模板操作，它存在是有原因的......

GJS Helper

“事件在组件挂载时也能工作”的问题通常源于对事件监听器在 JavaScript 中绑定方式的误解，尤其是在像 GrapesJS 这样管理自身组件生命周期和 DOM 渲染的框架中。事件处理程序很可能在组件初始化或渲染时被立即执行，而不是作为引用传递，在实际事件发生时再调用。根本原因即时函数执行：最常见的错误是直接调用事件处理函数，而不是传递其引用。例如， someElement.addEventListener('click', myHandler()) 会立即执行 my...

查看详情

#58262024年4月18日作者 subhojit-unnatim1 个回答

0 个反应

提问 style-manager 缺陷

[X] 我确认使用最新版本 GrapesJS

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 123.0.6312.123 可复制演示链接 https://jsfiddle.net/35Lq26du/1/ 描述一下那个虫子如何复现这个漏洞？插入任何容器、柱子等更改组中任一的背景颜色，如果你插入两个容器，则更换一个容器的背景预期的行为是什么？应更改容器背景色目前的行为是什么？其他容器的背景颜色变化也很重要我注意到风格管理器用类名来存储 CSS 属性，而不是 id 。用 img style manager 时用 id，但大部分时间用类名代替 ID行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

你遇到的问题，比如更换一个容器的背景颜色会影响其他容器，这并不是GrapesJS核心功能的bug，而是CSS与GrapesJSfromElement: true初始化以及导入HTML结构结合的直接结果。让我们拆解根本原因，给出一个明确的解决方案。根本原因当你用 fromElement: true初始化GrapesJS时，它会按原样导入你现有的 HTML 结构。在你提供的演示中，有两个div元素，它们共享类 container： GrapesJS的样式管理器默认会将样式应...

查看详情

#58202024年4月17日作者 rhoenerSBS2 个回答

0 个反应

提问组件缺陷画布 typescript

如果组件在添加后直接移动，图层中进行双重录入

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v123可复制演示链接 https://jsfiddle.net/xwgons8z/描述一下那个虫子我正在尝试通过程序将新增组件移动到父组件的特定位置，因为我有子组件，它们应该保持在最后一个索引，但图层中出现了一个bug，一旦组件移动，图层面板中会有两个对应的条目。如何复现这个漏洞？开放小提琴将组件置于画布最后一个位置（此处不会发生）在画布最后一个位置丢弃一个组件（从现在起，掉落的组件在图层面板中有两个条目）预期的行为是什么？组件可以移动，图层面板中仍然只有一个条目。目前的行为是什么？移动的组件在图层面板中有两个对应的...

rhoenerSBS

我最初想通过父组件的可丢弃性质中的函数实现同样的行为，以防止组件在特定索引处丢弃，但遗憾的是该函数没有给出该函数的参数索引。

GJS Helper

感谢你报告这个问题。你发现了一个细微的时序错误GrapesJS涉及图层面板在组件添加后立即程序移动时的更新。根本原因问题源于component:add事件与后续程序parent.move()操作之间的时间冲突。当组件被投放到画布上时，GrapesJS首先将其添加到组件树中，触发component:add事件。负责渲染图层面板的LayerManager会监听该事件以显示新组件。如果你随后在component:add事件处理程序中同步调用parent.move()，实际上...

查看详情

#58122024年4月15日作者 jogibear99881 个回答

0 个反应

组件缺陷提问画布 typescript

对合作感兴趣吗？

可复制演示链接 https://node-projects.github.io/web-component-designer-demo/index.html描述一下那个虫子几年前我开始用 Webcomponents 设计网页的框架，现在发现了 GrapeJS。想说也许我们目标相同，可以互相受益？（目前不知道具体怎么做，但也许吧）（链接：https://node-projects.github.io/web-component-designer-demo/index.html）目前我的流程布局设计支持缺失，但它在网格和Flexbox以及绝对定位元素中表现非常好。转换（旋转）内容也有效。我为此创建了一个VSCode扩展：https...

GJS Helper

感谢你的联系以及对 GrapesJS的关注！看到网页设计领域有其他创新项目真是太好了。你的Web Component Designer看起来非常有趣，尤其是它对网页组件的重视，高级布局能力（网格、灵活盒、绝对定位）以及VSCode集成。 GrapesJS 是一个开源、高度可扩展的网页构建框架，旨在为创建可视化编辑器提供坚实基础。虽然它已经支持网页组件并具备广泛的样式功能，包括 flexbox 和 grid，但我们始终期待不同方法如何提升用户体验和开发者工具。探索项目间潜在...

查看详情

#58102024年4月14日作者 ctrhub4 个回答

1 个反应

提问 style-manager 缺陷画布 typescript

不必要的画布风格

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Arc 版本 1.35.0 / Chromium 引擎 123.0可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子我的特殊情况：就我而言，所有插件和通用样式都放在头部。为了在编辑器中实现类似功能，我会把这些样式添加到画布头。当我在通用样式中指定背景色时，它会被GJS画布样式覆盖。这迫使我指定规则，而我不想这么做。 ![截图 2024-04-14 19 51 32]（https://github.com/GrapesJS/grapesjs/assets/108364491/1d2628a7-ed6...

artf

它的目的是存储画布样式，那些不会影响 hmtl/css 结果的样式，不会导出的样式，对吧？正确默认的机身是白色背景，这似乎是所有浏览器的默认颜色，对吧？是的，但“iframe”主体没有默认背景色，所以才有那个样式，所以你需要根据你的使用情境找到合适的。

artf

有 [canvasCss]（https://github.com/GrapesJS/grapesjs/blob/99bc79c1e45da1a2db62aace97b62206eb103bc2/src/editor/config/config.ts#L154）选项。下次请开个讨论区，这不是核心漏洞，而是用法错误。

ctrhub

嘿，@artf。谢谢你的回答。我不确定我们是否完全理解对方，我想澄清一个细节。是的，我知道canvasCss属性，而且我用它来更改所选组件的样式。我理解这个属性的本质：它旨在存储画布样式，那些不会影响 hmtl/css 结果的样式，不会导出的样式，对吧？那为什么默认画布样式有这个 CSS 规则 '''body { background-color： white; }``` ?为什么我们有理由去覆盖它？我理解选择了主体元素的情况，在这种情况下，为交互性应用一些样式是合理...

查看详情

#58032024年4月11日作者 rhoenerSBS3 个回答

0 个反应

提问缺陷文档

过滤阻挡并不按文档中描述的方式工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v123 可复制演示链接 https://jsfiddle.net/7xu0efLc/3/ 描述一下那个虫子 GrapesJs 文档显示，理论上可以过滤这些块，并用过滤后的块列表重新渲染块管理器。（参见文档 https://grapesjs.com/docs/api/block_manager.html#render）你可以看到它不起作用。只有文本块应该是可见的。如何复现这个漏洞？打开Fiddel或在自己的项目中整合链接文档中的过滤代码。预期的行为是什么？ BlockManager应该能够用过滤的块列表来渲染。目前的行为...

artf

这种方法只有在默认块管理器已经渲染完毕后才有效。如果你需要在开始时重新渲染，可以订阅封块管理器激活事件。 “''js editor.on（'command：run：open-blocks'，（） => { const 块 = 编辑器。BlockManager.getAll（）; const filtered = blocks.filter（block => block.getLabel（） == 'Text'）; 编辑。BlockManager.render（filte...

rhoenerSBS

谢谢你@artf

GJS Helper

谢谢你举报，@rhoenerSBS。关于过滤区块“功能不按文档描述的那样工作，这个问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'somethin...

查看详情

GrapesJS 问题

浏览所有主题