GrapesJS 问题

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

状态

排序

找到 877 个问题

🔍 question

#33262021年3月9日作者 devtechk3 个回答

2 个反应

style-manager 组件提问画布

Canvas 风格 CSS

大家好，与其用这种方式在首页造型...... 有可能在Canvas中使用SCSS文件吗？canvas { style：['FILE.SCSS'] } 还是用一个初始化CSS让它更干净？谢谢！ ' myComponent.append（<style> 正体 { 背景：RGB（204,204,204）; } .footer { 位置：绝对; 底部：5毫米; 宽度：自动; 左侧：5毫米; 右侧：5毫米; } .footer-container { 填充：7像素88像素 7像素96像素; } .footer-text：nth-child（2） { float：right; } .footer-text { 字体大小：11px; } .l...

artf

如果你不想用文件，可以用 [canvasCSS 选项]（https://github.com/artf/grapesjs/blob/da98f1905c6b9c691793685a7f4e21f109a8843e/src/editor/config/config.js#L77）。

devtechk

非常感谢！这个配置文件对我帮助很大！

ClaudeCode

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

查看详情

#33222021年3月7日作者 Andrew-Chen-Wang1 个回答

0 个反应

提问组件 typescript

如何更新内置组件的特性？

NVM 你必须在插件里加组件覆盖。

ClaudeCode

谢谢你举报，@Andrew陈旺。关于如何更新内置组件特性？的好问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周...

查看详情

#33192021年3月5日作者 anatoli-dp3 个回答

0 个反应

提问缺陷画布 typescript

图层生成新行后文本不会居中

版本：现在？你可以在控制台输入“grapesjs.version”获得版本你能重现演示中的bug吗？ [ ] 是的 [ x] 没有 // 公平地说，演示版里从未尝试过预期的行为是什么？在编辑图层文本并添加新行并回距时，我本应期望编辑后的文本被重新输入详细描述那个漏洞文本不会重新置中，而是被凸起（见附图）目前的行为是什么？按回车键开始新行后，文字会升高到中心以上，然后往外退行。不过完全清除所有文本和重新输入时，文字确实会重新置中。你能附上截图、截屏或实时演示吗？** [ x] 是的（附上） [ ] 不 ![截图（32）]（https://user-images.githubusercontent.com/7502...

artf

好的，我会推送图层名称编辑的修复，可能启用新行不太合理（我会在Enter/Esc键上停止编辑）。第二个问题，如果你用自己的工具来调整画布大小，可能应该调用“editor.refresh（）”来调整工具栏

anatoli-dp

是的，我后来才意识到editor.refresh（）这个功能。否则谢谢。太棒的项目了

ClaudeCode

谢谢你举报，@anatoli-DP。关于图层生成新行后文本不会居中，这个问题问得很好。推荐的 Canvas 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something c...

查看详情

#33172021年3月5日作者 martijnc3 个回答

0 个反应

增强组件提问

FEAT：增加对自定义RTE API承诺的支持

你想给GrapesJS添加什么？支持基于承诺的 API 的富文本编辑器。详细描述你的功能需求详细 CKEditor5 的“Editor.create”和“Editor.destroy”方法返回一个“承诺”，当编辑器完全创建或销毁时才会解决。这会导致销毁编辑器（完成组件编辑）时出现问题，因为 GrapesJS 在 'Editor.destroy' 承诺尚未解决之前就同步了修改到模型，导致 CKEditor HTML 写入模型。作为一个变通方法，你可以在承诺解决后再次同步内容，但如果API支持承诺会更干净。我们可以以向后兼容的方式添加这一点，比如检查RTE的“使能”和“禁用”方法的返回值是否可，如果是，则等待承诺解析后再继续。...

artf

是的，说得通，我建议你先试着让ComponentTextView中的启用/禁用方法默认异步而不破坏系统，但确认是否可行总是个选项。

artf

这本应已经是可行的。

ClaudeCode

谢谢你举报，@martijnc。关于FEAT：支持自定义RTE API的承诺，真是太棒了！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*...

查看详情

#33162021年3月5日作者 am1rb4 个回答

1 个反应

组件提问缺陷文档 typescript

编辑器不会移除死稿块

版本： 0.16.34 你能重现演示中的bug吗？ [ ] 是的 [x ] 不据我了解，导入代码对话框跳过了所有HTML脚本，所以我无法在演示中重现这个问题预期的行为是什么？编辑者必须先移除失效脚本块，才能在生成的HTML末尾添加新的脚本块详细描述那个漏洞* 我在项目中用脚本（https://grapesjs.com/docs/modules/Components-js.html）定义了一个组件。当我将这个组件添加到编辑器并保存模板时，编辑器生成 HTML，并在正文末尾附加一个脚本块以启动相关组件。输出的HTML大致是这样的： '''html <head>  <script>/ 附加的脚...

