GrapesJS 问题

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

找到 877 个问题

🔍 question
#32892021年2月23日作者 bgrand-ch4 个回答
2 个反应

(0.16.41) 组件已失去其风格

版本: 0.16.41 你能重现演示中的bug吗? [X] 是的 [ ] 不 预期的行为是什么? 1)将选中的父组件(容器)复制到剪贴板。 2)从剪贴板中选定的父组件(容器)粘贴到同一页面或其他页面。 3)所有组件都保留ID样式和内联样式。 目前的行为是什么? 1)将选中的父组件(容器)复制到剪贴板。 2)从剪贴板中选定的父组件(容器)粘贴到同一页面或其他页面。 3)组件失去了ID样式,但内联样式未丢失。 组件没有重新生成的样式ID,而是使用相同的之前ID,但带有“-2”。 你能附上截图、截屏或实时演示吗? [X] 是的(附上) [ ] 不 https://jsfiddle.net/bgrandch/71yuz26p/33/ 根据...

artf

那是因为你用你的版本更新了原始命令(错误地)。确实,如果我把你的插件从演示中移除,一切都会正常运行。请检查原始的复制粘贴命令,你应该在粘贴前克隆组件,所以你的实现可能无法正常工作。

artf

只要检查原始命令 https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js

bgrand-ch

@artf 谢谢你的回答。请提供链接、示例或更多解释?😅

#32882021年2月23日作者 ilsantuzzo2 个回答
0 个反应

编辑克隆时不影响克隆组件

