GrapesJS 问题

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

找到 743 个问题

🔍 bug
#33072021年3月3日作者 neon123454 个回答
3 个反应

成就:提供一个未被压缩的版本

有没有被压缩的 Grapesjs 单文件版本? 如果能有个专门的,方便修复漏洞和快速测试新功能/改进,那就太好了。

neon12345

令人失望的是,这个网站刚刚关闭了。当然我可以改变工作流程,但为什么不让大家参与得尽可能舒适呢?

stljeff1

有人能详细解释一下怎么用源地图吗?我在升级到最新的Grapes版本时遇到了非常困难,需要任何能帮忙调试的帮助。 我正在将 grapesjs 导入到 Angular/Typescript 应用中。如果我不包含压缩文件本身,我不明白怎么利用源地图。

Ju99ernaut

这个已经有了,只要用“grapesjs.js”代替“grapesjs.min.js”

#33052021年3月3日作者 RaresVlaiduc3 个回答
11 个反应

(v0.16.41) 点击时按钮未被设置为激活

版本:v0.16.41 你能重现演示中的bug吗? [ ] 是的 [x] 不 预期的行为是什么? 当我点击按钮时,应该会添加 gjs-pn-active 类。 详细描述那个漏洞 我有三个按钮分别对应三台不同的设备(台式机、平板和手机)。 我把它们放在顶部面板上,点击时画布大小会变,但点击的按钮没有被设置为激活。 你能附上截图、截屏或实时演示吗?** [x] 是的(附上) [ ] 不 ![图片](https://user-images.githubusercontent.com/73160095/109790439-164bea80-7c1a-11eb-9aeb-98954166afa2.png) ![图片](https://use...

Ju99ernaut

Grapesjs要求你的命令有“运行”和“停止”功能,才能自动切换面板按钮,所以这可能是问题所在: “''js const cm = 编辑。指挥; Grapesjs 无法在此命令格式下切换面板按钮 cm.add('desktop', e => e.setDevice('Desktop')) Grapesjs 能因为运行和停止而切换面板按钮 cm.add('desktop', { run(e) { e.setDevice('Desktop') }, stop() {} });...

kerryj89

@Ju99ernaut 谢谢你。 现在通过 'grapesjs.init()' 创建 'devices-c' 面板时,active 状态对我来说是正常的。

ClaudeCode

谢谢你举报,@RaresVlaiduc。 (v0.16.41) 按钮点击时未被设置为激活的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助...

#33012021年3月2日作者 mmotov2 个回答
0 个反应

更改一个复制的元素会影响其他复制的元素

版本:0.16.41 你能重现演示中的bug吗? 是的 预期的行为是什么? 当我复制粘贴元素(例如文本)并做任何修改时,它应该只会更改选中的元素。 目前的行为是什么? 目前,所有复制元素都进行了更改 你能附上截图、截屏或实时演示吗? https://www.loom.com/share/0dcf0cd5e920459fa6879d8154efae76

JamieBunyassi

你是怎么解决的?

ClaudeCode

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

#32952021年3月1日作者 marcepoblet4 个回答
0 个反应

BUG(v0.16.41):带有可拖拽属性的按钮组件无法正常工作

版本: v0.16.41 你能重现演示中的bug吗? [ ] 是的 [ ] 不 预期的行为是什么? 当我们有一个属性为 data-gjs-draggable 的 false 按钮时,这个按钮不应在画布中被拖动。 详细描述那个漏洞 步骤将带有可拖拽属性的按钮组件设置为 false将按钮拖入其他组件内拖动按钮 目前的行为是什么? 步骤将带有可拖拽属性的按钮组件设置为 false将按钮拖入其他组件内按钮不应拖动 你能附上截图、截屏或实时演示吗?** [ ] 是的(附上视频) https://user-images.githubusercontent.com/64096863/109490335-da245880-7a66-11eb-81...

artf

我猜你做错了什么,你是怎么创建这些组件及其属性的?你甚至不应该在检查员里看到这些属性。

marcepoblet

@artf 我们的准则中没有做任何更改。唯一的区别是我们更新了GrapesJs的版本。 之前我用的是v0.16.18版本,运行正常,但现在我们把GrapesJs更新到v0.16.41后,按钮功能就不行了。

marcepoblet

我们用以下方式设置属性: editor.getSelected().attributes.attributes[“data-gjs-editable”] = 'false' editor.getSelected().attributes.attributes[“data-gjs-copyable”] = 'false' editor.getSelected().attributes.attributes[“data-gjs-droppable”] = 'false' edi...

#32922021年2月26日作者 sudiptochoudhury3 个回答
1 个反应

每个组件在保存前有没有一个事件,组件可以监听?

非常感谢你提供这个图书馆。 背景:我正在构建一个编辑器,打算从我之前开发并在应用中使用的现有Vuejs组件中定义大部分组件。这些大多是基于界面的简单和复杂组件。例如,我有简单的 vuejs 组件,分别叫 su-form、su-field、su-label、su-input、su-radios、su-buttons、su-validations,以及使用简单组件如 su-login-form、su-registration-form 等的复杂 vuejs 组件。正如你可能猜到的,su-form、su-field 以及其他类似组件都有插槽,我会添加其他组件,以创建一个具有业务用例的实用组件。例如,我会在 su-form 的插槽中插入...

Ju99ernaut

我不确定每个组件是否都有这样的钩子,但你可以尝试利用组件的“toHtml”属性。这个问题已经在别处讨论过了,所以你可以在期刊中搜索,因为有不少。

artf

是的,你可以用自定义的“toHTML”/“toJSON”函数(模型中)来定义组件,以便自定义它们的输出

ClaudeCode

感谢你报告,@sudiptochoudhury。 存档前每个组件是否存在一个事件,组件可以监听?的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)—...

