GrapesJS 问题

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

找到 220 个问题

🔍 canvas
#37182021年8月21日作者 Abhisheknanda13444632 个回答
0 个反应

覆盖阻力函数

你好@artf我想覆盖“dmode ”absolute“' 的拖拽功能。 目前我们可以自由移动画布,如果在桌面上移动,其他移动端和桌面设备就不一样了。另外,我希望像素数是百分比,这样在整个屏幕上都能响应。 请问你能帮我从哪里开始,以及如何实现吗? 谢谢

artf

你必须[扩展](https://grapesjs.com/docs/modules/Commands.html#extending)[ComponentDrag](https://github.com/artf/grapesjs/blob/dev/src/commands/view/ComponentDrag.js)命令

ClaudeCode

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

#37152021年8月20日作者 mingxin-yang3 个回答
0 个反应

如何添加点击事件

这是我自定义的区块代码: 我想在把按钮添加到画布后添加点击事件,点击后就能看到mj文本中的内容

mingxin-yang

@artf

artf

@mingxin-yang 你必须 [扩展](https://grapesjs.com/docs/modules/Components.html#update-component-type) “mj-button” 组件的 [view](https://grapesjs.com/docs/modules/Components.html#view)

ClaudeCode

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

#37142021年8月18日作者 ltenti2 个回答
0 个反应

部分解析

讨论于 https://github.com/artf/grapesjs/discussions/3711 <div type='discussions-op-text'> <sup>最初由 ltenti 于 2021 年 8 月 17 日发布</sup> 大家好, 我想知道如何应对这种情况:我必须允许我的应用用户编辑网页网页上有用户无法编辑的固定部分整个HTML由服务器端的遗留子系统生成,但其中的部分必须由用户自由编辑 我实现了一个自定义组件,可以从服务器获取遗留的 HTML,并用 model.components(data) 语句“注入”到画布中。 我在考虑创建一个新的组件类型(类似doNotEditMe),属性“editab...

artf

https://github.com/artf/grapesjs/discussions/3711#discussioncomment-1234837

ClaudeCode

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

#37032021年8月13日作者 anatoli-dp2 个回答
0 个反应

自定义ID在CSS中注入\3,\3后面有空格,\3后面有空格

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

anatoli-dp

请注意,这个问题很糟糕......现在看到它,我觉得自己很傻......ID不能以数字开头,我做这个时没考虑到这一点

ClaudeCode

谢谢你举报,@anatoli-DP。 自定义ID在CSS中注入\3,\3后面有空格的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队...

#37022021年8月13日作者 throne19861 个回答
0 个反应

HTML头标签未添加到dom中

我正在使用 [grapesjs library][1] 来构建网页,我根据文档添加了一个自定义块 [这里][1],当我拖动块到 canvas 时,HTML 数据会被添加,但 '<head></head>' 标签是空的, 这是我的代码 function tempOnePlugin(editor) { 编辑。BlockManager.add('my-first-block', { 标签:'<i class=“fa fa-clone”></i>', 内容:'<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>Vmmerce模板</title> <me...

ClaudeCode

谢谢你举报,@throne1986。 关于*HTML头部标签未添加到dom的问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#36992021年8月12日作者 diegoSenra4 个回答
0 个反应

细胞悬停随机偏离实际细胞

嗨! 我在公司的一个项目中使用 grapesJs 进行电子邮件编辑,并配合 Newsletter 插件。 一切都运行得很好,除了我无法解决的这个bug: 有时候,当我在画布里拖动方块时,单元悬停会乱局。最大的问题是这种行为完全随机,会发生也可能不发生,但一旦发生会很烦人。 唯一的模式是:只在放块后且独家地在画布上进行拼接如果我调整画布大小以适应移动端/平板,画布会恢复正常(即使切回桌面视图——但放置新方块时可能会再次发生)位移仅发生在垂直方向(随机向上或向下——通常是向上——且可以是任意位移大小)单元格选项菜单(选择父单元、移动组件、擦除单元格等)也会被移位,方式相同。 编辑器插入在带有更多内容的页面(侧边栏和页眉)。我不得不修改...

artf

你用的是最新版本吗?

diegoSenra

使用压缩后的0.10.7

artf

抱歉兄弟,这是4年前的版本,帮不上忙。 你试着更新了吗?

#36942021年8月11日作者 codingmachine161 个回答
0 个反应

问题:动态变更在从数据库加载时消失

@artf 这是我的代码,我在 select change 时在 div 里添加 test init() { this.listenTo(this,“change:noOfLinks”,this.getInfoLinks); }, getInfoLinks() { let canvasDoc = 编辑器。Canvas.getDocument(); canvasDoc.getElementById(“infoLinks”).innerHTML = “test text ”; editor.trigger(“change:selectedComponent”); 编辑。TraitManager.getTraitsViewer().re...

ClaudeCode

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

#36792021年8月6日作者 imouou2 个回答
0 个反应

设备宽度默认无效

感谢#3673 我收到了一个新的bug反馈。 版本:。 0.17.22 你能重现演示中的bug吗?[ ] 是的[ ] 不 预期的行为是什么? 我希望默认宽度是移动设备的宽度,所以我设置了最小宽度优先级,但选择框默认显示的是移动宽度,页面宽度没有变化。我用的是editor.setDevice('Mobile');是的,但在新页面管理中,新页面也是一样的,我继续用这个方法是无效的,所以我觉得应该有更好的处理方式。 详细描述那个漏洞 目前的行为是什么? 详细描述那个漏洞 你能附上截图、截屏或实时演示吗?[ ] 是的(附上)[ ] 不 ![2021-08-06 10 29 54](https://user-images.githubuse...

artf

是的,你说得对,实际上没有选择默认设备的选项...... 目前作为变通方法,先在初始化后手动操作: “''js const editor = grapesjs.init({...}); editor.setDevice(“移动”); 在下一个版本中,我会在设备管理器配置中添加“默认”选项 “''js deviceManager: { 启动时选择的设备“id”如果未标示,将使用“设备”中最先可用的ID。 默认:“移动”, 设备:[...], }, ```

ClaudeCode

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

#36752021年8月5日作者 rywilson281 个回答
0 个反应

即使徽章下方有空位,也会遮挡元素内容

版本: 0.17.23 你能重现演示中的bug吗?[x] 是的[ ] 不 如果该元素放在画布顶部,徽章可能会遮挡该元素的内容。 ![图片](https://user-images.githubusercontent.com/45426659/128348057-e2550bac-4ded-448a-a64a-0ca1b374a8ec.png) 预期的行为是什么? 如果有空间,标签应放在元件下方。 ![图片](https://user-images.githubusercontent.com/45426659/128348466-f60822ea-8c6d-42f7-9668-2f3d89c1bc65.png) 你能附上截图、截屏或...

ClaudeCode

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

#36742021年8月5日作者 sriya-srinivasan4 个回答
1 个反应

隐形网络组件

版本: 0.17.19 目前的行为是什么? 新增的 webcomponent 是可见的: 在 grapesjs 容器内添加网页组件时,如果组件在 shadow DOM 中有元素,组件是空的。(如果不使用 shadow dom 创建组件,则没有问题。)在图层管理器中可以看到,但是空的 ![第1期](https://user-images.githubusercontent.com/78800503/128315538-ae05c799-9a0f-402d-a74c-b001fa2ad03c.PNG) 这里我们可以看到内部和外部元素的差异。阴影根不可见。 预期的行为是什么? grapesjs canvas 内的 webcomponen...

artf

我在这里发了一个变通方法 https://github.com/artf/grapesjs/issues/3693

artf

嘿,@sriya-srinivasan,你能做一个可复现的演示吗?

artf

@sriya-Srinivasan,有什么最新进展吗?

浏览所有主题