GrapesJS 问题

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

状态

排序

找到 743 个问题

🔍 bug

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

查看详情

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

查看详情

#58012024年4月11日作者 oliviermgx1 个回答

0 个反应

缺陷提问 typescript

在 dist/index.d.ts 中出现打字错误

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 可复制演示链接分部/index.d.ts 描述一下那个虫子打字错误？property 而非财产不知道严重吗第8053/8054行： ' addBuiltIn（prop： string， definition： Omit<PropertyProps， “property”> & { proeperty？：“弦”; 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

感谢您在GrapesJS TypeScript声明文件中报告了这个错别字错误。你说得完全正确;dist/index.d.ts的第8053/8054行确实有个拼写错误。根本原因问题在于一个简单的拼写错误，dist/index.d.ts文件中的PropertyProps接口定义中使用了proeperty而不是property。该文件是自动从GrapesJS源代码生成的，意味着拼写错误源自生成该声明的源TypeScript/JSDoc注释。具体来说，相关系列包括：影响这...

查看详情

#57952024年4月4日作者 gitpugal2 个回答

0 个反应

提问 style-manager 缺陷

如何添加额外的自定义块管理器，比如块管理器和样式管理器这样的标签页或分区，并添加一些块？

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬V9 可复制演示链接描述一下那个虫子如何复现这个漏洞？...... 预期的行为是什么？ ... 目前的行为是什么？ ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则 [X] 我同意遵守本项目的行为准则

artf

@gitpugal如果有任何问题，请使用讨论区

GJS Helper

GrapesJS 提供了一个灵活的面板和命令系统，允许你通过自定义部分扩展其界面，类似于默认的块管理器和样式管理器的操作方式。要添加额外的自定义块管理器类标签或部分并填充特定块，你需要利用 GrapesJS的面板管理器、命令管理器和块管理器。这个解决方案包括创建一个新面板来存放自定义方块，在主 views-container （左侧侧边栏标签页）添加一个按钮来激活该面板，并定义一个命令，只渲染你自定义类别中的方块。逐步解决方案 1.初始化 GrapesJS 并定义自定义...

查看详情

#57882024年4月2日作者 lexoyo3 个回答

0 个反应

提问 style-manager 缺陷 typescript

CSS 属性的默认值

GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？无可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子大家好，!!<3 如何复现这个漏洞？打开[grapesjs官方网页演示]（https://grapesjs.com/demo.html）点击容器，例如英雄区容器对容器应用font-weight: bold;样式 => 内部所有文本变粗选择其中一个文本，勾选属性font-weight，该属性设置为normal 预期的行为是什么？ font-weight应该在空字符串或unset上''，这样我才能选择normal来取消应用font-weight: bold;...

artf

我需要选择别的，而不是普通是的，如果没有值，默认界面会预选“默认值”，但这很容易更新 “''js 编辑。StyleManager.getProperty（'typography'， 'font-weight'）.set（{ 默认： ' ' }）; ``` 所以我猜这不是核心漏洞，而是“意外预期”的行为 🥲

lexoyo

哦，明白了，我以为你会希望默认值是预期的行为 😃 谢谢你的回答

GJS Helper

你好！感谢你报告这个问题。你准确指出了GrapesJS风格管理器中关于默认CSS属性值的一个常见混淆点和合理的可用性问题，尤其是在处理继承时。这种行为并不是指GrapesJS故障的bug，而是默认属性呈现方式上的设计选择，可能具有误导性。根本原因解释 GrapesJS风格管理器定义属性时，defaults值。对于像font-weight这样的属性，默认定义通常包括defaults: 'normal'。当编辑器中选中元素且没有显式font-weight样式时，样式管理器的f...

查看详情

GrapesJS 问题

浏览所有主题