我发现克隆和所有克隆组件都有镜像编辑功能。有没有办法避免这种情况? ![GJS](https://user-images.githubusercontent.com/5839445/108843429-f6457700-75da-11eb-91d7-0e097519ef54.gif)

artf

我今天应该能发布修复😬方案 https://github.com/artf/grapesjs/issues/3291

ClaudeCode

谢谢你举报,@ilsantuzzo。 关于编辑克隆而不影响克隆组件的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件...

#32872021年2月23日作者 RaresVlaiduc4 个回答
1 个反应

包装造型

首先,祝贺@artf完成了这个了不起的项目 💯 我目前正在做一个项目,想问一下是否可以像编辑里面其他组件那样编辑包装器(主体)。 例如,我想像编辑背景色一样编辑包装的填充部分。 ![葡萄提问](https://user-images.githubusercontent.com/73160095/108832886-c72c0700-75d4-11eb-8d74-daa48d8a0440.png) 我看过配置,但没找到有用的信息。 谢谢! LE:我找到了方法。我正在覆盖getWrapper()中的可样式数组,但我不确定这是不是正确的方法。你能确认吗?

artf

是的,@kuhelbeher,现在封装器是在插件后创建的,所以你可以像扩展其他组件一样完全扩展它

artf

LE:我找到了方法。我正在覆盖getWrapper()中的可样式数组,但我不确定这是不是正确的方法。你能确认吗? 是的,当然没问题,但如果需要,可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性 https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.j...

kuhelbeher

你可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.js#L9 你好,我注意到这些选项是针对旧版本的 Grapesjs,但在新版本中 domComponents 配置中,封装属性被移除了。有没有办法...

#32862021年2月23日作者 abulka3 个回答
0 个反应

优点:Codemirror 自定义密钥和插件

有没有办法为内置的 Codemirror 编辑器添加快捷键和插件?我特别想要一个评论快捷键。 有各种插件使用Grapesjs编辑器,包括 https://github.com/artf/grapesjs/issues/324#issuecomment-330571539 和自定义HTML代码插件,https://github.com/Ju99ernaut/grapesjs-script-editor 和 https://github.com/ryandeba/grapesjs-html-block,都能从中受益。 虽然有办法通过常规的 Codemirror 自定义选项,但调用插件似乎不起作用,比如说 “JavaScript var...

abulka

我终于让Grapesjs捆绑的'commentRange'工作了——必须直接调用'cm.commentRange',而不是通过'cm.execCommand'。此外,它还需要参数。因此,只要你选择你想评论的区域,我就能让一些评论功能正常工作: “JavaScript 'Cmd-1': 函数 (cm) { cm.commentRange(true, cm.getCursor(true), cm.getCursor(false)) }, // comment 'Cmd-2':...

artf

是的,我觉得在CodeMirrorEditor.js中曝光没问题

ClaudeCode

谢谢你举报,@abulka。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在: 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本,可能已经解决了这个问题 如有稳定版,升级前先测试最新稳定版 如果漏洞非常严重,可以使用“npm audit fix --force”,但请务必彻底测试 理解风险: 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触发 保持...

#32852021年2月21日作者 ashercoren4 个回答
6 个反应

:画布iframe中的文档类型

嗨。 这个问题已经被问过两次([这里](https://github.com/artf/grapesjs/issues/973)和[这里](https://github.com/artf/grapesjs/issues/1230)),但从未有过答案。 有没有办法在画布iframe的开头加上'<!DOCTYPE html>',这样iframe就会进入标准模式? 我需要这个,因为我想用tinyMce作为自定义RTE,而tinyMce需要标准模式。

artf

在下一个版本中,我会添加一个新的事件辅助工具,允许在加载前编辑 iframe 内容: “''js editor.on('frame:load:before', ({ el }) => { const doc = el.contentDocument; 文档开启(); doc.write(“<!DOCTYPE html>”); 文档关闭(); }); ```

bgrand-ch

你好, 对于未来的问题或技术问题(非漏洞),GitHub的[讨论](https://github.com/artf/grapesjs/discussions)标签是最佳选择。 如果问题已解决,请关闭,或在[讨论](https://github.com/artf/grapesjs/discussions)->[问答](https://github.com/artf/grapesjs/discussions/categories/q-a)类别写一条详细的新消息(并关闭本期)。...

artf

不太有,但我愿意听听如何让它可自定义的解决方案。

#32822021年2月20日作者 ThomasPof2 个回答
0 个反应

CleanId函数无法与MJML代码兼容

即使在最新版本的 grapesjs(0.16.41)上,CleanID 仍然无法支持 MJML 代码。 这和这个已关闭的问题有关:https://github.com/artf/grapesjs/issues/3276 这个函数不会读取MJML标签:“attrs”是空的,我找不到原因......

artf

id 问题应该已经在最新的 mjml 插件版本中解决了

ClaudeCode

谢谢你举报,@ThomasPof。 关于CleanId函数无法与MJML代码配合提出的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#32802021年2月19日作者 bgrand-ch1 个回答
0 个反应

特色:无渲染

你想给GrapesJS添加什么? 我尝试为GrapesJS做样式并调整其元素(面板、按钮、画布等),覆盖所有样式元素真的很烦人。 描述你的功能请求 一个无渲染的GrapesJS。将特定的 GrapesJS 元素(面板、按钮、画布等)附加到文档中的任意容器中。为独立的类和子类添加样式(.gjs、.gjs-panels、.gjs-panel-{name}、.gjs-buttons、.gjs-button-{name} 等)。使用这些功能的指南(如果已有的话),仅为样式和定位指南。 最新版本有替代方案吗? [ ] 是的(描述另一种情况) [X] 不 这是否与某个问题有关? [ ] 是的(请提供本期链接) [X] 不

ClaudeCode

谢谢你举报,@bgrand-ch。 关于FEAT:无渲染的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一...

#32792021年2月19日作者 abulka2 个回答
0 个反应

如何让 TextNode 编辑更新组件内容?

我正在构建一个自定义的“textarea”组件,希望它能像内置的“text”组件一样,这样编辑grapesjs画布上的textnode时,会更新'.components'中的'textnode'。我希望组件能正确导出为 HTML,比如“<textarea>我的用户编辑了 TEXTNODE CONTENT”</textarea>。 目前,'fancyTextarea'导出的html在textnode上总是保持不变,尽管我在画布上编辑了它。有没有什么textnode变更事件我应该捕获并执行——我找不到? 这是我的组件 “JavaScript const fancyTextarea = editor => { 编辑。DomCompone...

artf

你好@abulka,既然编辑是在视图中进行的,你应该在视图更新后更新组件模型。所以应该能用类似这样的东西 “''js 型号:{ ... }, 浏览量:{ 事件:{ 输入:'handleInputUpdate', }, handleInputUpdate(ev) { this.model.components(ev.target.value); } }, ```

ClaudeCode

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

#32782021年2月18日作者 Dmurl51 个回答
0 个反应

Render上的自定义组件视图被称为早期

版本: 以下用0.16.34(从 https://unpkg.com/grapesjs 回归)和0.16.22在Preact项目中复制 详细描述那个漏洞 自定义的GrapesJS组件在渲染到画布时调用视图的“onRender”函数。根据文档说明: ![图片](https://user-images.githubusercontent.com/17631765/108421023-30d59b00-71fa-11eb-8af8-49522a3f18d8.png) 我预计在组件完全渲染到画布上,所有尺寸和位置属性都确定后,才会调用这个。然而,正如下面的重现代码笔所示,onRender() 是在确定元素尺寸之前被调用的,且元素的大小为...

ClaudeCode

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

#32772021年2月18日作者 FrancoFasano2 个回答
1 个反应

默认PDF大小:美国字母 如何设置A4?

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl *版本:0.16.3 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗? [X] 是的 [ ] 不 预期的行为是什么? 一个设置或文档,帮助开发定义PDF大小 详细描述那个漏洞 这其实不算是bug,而是设置问题。 我无法将PDF尺寸改成A4,代码中找不到允许从A4开始的参数或配置 目前的行为是什么? 我用 grapesjs 在 invoicenin...

artf

你好,Franco,你可以通过更改[devices](https://grapesjs.com/docs/api/device_manager.html)来定义帧大小。

ClaudeCode

谢谢你举报,@FrancoFasano。 默认PDF大小:美式字母 如何设置A4?的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队...

浏览所有主题