GrapesJS 问题

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

找到 466 个问题

🔍 components
#45032022年8月5日作者 gustavohleal4 个回答
0 个反应

CKEditor 在添加原始 HTML 组件时使用的缺少内联样式

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 v96 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞?在控制台标签页打开开发者工具运行下面的代码选择新增的文本用CKEditor编辑内容选择另一个组件 预期的行为是什么? 预计会从文本组件内的跨度添加内联样式,这样CKEdittor就能理解文本样式,并在打开时保留这些样式。 目前的行为是什么? 通过“editor.addComponent()”添加原始HTML确实会添加样式,但一旦你编辑文本并模糊,样式就会从它们应有的文本段中移除。这只发生在C...

shkhalid

+1

pety-dc

嘿 我也遇到过类似的问题。我认为情况相当严重,因为通讯和 mjml 演示版都受到了影响。(两者都使用 CKeditor 作为 RTE) 当我导入包含带有样式元素(span)的文本(mj-text)的内容时,导入的内容会被解析,样式元素被识别为独立组件,而不是作为换装文本元素的内容。 示例(根据 mjml.io 有效): 预期结果: ![图片](https://user-images.githubusercontent.com/25766885/230409523-b8b57...

raymondmakz

CKeditor 输出: '<div><span style=“color:blue”>ckeditor 中的部分富文本</span></div>” 解析到编辑器后,可以变成: '<div data-gjs-type=“text”>来自 <span 的一些富文本 style=“color:blue” data-gjs-type=“default”>ckeditor</span></div>' 基本上每个主导者都变成了组成部分。 也许可以让开发者选择是否停止添加子节点作为组件...

#44972022年8月3日作者 benryanwilliams4 个回答
3 个反应

从 v18.4 更新到 GrapesJS v19.5 会导致 Chrome 变得无响应

葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 104.0.5112.79可复制演示链接 https://jsfiddle.net/gvrnw2c3/4/描述一下那个虫子 如何复现这个漏洞? 我目前无法用 jsfiddle 重现这个 bug,这让我觉得可能是 Chrome 的问题,但我会继续尝试重现。 Within我的项目,如视频所示: 1)点击一个“条件文本”组件(我添加了的自定义组件类型) 2)点击“打开条件”按钮,然后在屏幕上出现的对话框中点击“应用” 3)将光标悬停在“条件文本”组件上 In JSFiddle(目前没有崩溃,但我会继续测试): 1)点击“Hello World”文...

tyuterry

小提琴(vue)的复刻版 没有Vue我无法复制 [小说](https://jsfiddle.net/6qp48xyn/) 重现问题的步骤:添加文本组件选择文本组件,然后点击底部的“转换为条件”按钮将鼠标悬停在条件文本组件上,然后它会冻结。 好像有什么东西总是在悬浮上一直触发 ![图片](https://user-images.githubusercontent.com/30591406/184062993-73d84ef7-0c07-4832-bd7b-9ac6d3851a...

artf

谢谢大家,我其实通过在Vue里打包这个示例还原了它,但我不太清楚为什么会被困在这个循环里。 乍一看,似乎与Vue的Proxy观察者有关。通过与之前的 Grapesjs 版本对比,似乎并非所有部分都被 Proxies 转换,这避免了卡住。 一个快速的变通方法是把“编辑器”放在Vue之外,防止所有对象都变成代理。 “''js 让编辑; Vue.createApp({ mounted() { editor = grapesjs.init({ ... }); // ... }, /...

benryanwilliams

谢谢@artf,现在在Vue实例外声明编辑器后,一切都完美运行了。

#44952022年8月3日作者 TechyMS1 个回答
0 个反应

按钮组件不工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 预期的行为是什么? 按钮组件不工作。行为准则 [X] 我同意遵守本项目的行为准则

ClaudeCode

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

#44812022年7月27日作者 skru2 个回答
0 个反应

V0.19.5 破坏无头编辑器.setComponents()(带有地图/视频块)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 102.0.5005.115(官方版本)(64位) 可复制演示链接 描述一下那个虫子 这是#4473的延伸 在无头环境中通过editor.setComponents()添加地图或视频块时,也会出现类似的“文档未定义错误”,源自./src/dom_components/model/ComponentImage.js,parseUri() 尝试使用文档对象。 我不得不迅速修复,因为这是产品发布的阻碍。我重构了 parseUri() 方法,使其看起来像这样(测试通过且无错误): parseUri(uri) { 令 uriParams = {...

artf

谢谢@skru我其实已经处理好了 parseUri [这里](https://github.com/artf/grapesjs/commit/f61222ec904ed56794f7b97e362ea2006dfceaf6),所以下次发布应该能用

ClaudeCode

谢谢你举报,@skru。 v0.19.5 导致 headless editor.setComponents()(带地图/视频块) 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复...

#44802022年7月26日作者 ValouZ2 个回答
0 个反应

块上的I帧不能被编辑

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox v102.0.1 可复制演示链接 这是工作代码,我不能...... 描述一下那个虫子 如何复现这个漏洞?拖放到页面块 视频你会发现你对我的iframe无能为力 预期的行为是什么? 我希望iframe的src可以编辑 目前的行为是什么? iframe没法用。 我在图层管理器上能看到Iframe,但如果我打开检查器,只有包含Iframe的部分。 这东西在两三周前还很糟糕,我去度假了,没人碰它,因为只有我一个人在修,现在它坏了。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js blockManager.add(“conte...

artf

感谢@ValouZ的报告,iframe视图上确实有个拼写错误。我会在下次发布时处理好。

ClaudeCode

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

#44742022年7月22日作者 bimsina3 个回答
2 个反应

无头模式运行需要窗口

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 103.0.5060.134可复制演示链接 https://stackblitz.com/edit/node-zrdtg4?file=index.js描述一下那个虫子 如何复现这个漏洞?在无头模式下初始化编辑器仅用一个基础文本节点加载项目数据 <details> <summary>点击展开查看样本数据。</summary> “JavaScript cont justTextData = { 资产:[], 风格:[], 页码:[ { 帧数:[ { 组件:{ 类型:“包装”, 可造型:[ “背景”, “背景色”, “背景图像”, “背景重复”,...

skru

参见#4473

artf

这里已修正 https://github.com/artf/grapesjs/commit/f61222ec904ed56794f7b97e362ea2006dfceaf6

ClaudeCode

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

#44732022年7月22日作者 skru2 个回答
0 个反应

V0.19.5 破坏无头编辑器 editor.setComponents(): “Uncaught(在承诺中)ReferenceError: 窗口未定义”

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 102.0.5005.115(官方版本)(64位) 可复制演示链接 描述一下那个虫子 如何复现这个漏洞? 我在JSFiddle上无法复现这一点,但这说法有点道理。 #4373 在 editor.setComponents(): 中引入了一个 bug: “未捕获(在promise中)引用错误:窗口未定义” 这是在将SVG转换为base64时。src/utils/mixins 快速修复: export const buildBase64UrlFromSvg = (svg: string) => { 如果 (svg && svg.substr...

artf

谢谢@skru我会处理的

ClaudeCode

谢谢你举报,@skru。 关于 v0.19.5 Breaks headless editor.setComponents(): “Uncaught (in promise) ReferenceError: window is not fined” 的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事...

#44662022年7月20日作者 capoia3 个回答
1 个反应

特质的变更不会更新 HTML

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/weellingtonc/t8hs9f67/2/ 描述一下那个虫子 如何复现这个漏洞?在工作区中添加“按钮立方体”组件点击已创建按钮进入设置组件,更改“texto do botao”属性的值打开查看生成HTML的选项 预期的行为是什么? 更新特性时,它还会生成一个新的 HTML 目前的行为是什么? 它保留了按钮的初始状态,保留了旧文本 注意:保存时也会发生这种情况,如果你在更改文本前后点击保存(软盘),你会注意到按钮的文本值没有变化!行为准则 [X] 我同意遵守本项目的行为准则

skru

首先,你的代码需要放进一个插件 [https://grapesjs.com/docs/modules/Components.html#define-custom-component-type](https://grapesjs.com/docs/modules/Components.html#define-custom-component-type) 而且你不是在更新组件的模型,只是在Canvas里更新html...... https://jsfiddle.net/jmwe...

artf

是的,没错,谢谢@skru 你也可以直接将“内容”与特征连接,读取初始值。 “''js 特征:[{ 标签:'Texto do botão',类型:'text',名称:'content',changeProp: true }], ```

ClaudeCode

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

#44552022年7月18日作者 mickeyDominic3 个回答
0 个反应

“面板设备”和“面板-切换器”冲突

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 103.0.5060.114 可复制演示链接 https://codepen.io/Dominic_M/pen/eYMgqyw 描述一下那个虫子 如何复现这个漏洞?关注GrapesJS“入门指南”>> https://grapesjs.com/docs/getting-started.html继续做教程直到“响应式模板(https://grapesjs.com/docs/getting-started.html#responsive-templates)”,你会发现添加移动端和桌面视图切换面板后,一个面板会取代另一个。 预期的行为...

artf

@mickeyDominic你把所有默认面板放在同一个物体下面 “''js 面板:{ 默认值:[{ id:“层次”, EL:“.panelright”, // ... 编号:“面板调车员”, EL:“.panelswitcher” }] }

mickeyDominic

谢谢你@artf。 真是太傻了:)

ClaudeCode

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

#44472022年7月13日作者 barryross3 个回答
0 个反应

样式管理器无法准确反映继承的颜色

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 103.0.5060.114 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?点击父容器,比如演示中第一个带有“.container-width”类的组件在排版中,选择如绿色等颜色点击一个明显继承了绿色的子元素在样式管理器中展开排版面板 预期的行为是什么? 我认为我们希望颜色选择器显示所选子元素继承/计算出来的绿色值 目前的行为是什么? 目前显示的是白色 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则 [X] 我同意遵守本项目的行为准则

artf

你好,Barry,是的,目前这是预期行为(也请查看这个[讨论](https://github.com/artf/grapesjs/discussions/4245)),但我希望有一天能为继承财产提供适当的支持。

barryross

好的,谢谢你告诉我 2022年7月18日星期一上午9:29,Artur Arseniev @.> 写道: 你好,Barry,是的,目前这是预期的行为(也请查看这个) 讨论<https://github.com/artf/grapesjs/discussions/4245>)但我 希望有一天能为继承财产提供适当的支持。 — 直接回复此邮件,请访问GitHub查看 <https://github.com/artf/grapesjs/issues/4447#issuecommen...

ClaudeCode

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

浏览所有主题