#32912021年2月25日作者 marcepoblet4 个回答
4 个反应

BUG(v0.16.41):图标工具栏上的复制图标也在修改原始元素

版本: v0.16.41 你能重现演示中的bug吗? [ ] 是的 预期的行为是什么? 重复的元素不应该影响原元素的变化。 详细描述那个漏洞 步骤:选择元素(文本、图片等)点击工具栏中的复制图标修改新重复的元素原始元素也被修改 https://user-images.githubusercontent.com/64096863/109187944-27f04680-7771-11eb-8ba4-1181ed56b08f.mp4 目前的行为是什么? 当某些元素被复制,且被复制的元素被修改时,原始元素也会被修改。 你能附上截图、截屏或实时演示吗?** [ ] 是的(附上了视频)

artf

谢谢大家的反馈,我知道这个bug,开发版已经修复了。我完全忘了发布它😬,我会尽量今天发布

devtechk

@artf 非常感谢!你帮我省了很多功夫 _ 我整个下午都在调试这个问题......顺便说一句,我查了npm,发现0.16.44版本已经不行了...... 你救了人。非常感谢!捐款,你值得拥有一切!❤️

aadilmehrajbhat

自“”葡萄“以来的回归问题:”0.16.34“'

#32902021年2月25日作者 marcepoblet3 个回答
0 个反应

当我们撤销图片时,changesCount参数应重置为零

版本: v0.16.41 你能重现演示中的bug吗? [ ] 不 预期的行为是什么? 当我们撤销图片时,changesCount参数应重置为零 详细描述那个漏洞 步骤:添加图片删除图片撤销更改 我们应该看到 changesCount 参数应该被重置为零。 目前的行为是什么? changesCount参数是递增的,而不是0。 你能附上截图、截屏或实时演示吗?** [ ] 是的(附上了视频) https://user-images.githubusercontent.com/64096863/109162404-ee124680-7756-11eb-9668-b1909b913831.mp4

GayathriGuru

嗨!@marcepoblet你能分享一下你用来定义 changesCount 变量以实现递增的代码部分吗?

artf

我就结束这段,因为我看不出这个功能有什么实质性的好处

ClaudeCode

谢谢你举报,@marcepoblet。 撤销图像时,changesCount参数应重置为零的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有...

#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 谢谢你的回答。请提供链接、示例或更多解释?😅

#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安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触发 保持...

#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)——这有助于团队更快识别根本...

浏览所有主题