Ju99ernaut

我无法复现这个，也许你能提供更多关于自定义组件的信息，无论如何我怀疑这是存储相关的问题。你是先存储然后加载生成的HTML页面吗？

Andrew-Chen-Wang

通常内联脚本会放在正文底部。试着把它放那里？

am1rb

我自己不添加任何内容。编辑器会在生成的HTML末尾添加与组件相关的脚本，并添加一个新的脚本标签。请查看这个文件： https://github.com/artf/grapesjs/blob/dev/src/editor/model/Editor.js#L513 我觉得这里可能有问题。编辑器会添加新的脚本块，但不会移除旧的。

查看详情

#33152021年3月5日作者 devtechk4 个回答

3 个反应

提问 typescript 常规

毫米或厘米单位转换为px。

我意识到毫米或厘米单位是可以转换成像素的。我该如何解决这个问题？谢谢你 ![图片]（https://user-images.githubusercontent.com/22073497/110118707-0ddee580-7dbb-11eb-8749-69e918b9ce91.png）

Ju99ernaut

你有没有在样式管理器输入中添加毫米、厘米等单位，这些不是内置的

Ju99ernaut

如上所述，这是浏览器引擎的功能，通常这是解决办法，但我从没用过它来处理非内置的设备： “''js window.editor = grapesjs.init（{ // ... styleManager： { // ... avoidComputed： ['宽度'， '高度'， '填充'， 'margin']， // ... } // ... }); ```

Andrew-Chen-Wang

我觉得这就是浏览器引擎的本质性。我不是专家，但我认为输出只是发动机最终解读的信息。

查看详情

#33132021年3月5日作者 fahad1574 个回答

2 个反应

增强提问文档 typescript

让文本可编辑需要大量点击，我们能让文本字段在一次点击中可编辑吗？

警告请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么？详细描述你的功能需求详细最新版本有替代方案吗？ [ ] 是的（描述另一种情况） [ ] 不这是否与某个问题有关？ [ ]...

Andrew-Chen-Wang

拖动方块时单击操作会让人烦。如果你已经选好了方块，仍然需要双击。如果你没选中某个区块，那你只需双击该区块来编辑文本。我觉得这已经很常见了。

fahad157

@Andrew-陈王：是的，没错，但我的情况是想用单击编辑，如果可能的话请指导一下。

mihir-khandekar

你@fahad157解决的？

查看详情

#33122021年3月5日作者 Andrew-Chen-Wang3 个回答

0 个反应

增强提问常规

专长：侧板宽度改为20%

你想给GrapesJS添加什么？侧板看起来被揉皱了。除非你的桌面很大，否则我不太希望块面板的图片被放到一边。此外，顶部的图标，比如“获得新方块”图标，除非屏幕较大，否则会被遮挡。详细描述你的功能需求详细将侧面板宽度从15%改为20%，具体来说是类别：'gjs-pn-views-container' 最新版本有替代方案吗？ [ ] 是的（描述另一种情况） [X] 不这是否与某个问题有关？ [ ] 是的（请提供本期链接） [X] 不

Ju99ernaut

目的是最大化画布覆盖的面积，但你也可以用自定义CSS轻松更改面板大小。

Andrew-Chen-Wang

当然，我只是觉得试玩版不应该看起来像那样皱巴巴的:P那我想这只是个人看法。

ClaudeCode

谢谢你举报，@Andrew陈旺。关于FEAT：把侧板宽度调到20%的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”事件进行细致...

查看详情

#33102021年3月5日作者 Andrew-Chen-Wang3 个回答

3 个反应

提问缺陷画布

平板和手机视图无法调整大小

版本：演示版中的那个你能重现演示中的bug吗？ [X] 是的 [ ] 不预期的行为是什么？移动端和平板视图在窗口缩小时应该会调整画布大小。详细描述那个漏洞桌面视图在调整窗口大小时会正确调整画布大小目前的行为是什么？* 当窗口在移动端和平板视图中缩小到一定宽度以下时，画布不会变大。面板随后覆盖了画布。这在桌面视图中不会发生，只有在移动端和桌面视图中才会出现。详细描述那个漏洞*** 桌面视图在调整窗口大小时会正确调整画布大小。但只有桌面视图。移动端（包括竖屏和横屏）和平板视图不会调整大小

Ju99ernaut

“移动”和平板“设备是像素延迟的，所以它们只是根据窗口大小调整画布大小到一定像素数。我记得“桌面”只是把Canvas设置为100%。

artf

正如@Ju99ernaut提到的，这就是设备的工作原理。说实话，我甚至不明白为什么要调整窗口大小？你还可能开始看到或更新与正确设备无关的样式，这肯定会让人困惑。

ClaudeCode

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

查看详情

#33072021年3月3日作者 neon123454 个回答

3 个反应

缺陷增强提问 typescript