GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#32112020年12月29日作者 alemenciones2 个回答
3 个反应

如何移动组件

亲爱的,你好: 我想用程序方式把一个组件移动到封装器的首尾,我记得像editor.getWrapper().add(editor.selectedComponent(), {at: 0});,但这是从selectComponent添加一个新的克隆, 也许在位置设置触发器“排序器:拖动:结束”? 你能帮我吗? 抱歉我的英语不好 :')

artf

可能有必要添加一个新的“component.move(desComponent, opts)”方法来应对这种情况,但目前你可以用以下方式实现: “''js const selected = editor.getSelected(); select.remove({ temporary: true });临时选项可以避免移除与组件相关的样式 editor.getWrapper().append(selected, { at: 0 }); ```

ClaudeCode

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

#32092020年12月24日作者 TouficNouwayhedd2 个回答
1 个反应

在预览模式下,工具栏只是隐藏,但仍可点击

版本: 0.16.22 你能重现演示中的bug吗? 是的 预期的行为是什么? 当用户按下预览按钮时,图标工具栏不可点击。 详细描述那个漏洞 当用户点击预览(即使是在演示网站)时,如果你在点击预览前将鼠标悬停在选中的组件上,你会发现可以再次点击工具栏。 为了解决我项目中当前的问题,我必须在预览运行时隐藏工具栏的div(“gjs-toolbar”),退出预览时再显示一次。 目前的行为是什么? 在预览模式下,将鼠标悬停在选中的组件上,仍然有可点击的元素。 你能附上截图、截屏或实时演示吗?** 是的。请查看附带的mp4 https://user-images.githubusercontent.com/66264061/103091217...

artf

修复已准备好下一次发布

ClaudeCode

谢谢你举报,@TouficNouwayhedd。 在预览模式下,工具栏只是隐藏但仍可点击的问题,似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这...

#32072020年12月23日作者 shkhalid4 个回答
1 个反应

表格不提交

我正在尝试创建自定义方块。但当我在内容中使用“组件”时,表单没有提交。 当我用“内容”代替“组件”时,我能获取所有表单数据。 但这样就不允许我拖拽新的输入到成型状态。

gixid192

关键是——HTML缺失了。 如果可以的话,建议你把代码分享到codesandbox或类似的在线编辑器里。

artf

是的,我们需要完整的代码来理解问题。 无论如何,如果你用的是“脚本”,请定义一个自定义组件,而不是直接放在块里,否则存储会有问题。我知道文档里是这样说明的,但块的使用只是示例(我希望能在下一个版本更新)

no-response[bot]

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

#32042020年12月22日作者 maivanchuong2 个回答
0 个反应

我想在MVC里保存并加载并 asp.net

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗? [ ] 是的 [ ] 不 预期的行为是什么? 详细描述那个漏...

artf

不要不尊重,阅读并遵循问题模板......

ClaudeCode

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

#32022020年12月21日作者 vbeskrovny2 个回答
0 个反应

需要帮助:保存/恢复GJS数据块类型

大家好,能指点我正确的方向吗?当我保存html代码和css代码时,它们会被新行修剪。有什么方法可以避免修剪吗?插入“自定义代码”块,从远程存储保存并恢复后,显示为“默认”类型或“文本”类型。如何将data-gjs-type设置为自定义代码返回? 非常感谢......

vbeskrovny

通过使用 StorageManager 中的 json 内容解决了这个问题。

ClaudeCode

谢谢你举报,@vbeskrovny。 关于需要帮助:保存/恢复GJS数据块类型的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somet...

#32002020年12月20日作者 sprklinginfo3 个回答
0 个反应

需要帮助:能找到方块掉落到的组件吗?

你好, 如果我在动态添加的组件上拖放一个方块,我如何获得或访问该方块被投放到的组件? 我把拖曳模式设置为“绝对”(设计模式),这样用户可以自由地在页面任意位置放置一个方块,每页都有背景图片。当编辑器启动时,页面会动态添加。方块应根据背景图片放置在页面的不同部分。由于拖拽模式,方块被设置为“绝对”。我的问题是,如果我更改浏览器大小,带有背景图片的页面会相应缩放,但那些块却不会跟着目标图片移动。我在想,一旦块被放下,我需要把位置改成“相对”,并附加到页面上(图片)。 尝试用“block:drag:stop”事件更改掉落方块的样式,但它变得隐形,它还在DOM上,但我看不到它了,“设置'z-index'为100000,也没用。我也搞不清楚...

artf

抱歉兄弟,我这里只回答你的主要问题如果我在动态添加的组件上拖放一个方块,我如何获得或访问该方块被投放到的组件? “''js 模块和组件是两个不同的概念,如果你不理解,请阅读文档 editor.on('block:drag:stop', (component, block) => { 如果存在分量,表示掉落成功 如果(分量) { component.addStyle({ color: 'red' }) // 例如:更新风格 你需要包含这个新组件的父节点吗? const par...

inthismachine

@artf如果xxx被非法丢弃,有没有办法把<mj-text>xxx</mj-text>包裹在MJ截面和MJ列里?比如使用者试图把它砸在身体上。原因是我想自动把丢弃的文本块添加到一列行里,如果它没有放在列内。

ClaudeCode

谢谢你举报,@sprklinginfo。 关于需要帮助:获取方块被投放到的组件? 这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('s...

#31942020年12月18日作者 stljeff13 个回答
0 个反应

我该如何重新利用Spectrum色彩选择器?

我想重新利用GrapesJS中使用的色彩选择器。 我必须用颜色选择器来设置一些项目的关卡设置。这些设置可以通过GrapesJS编辑器访问。我想利用现有用于字体颜色等特性的颜色选择器。 我看到过[这篇帖子](https://github.com/artf/grapesjs/issues/1393)关于扩展一个特性以获得颜色选择器。很遗憾,我觉得我做不到。据我所知,特质是组件的一部分;我不是在处理组件,而是在处理 GrapesJS 一般范围之外的项目层级设置。 我只需要把输入标签传递给 Spectrum,并且能够在 Change 上添加事件处理功能。我能看到grapesjs.js编译包里有Spectrum插件,只是不明白是否以及如何利...

artf

目前,唯一的方法是使用这个非公开的API。 “''js editor.getModel().initBaseColorPicker(DomElement, { / spectrum options / }); ``` 我已经开始开发一个新的UI模块,以应对类似情况(比如添加/替换GrapesJS UI元素的能力),但遗憾的是,我不知道它什么时候发布,因为它还处于实验阶段。

