GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#59822024年7月2日作者 ihatov082 个回答

1 个反应

提问 style-manager 组件缺陷文档

诸如 md：flex-row（tailwind）等组件样式被移除

GrapesJS版本[x] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome 126.0.6478.127可复制演示链接 https://jsfiddle.net/6m53pwy7/4/描述一下那个虫子如何复现这个漏洞？我想用[Tailwind]（https://tailwindcss.com/）配合GrapesJS，但这个框架使用Utility-First的CSS类来构建快速布局。问题是它还使用[“特殊”类]（https://tailwindcss.com/docs/state-variants/#app）来定义样式变体，例如：hover：bg-blue 或 md：w-full 等。包含冒号的样式，如...

artf

你需要正确地逃离CSS “''js .md\\:p-18 { 填充：4rem; } ```

GJS Helper

看起来你遇到了GrapesJS的CSS解析和样式管理中的已知限制或bug，涉及包含逃逸冒号（\:）的选择器，这在像Tailwind CSS这样的框架中很常见，适用于响应式变体（例如md:flex-row）或伪类（例如hover:bg-black）。漏洞的根本原因 GrapesJS 使用内部 CSS 解析器（通常是 css-tree）和样式管理器来处理、存储和序列化 CSS 规则。当你在 domc.addType中使用 styles 属性定义样式时，GrapesJS 尝试解...

查看详情

#59422024年6月12日作者 adarshsingh1972 个回答

0 个反应

style-manager typescript 缺陷组件提问

BUg 在 RichTextEditor 中的应用

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？镀铬可复制演示链接我在期刊中提供了代码描述一下那个虫子 [截图时间：2024-06-12 下午3：09：58 IST.webm]（https://github.com/GrapesJS/grapesjs/assets/130237200/d5bbb21e-2e44-4564-a407-4768776c1cd8）问题是，刚应用任何加粗或斜体后，点击某处就会消失。 onMounted（async （） => { componentsTypeScript.value = {}; componentsDefaults.value = {}; a...

artf

从官方演示来看，它似乎按预期工作，所以我猜这和你的自定义逻辑有关。请提供一个简短且可复现的问题演示。

GJS Helper

你遇到的问题是，加粗或斜体格式在应用后点击后消失，这是自定义GrapesJS富文本编辑器（RTE）时常见的同步问题custom: true。根本原因当你在GrapesJS配置中设置richTextEditor: { custom: true }时，实际上是在告诉GrapesJS你将完全控制RTE的工具栏及其操作。因此，GrapesJS不会为“加粗”和“斜体”等动作提供默认实现，即使它们在actions数组中列出。你的代码随后尝试用 rte.add('bold', {...

查看详情

#59232024年5月31日作者 MarceloBD2 个回答

0 个反应

缺陷提问组件画布依赖

GrapeJs 有时在浏览器上加载不了

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Firefox 126.0.1可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子如何复现这个漏洞？打开你的Firefox浏览器，进入演示链接预期的行为是什么？编辑器应该会显示一个带有组件的白色屏幕画布。应该可以拖拽组件到屏幕中。目前的行为是什么？编辑器是灰色的，且没有任何组件可见。无法拖放组件。点击图层菜单时会报错。有时候它在匿名标签页上也加载不了，但有时会。非常奇怪的行为。我正在检查代码是否能解开它。行为准则[X] 我同意遵守本项目的行为准则

nhan-nguyen-se

@MarceloBD 你是怎么解决这个问题的？我也遇到同样的问题。

GJS Helper

看起来你在GrapesJS中遇到了一个间歇性bug，特别是影响加载和Firefox图层面板。点击图层菜单时的TypeError: model is undefined是一个关键线索，指向编辑器初始化时存在的竞争条件。根本原因解释这种间歇性行为最可能的原因，是GrapesJS编辑器初始化过程中出现的竞赛条件。以下是详细说明：组件模型加载：GrapesJS依赖其DomComponents模块管理画布上的所有组件（元素）。这些组件由骨干模型表示。图层面板渲染：图层面板（L...

查看详情

#59222024年5月30日作者 omerson-cruz2 个回答

0 个反应

提问组件缺陷画布 typescript

Unable to use UI controls for the video component when

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ v125.0.6422.113（官方构建）（64位）可复制演示链接 https://codesandbox.io/p/sandbox/eloquent-leaf-vd68cf?file=%2Findex.js%3A9%2C47 描述一下那个虫子如何复现这个漏洞？将视频内容拖到画布上。选择视频组件和角色设置/特征选择“YouTube”作为提供者粘贴YouTube源的视频ID。确保“控制”特性已启用尝试点击播放或调整视频分量的音量，但不起作用预期的行为是什么？预期：当 Video 的“控制”启用后，用户可以使用视频界面的控制，比如“播...

artf

编辑过程中你不能与iframe互动，否则就无法从画布中选择它。不过预览时你会检查iframe的互动。

GJSBlock

谢谢你举报，@omerson-cruz。关于无法使用视频组件UI控件的好问题。推荐的 Canvas 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something chang...

查看详情

#59052024年5月24日作者 gladykov2 个回答

0 个反应

画布组件缺陷提问 typescript

点击组件再点击“块”后，无法再次打开组件设置

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Opera 10.0.5130.23 |Linux 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子透明帆布从方块菜单中添加 1 Column 组件 -> Settings 标签会自动打开：ok_hand：点击编辑器框内新添加的组件进入 Blocks 标签页再次点击组件预期：设置再次打开实际情况：设置未打开。注意：我理解当组件之前未被选中时，这个功能正常工作。通过添加两个组件来验证这个行为很容易。但它会引入两种不同的行为，取决于之前的用户操作。我预计点击组件总是会打开 Setti...

artf

谢谢@gladykov，但这和核心无关，只是演示中实现的一个示例行为。

GJS Helper

这是关于GrapesJS用户体验的一个有效观察。你描述的行为不是功能失效的bug，而是用户体验上的不一致，点击已选中的组件后，如果用户手动切换到另一个面板（比如“块”），“设置”面板并不总是能重新激活。根本原因当组件最初添加或选择时，GrapesJS通常会激活“设置”或“样式管理器”面板。然而，如果组件已选中，用户随后手动导航到另一个面板（例如“块”、“图层”），GrapesJS会记住上一个激活面板。再次点击同一个已选中组件不会触发通常会强制面板切换回“设置”的“选择变...

查看详情

#58882024年5月16日作者 Dobby852 个回答

1 个反应

提问组件缺陷画布

即使将可编辑属性设置为true，也无法编辑组件内容

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome V124 可复制演示链接 https://jsfiddle.net/ycvz2gno/7/ 描述一下那个虫子如何复现这个漏洞？在画布中放置文本块双击文本块内的内容内容不可编辑预期的行为是什么？它应该能打开RTE，这样我们就能编辑组件内的文本目前的行为是什么？什么都没发生，组件无法编辑 ```行为准则 [X] 我同意遵守本项目的行为准则

Dobby85

通过查看代码，我发现要获得 RTE 功能，我们的新组件必须扩展“ComponentTextView”。我最初的问题是我做了类似的事情：而且它采用了我的“基础结构”视图，而不是“文本”组件。我会尝试找个变通办法，不扩展我的“baseStructure”视图。

GJS Helper

你遇到的问题是，通过fromElement: true加载的文本组件无法编辑，即使HTML里有data-gjs-type="text"和editable="true"，这其实是GrapesJS在初始化时处理现有DOM元素的方式。根本原因当GrapesJS用fromElement: true初始化时，它会解析你容器内已有的HTML（你是#gjs），并将其转换为内部组件模型。虽然它正确识别了带有data-gjs-type="text"的元素并创建了对应的GrapesJS文本...

查看详情

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

查看详情

#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()，实际上...

查看详情

GrapesJS 问题

浏览所有主题