GrapesJS 问题

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

找到 466 个问题

🔍 components
#36152021年7月13日作者 onmagic4 个回答
0 个反应

文本组件无法更新,无法从toHTML获得最终结果。

它是文本成分, 如果选择正文,文本会在组件到HTML方法中进行修正保存/应用/存储, 如果只是更新文本,但不保留文本部分,只需点击保存 然后使用“editor.getHTML()”,结果不会更新。 ![Snap77](https://user-images.githubusercontent.com/6985829/125385798-c8b46b00-e3cd-11eb-99e3-53b7b915672b.jpg)

v-pasha2

你找到解决办法了吗?

v-pasha2

我们在“0.17.19”版本遇到以下问题,而在“0.14.62”版本中运行正常。 我们尝试的是内联编辑体验,所以当我们检查component.getEl()函数时,它返回的是组件的更新文本,而如果用component.toHTML(),它会返回旧值,而不是更新后的值。虽然重点仍然是文本部分。 参考HTML。 toHTML() out out <div id=“i8h4tu”><p id=\“iwcefk\”>本网站使用示例数据进行说明。你可以用多个模板来构建页面。</p><...

v-pasha2

@artf你能帮我检查一下,或者有什么解决办法吗?

#36132021年7月12日作者 anlumo2 个回答
1 个反应

图像选择不一致

版本: 0.17.19 你能重现演示中的bug吗?[X] 是的[ ] 不 可重复[此处](https://grapesjs.com/demo.html)。 预期的行为是什么? 在资产管理界面中点击图片选择。 详细描述那个漏洞 目前的行为是什么?** 当你更改与图片组件关联的资产时,只需一键即可更改,然后点击X图标关闭对话框。 当你想更改与“背景图片”风格关联的资产时,单击不会改变任何东西,它只会在对话框中选择该资产。你必须双击它才能更改“背景图片”,这样对话框也会关闭。 这两种情况应该表现得相同。

artf

听起来很正规,下次更新会更新

ClaudeCode

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

#36122021年7月12日作者 TRIGGEREDcoder4 个回答
0 个反应

葡萄的滑块按钮和标签键都没有按预期工作

版本 0.17.19(grapesjs) 版本 0.1.5(grapesjs-lory-slider) 版本 1.0.6(grapesjs-tabs) 你能重现演示中的bug吗? 不 预期的行为是什么? 我应该能在点击前一、下一页按钮和标签名时,浏览不同的幻灯片和标签页。 详细描述那个漏洞 当我在模板中创建滑块,编辑不同的幻灯片并在 Grapesjs 上查看时,我就能浏览所有创建的幻灯片。同样地,在创建标签块后,我也能看到里面不同的标签和内容。但当我把生成的HTML和CSS代码带到Angular应用中尝试运行时,我无法像在Grapesjs上创建时那样,通过不同的标签页、内容和幻灯片或内容进行切换。 HTML和CSS由葡萄生成 [g...

artf

你能提供一个可复现的演示吗?

TRIGGEREDcoder

抱歉@artf,我遇到这个问题是因为生成的HTML里有脚本标签,而在Angular组件HTML中这个标签没有用。如果 HTML 包含脚本标签函数,我该如何使用 Angular 文件生成的 html?

artf

@TRIGGEREDcoder如果主要问题解决了,我就要关闭这个。如果你有问题,请开设一个新的讨论区

#36082021年7月9日作者 anlumo4 个回答
0 个反应

专长:禁用拖拽

你想给GrapesJS添加什么? 我已经实现了一个替代的文本编辑组件(不是基于RTE)。我希望人们能在这个组件中拖曳选择文本。 详细描述你的功能需求详细 问题是拖拽选择还会触发拖拽整个组件。我想只通过移动工具栏的项目来移动页面上的组件,以避免它干扰文本选择。 最新版本有替代方案吗? 我目前这样覆盖了拖拽: “''js element.addEventListener('dragstart', event => { event.stopPropagation(); event.preventDefault(); 返回false; },真); ``` 在视图的“init”函数中。这在 Chrome 上算是能用,但不总是有效,而且在 F...

iabhiyaan

“''js editor.on('component:drag:start', props => { const { target } = props; target.set({ 可拖拽:错误, 传播:['可拖拽'] }); }); ```

anlumo

这样不就禁用了所有拖拽,甚至是工具栏和图层管理器里的拖拽吗?

anlumo

我刚测试了,另一个问题是拖拽操作仍然吞噬事件,只是渲染了组件被禁用。

#36062021年7月9日作者 Palash-Mandal2 个回答
0 个反应

如果我用对齐浮子的浮点,不清楚,这就是设计问题发生的原因。

你好,@artf, 尝试用浮点表单对齐创建布局时,有一个通用的问题。 问题是浮点不会自动清除。 ![图片](https://user-images.githubusercontent.com/17553816/125087079-d32ee600-e0e9-11eb-8a08-15020c15b8fd.png) 当用户设置流值浮点(float left /right)时,我该如何在行中添加新类 '<div data-gjs-type=“default” draggable=“true” data-highlightable=“1” class=“row” id=“iroj”><div data-gjs-type=“default”...

artf

请遵循议题模板

ClaudeCode

谢谢你举报,@Palash-曼达尔。 关于如果我用对齐浮子的浮子,不清楚这就是设计问题的原因。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('so...

#36052021年7月9日作者 aryanchopra1 个回答
0 个反应

向块添加选定组件样式

所以我正在尝试获取选中的组件并用它做一个块,但是我在添加它的 CSS 时遇到了困难。我目前的做法是这样的: “编辑。BlockManager.add(widgetname, { 标签:控件名称, 内容:editor.getSelectedAll(), 类别:panelname, 属性:{ 标题:widgetname, 类别:图标级 }, });` 任何线索都会很有帮助:)

ClaudeCode

谢谢你举报,@aryanchopra。 感谢你分享关于向模块添加选定组件样式的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。Gra...

#36042021年7月9日作者 NoumanAhmad-Braqsol3 个回答
0 个反应

Editor.ON('component:update:content', model => { }}) 在某些原因下无法工作

如果用户删除元素中的所有文本并点击其他地方。然后再试着选择空元素,他又选不中,因为它是隐藏状态,我不知道它去哪了。所以针对这个问题,我用的是这段代码 该代码在文本中设置空格,如果用户从元素中移除所有文本。通过这样做,这些元素不再是空元素,因此 i 不会隐藏 。我们再次选择 。如果用户逐个移除文本字符,则运行良好。但现在的问题是,如果用户用 CTRL + A 选择文本,然后用退格键删除。目前上述代码无法使用。有人能帮帮我吗?

artf

正如这里已经建议的 https://github.com/artf/grapesjs/issues/3603#issuecomment-885305546 避免现在这样操作,添加一个简单的默认CSS,以防元素空着

NoumanAhmad-Braqsol

谢谢,我明白了!

ClaudeCode

感谢你报告,@NoumanAhmad-Braqsol。 感谢你分享关于 editor.on('component:update:content', model => { }}) 在某些原因下无法正常工作的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么:** 简约代码示例(不是你整个项目) 屏幕录制或截...

#35992021年7月7日作者 niranjank1512 个回答
0 个反应

@keyframes即使我通过关键帧对象后也没有添加

你好,@artf, 我已经添加了 '让CC = 编辑器。Css作曲家; cc.setRule('.fadetop-animate', { 不透明度:0,'animation-name': 'fadeTop' }, { atRuleType: 'keyframes', atRuleParams: 'fadeTop', 选择器:“to”, 风格:{ 不透明度:1 } });` 根据文件[](https://grapesjs.com/docs/api/css_composer.html#setrule) 但关键帧规则不会被添加到组件中。 如何为组件样式添加关键帧?

artf

用这个 “''js 编辑。CssComposer.getAll().add('@keyframes fadeTop { ... }') // 你的CSS字符串 ```

ClaudeCode

谢谢你举报,@niranjank151。 关于@keyframes即使我传递关键帧对象后也没有添加,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => conso...

#35942021年7月6日作者 maxtsh3 个回答
1 个反应

当编辑器的父滚动时,将鼠标悬停在组件上,显示错误位置

版本:0.17.19 你能重现演示中的这个bug吗?不会,因为是全屏,没有父容器滚动功能。 预期的行为是什么? 悬停状态干部以查看部件位置的变化 详细描述那个漏洞 当我想选择或悬停在特定组件上时,由于父滚动,干部位置显示错误。 在0.17.19之前没有这种情况,当时还算正常。 你能上传截图、截图或实时演示吗?是的 ![Screenshot_17](https://user-images.githubusercontent.com/38842256/124558368-c42d0700-de4f-11eb-936f-881fc0cd57ea.png)

artf

如果可滚动元素不是编辑器的父节点,你可能需要这个选项 https://github.com/artf/grapesjs/blob/dc45604962e4e6a4a075f19d5de67090bac15fa5/src/editor/config/config.js#L157-L163

no-response[bot]

由于我们请求原作者提供更多信息未获回应,本期已自动关闭。仅凭当前期刊中的信息,我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案,请随时联系我们,以便我们进一步调查。

ClaudeCode

谢谢你举报,@maxtsh。 当编辑器的父滚动时,将鼠标悬停在组件上,显示错误位置的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队...

#35872021年7月2日作者 milan-holes2 个回答
0 个反应

我如何创建 Grapesjs 服务,用来从存储的组件生成 HTML?

你好。有没有可能创建 Grapesjs 实例,而不生成整个编辑器?我创建了带有异步数据的自定义组件,需要在Node中创建后端服务,该服务从存储的组件生成HTML输出,并填充API的数据。 现在我出现错误了:ReferenceError: 窗口未定义 谢谢。

artf

我会把它关闭为重复 https://github.com/artf/grapesjs/issues/3399

ClaudeCode

谢谢你举报,@milan混蛋们。 错误错误:ReferenceError: 窗口未定义 发生在组件在组件生命周期完全初始化前尝试访问属性时。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript if (component && typeof component.method === 'function') { 你的准则 } ``` 根本原因分析: 组件在调用你的方法之前不会验证状态。当多个操作同时发生时,这会...

浏览所有主题