himedlooff

有没有办法保留色彩选择器,同时配置光谱选项?比如说,如果我想强制十六进制颜色,我可以传递“{ preferredFormat: ”hex“ }'?

ClaudeCode

谢谢你举报,@stljeff1。 关于我该如何重新利用Spectrum选色器?的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”...

#31932020年12月18日作者 jlong-crestron4 个回答
0 个反应

FEAT:修改当前内部对象存储,以支持关系映射,取代当前可索引容器实现

你想给GrapesJS添加什么? 目前,新实例化的编辑器实例会被添加到可索引集合中,用户必须在实现中管理这些编辑器之间的关系。相反,应该有一个托管集合,用户可以提供一个键值,然后映射到编辑器的实例。这也将允许对编辑器 API 进行扩展,添加 CRUD API 端点来管理对象实例。 最新版本有替代方案吗? 目前没有 这是否与某个问题有关? 不

artf

我不确定我理解得对不对,你能不能说明一下当前的行为和你的提案?

jlong-crestron

基本上,我希望在初始化时修改一个汇总编辑器实例的暴露列表,这样如果能在初始化配置对象上用类似“editorInstanceId”的新属性,将“editors”从列表改成带有新属性的映射,我可以在接下来的几天内创建一个POC。

no-response[bot]

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

#31922020年12月18日作者 niveth092 个回答
0 个反应

如何在预览模式下让组件不可编辑?

我正在尝试让预览模式下的组件无法编辑。以下代码无法正常工作。请帮我解决这个问题。 编辑; ngOnInit(){ this.editor = this.initializeEditor(); this.editor.on('load', () => this.editor.runCommand('preview')); this.editor.on('run:preview', () => { this.editor.Panels.getPanels().reset([ 某种代码 ]) this.whenRunPreview(this.editor,'text'); this.whenRunPreview(this.editor,...

artf

通过这种方式修复你的功能 “''js whenRunPreview(ed, type) { ed.getWrapper().findType(type).forEach(cmp => cmp.set({ editable: false })) } ```

ClaudeCode

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

#31862020年12月11日作者 kuhelbeher2 个回答
0 个反应

按百分比调整大小

你好,当元素的尺寸设置为百分比时,出现了一个调整尺寸的bug: ![simplescreenrecorder-2020-12-11_15 46 17](https://user-images.githubusercontent.com/37115006/101912204-195eae00-3bca-11eb-9c8b-c202b61b9d1e.gif) 你可以在这里查看本期[https://codesandbox.io/s/grapes-resize-2ycel?file=/src/index.js]

artf

不是bug,只是我一直没怎么正确调整比例 🙃 如果能有永久居民就好了

ClaudeCode

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

浏览所有主题