GrapesJS 问题

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

找到 466 个问题

🔍 components
#42732022年4月20日作者 boomshakar4 个回答
1 个反应

如何在页面加载时触发“导入模板(模态)”

你好, 请问,我需要关于如何在页面初始化时导入模板模态的逻辑...... 我用的是新闻通讯预设插件 我想实现的是什么?:让用户在页面加载后上传代码。 以下是我尝试过的逻辑, editor.on('load',(model, argument)=> { 开放模数AL const modal = 编辑。模态; const cmdd = 编辑。指挥; 使用组件名称的过滤器 if (model.getName() === '导入模板') { //不工作 表演模态 modal.open(); } 编辑.on('modal:', (a, b, c) => { //不工作 console.log({ a }); console.log({ b...

boomshakar

@boomshakar请不要把讨论变成问题 记下了。谢谢

boomshakar

你好,@artf, 我通过触发按钮上的点击()键来实现我想要的功能, const modal = 编辑。模态; const query = new URLSearchParams(location.search); const uploadQuery = query.get('key'); 如果(uploadQuery === 'upload-code') { const importClick = document.querySelector('.gjs-pn-btn.f...

artf

@boomshakar请不要把讨论变成问题

#42572022年4月13日作者 DavidHarvey4 个回答
3 个反应

背景修改对非图像无效

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v100 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?点击任意组件,在样式管理器中滚动到装饰>背景尝试制作一个带有基本颜色或渐变的背景 预期的行为是什么? 我应该能设置背景,除了图片之外,还能设置颜色或渐变。 目前的行为是什么? 我只能选择一张图片作为背景。 ![图片](https://user-images.githubusercontent.com/3315834/163210124-fe42c4ee-c436-4654-826c-0c82f017a5fe.png...

bit-ocean

你好@artf 这个功能有可能引起一些关注吗?我觉得这是基本的。自从 0.17.29(Grapesjs-style-BG 插件支持的最后一个版本)以来,grapesjs 增加了许多很棒的功能,我很想使用新版本的 grapesjs。它出色的功能能轻松处理图像的渐变、颜色和透明度图层,这对我来说至关重要,也让我不至于升级。非常感谢你的考虑。

Vac1911

你可以用背景色输入来映射图像颜色,但界面看起来很混乱,应该做些修改。 ![图片](https://user-images.githubusercontent.com/45333542/163394189-d3a12494-5194-40f7-a2f6-5c23d7702e70.png)

artf

是的,我禁用了之前带有颜色/渐变的插件,因为它不兼容最新版本,但我很快会改进。目前我先关闭这个问题,因为它与核心本身无关。

#42562022年4月13日作者 m-jojo-s2 个回答
1 个反应

触摸拖放不起作用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 98.0.4758.80(官方构建)(arm64) 可复制演示链接 https://jsfiddle.net/bd2kpjwf/ 描述一下那个虫子 如何复现这个漏洞?添加两个分量打开浏览器开发工具并启用设备模式(CMD+SHIFT+M)拖拽组件 预期的行为是什么? 组件会被移动 目前的行为是什么? 什么都没发生。阻力没有被记录 包含 gjs-touch 插件也没用。任何线索都将不胜感激。 行为准则 [X] 我同意遵守本项目的行为准则

artf

触摸插件多边填充只有在你已经启用触摸设备时才会工作(试用[演示](https://grapesjs.com/demo.html)),所以如果你之后启用触摸设备,它就无法使用。

ClaudeCode

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

#42552022年4月13日作者 am1rb2 个回答
0 个反应

如果你在程序上将可拖拽道具设置为false,初始工具栏的移动按钮不会被移除

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v98.0.4758.80可复制演示链接 https://jsfiddle.net/am1rb/3uzkn5t7/8/描述一下那个虫子 如何复现这个漏洞?在画布上渲染一个简单的组件将组件的程序性设置为可拖曳=false在编辑器中选择组件移动按钮存在于提示中,但无法使用 预期的行为是什么? 组件工具栏应该重新渲染,如果可拖拽道具设置为false,移动按钮应该被移除。可复制和可拆卸道具也有同样的问题。 目前的行为是什么? 移动按钮存在但无法使用,控制台上会出现以下错误: ![图片](https://user-images.githubuserc...

artf

是的,工具栏其实不是动态的,所以如果你需要重新计算,必须手动强制 “''js model.set({ draggable: false, toolbar: null }) model.initToolbar(); ```

ClaudeCode

谢谢你举报,@am1rb。 关于如果你在程序上将可拖拽道具设置为false,初始工具栏的移动按钮不会被移除,这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console...

#42482022年4月7日作者 protozoo2 个回答
0 个反应

在 vscode 扩展 webview 中,块拖放交互失败

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? VSCode(VSCode 扩展中的 WebView) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?创建一个新的 vscode 扩展(或使用你已有的扩展)创建一个包含 HTML 文档的 Webview,加载 GrapesJS 演示的 iframe(见下方示例代码)运行扩展和 webview 以加载 GrapesJS 演示尝试在画布上拖拽葡萄块 预期的行为是什么? 拖曳的方块应加入画布 目前的行为是什么? 拖拽的组件不会被添加到画布中。 你可以在这里观看一个展示问题的视频:https...

artf

你好@protozoo我不太清楚具体原因,但看起来 vscode iframe(可能是沙箱的)阻碍了原生的 HTML5 拖放功能(这是块上用的操作)。 由于这与核心内容不完全相关,我就把这个问题移到讨论区。

ClaudeCode

谢谢你举报,@protozoo。 关于在VScode扩展网页视图中阻挡拖放交互失败的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('som...

#42472022年4月7日作者 gustavohleal2 个回答
0 个反应

组件在克隆、移动或添加时消失或未被渲染

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 v96 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞?添加一个单列组件选择列点击工具栏上的复制按钮重复步骤2和3,组件为两列、三列和导航栏链接,嵌入导航栏组件。移动组件或重复步骤3,第一个克隆体会出现 预期的行为是什么? 点击复制按钮时,克隆必须出现在原件的侧面。 目前的行为是什么? 克隆体不会在画布内渲染,而是出现在导出的代码中。 在从这些组件的渲染函数调试时,似乎组件渲染了几步后就消失在grapes.js的函数中。下面的视频展示了一个包含 de navbar 和 n...

artf

抱歉,demo-mjml 是一个插件,与核心无直接关联。因为我没看到组件的默认渲染器存在问题,可能和mjml渲染器有关,我也没有理由让这个问题继续存在。 尽管如此,如果有人能找到问题并且与核心有关,我愿意修复。

ClaudeCode

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

#42392022年4月5日作者 codingaddicted1 个回答
0 个反应

在组件优先模式下,同步只有在UI反馈时才第一次生效

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v100 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?创建文本块在块(文本颜色)中应用样式创建类并同步其值再次编辑颜色至另一个值再次同步 预期的行为是什么? 因为在第3点之后,即使在第5点之后,清晰样式的con颜色字段应该消失,标签状态会切换到“警告” 目前的行为是什么? 第5点以后,职业的数值已正确同步,但清场风格依然有效。此外,按下它会导致一系列无效状态:清晰样式主动 - 同步隐形clear风格pressed清晰样式不可见- 同步可见sync pressed清除样...

ClaudeCode

谢谢你举报,@codingaddicted。 关于在组件优先模式下,同步只在UI反馈下第一次有效,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => consol...

#42362022年4月4日作者 m-jojo-s1 个回答
0 个反应

粘贴命令不尊重可拖拽/可放置的属性

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 98.0.4758.80(官方构建)(arm64) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?添加“标签”块从新增组件复制标签页将标签贴到组件外的任何位置 预期的行为是什么? 复制的标签页不应该被粘贴到“标签页”组件之外。 复制的组件不应粘贴在无法拖拽或拖拽的地方。 目前的行为是什么? 复制的标签可以粘贴到任何地方。 复制组件的可拖拽/可丢弃属性在粘贴时不被尊重。 应该会在src/commands/view/PasteComponent.js中修复 行为准则...

ClaudeCode

谢谢你报告,@m-jojo-s。 关于粘贴命令不尊重可拖拽/可丢弃属性的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'));...

#42252022年3月30日作者 Sudhin354 个回答
0 个反应

BUG:Facebook 插件在 Grapes JS 中无法使用

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v9可复制演示链接 不是在那里描述一下那个虫子 如何复现这个漏洞?在 React 应用中安装 Grapes js 并运行制作 Facebook 插件组件并导入 Grapes js(从 https://developers.facebook.com/docs/plugins/page-plugin/ 获取 Facebook 页面列表代码)运行应用程序在编辑器中拖放 Facebook 组件 预期的行为是什么? 去掉 Facebook 组件后,编辑器里应该会显示 Facebook 页面 目前的行为是什么? 去掉Facebook组件后,它就不再显示...

Sudhin35

@artf 请帮帮我

artf

我运行 'editor.setComponents(...FB HTML..)` ![Schermata 2022-03-30 alle 16 30 46](https://user-images.githubusercontent.com/11614725/160859671-e8b1bbb7-a1ee-466c-a306-58ffe02944ed.png) 请提供一个可复现的演示。

Sudhin35

@artf 谢谢你的回复 但你已经添加了editor.setComponents(...FB HTML..)默认操作,然后加载编辑器 请创建一个 Facebook HTML 组件,然后在编辑器中拖放该组件,否则加载不了 我就是这样尝试过的

#41962022年3月15日作者 shelendravashishtha24 个回答
0 个反应

在尝试用json在画布上设置组件时,ID会被更改

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 无关联 描述一下那个虫子 如何复现这个漏洞?...使用一个可以在画布上生成组件的演示 json,在属性中设置ID。...use editor.setComponents(json)...设置样式 使用 editor.setStyle() 函数,针对同一 id 元素 预期的行为是什么? ...在画布上渲染时不应该更改ID。 目前的行为是什么? ...ID正在被更改,因此样式无法实现 行为准则 [X] 我同意遵守本项目的行为准则

artf

你好@shelendravashishtha2请你具体说明步骤吗?(我需要知道你说的“json”是什么)

JonathanRiche

我见过如果你在使用 editor.setComponents() 方法之前不保存 CSS 的引用,就会出现这种情况 使用editor.setComponents()方法时,元素id选择器/引用中的所有CSS标记都会被移除 我遇到的具体步骤是把编辑器组件的引用保存成 JSON 格式 'let jsonElements = editor.getComponents().toJSON(); editor.setComponents(jsonElements) ` 使用setCom...

JonathanRiche

我想我是在用 editor.getComponents().toJSON() 找到问题的; 它会在一些组件中添加一个空的“style”:“字段,清理CSS 即 “组件”: [ { “类型”:“框” “风格”:“, “属性”:{ “id”:“ic7c” } }, { “类型”:“框” “风格”:“, “属性”:{ “id”:“if5j” } } ]

浏览所有主题