GrapesJS 问题

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

找到 743 个问题

🔍 bug
#31352020年11月11日作者 archerbj4 个回答
3 个反应

如何轻松覆盖现有组件?

例如,我想在默认视频组件上添加双击事件处理程序来打开资产管理器。 我的基本想法是获取视频组件的视图定义,并添加“事件”+处理器。 最后,把它调回视频部分。 不幸的是,这一想法在第一步就失败了。'v.View()' 会给我一个错误 我刚接触这个项目,对Backbone.js几乎一无所知。 你能给我一些建议吗?

Joshmamroud

@archerbj这里有你想要的演示:https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js 你应该把功能绑定在“组件类型”本身,而不是试图找到该组件的所有实例并在某个更改时添加。为此,创建一个新的“组件类型”,扩展“视频”类型,然后在视图中添加“dblclick”事件处理程序。一旦有了这个,你就可以创建一个使用新组件类型的块。 这里有一些关于[如何扩展组件类型](https://grapesjs.com/doc...

archerbj

@archerbj这里有你想要的演示:https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js你希望把功能绑定到“组件类型”本身,而不是试图找到该组件的所有实例并在更改时添加。为此,创建一个新的“组件类型”,扩展“视频”类型,然后在视图中添加“dblclick”事件处理程序。一旦有了这个,你就可以创建一个使用新组件类型的块。这里有一些关于[如何扩展组件类型](https://grapesjs.com/docs/mo...

abulka

@Joshmamroud 谢谢你举这个例子。我能找到的唯一一个使用文档中提到的“扩展”功能的例子是你的。 你的例子非常简单且禅意——但它只是展示了给视频组件添加“dblclick”处理程序,并没有显示添加额外的组件属性或属性和特征。你能解释一下或者举个例子吗?因为我很难理解如何使用“extend”——正如我在#3060中提到的那样。

#31342020年11月11日作者 josfh20054 个回答
0 个反应

当我尝试拖动最后几个部分的元素时,画布滚动到页面顶部

版本: 0.16.27 你能重现演示中的bug吗? [X] 是的 [ ] 不 预期的行为是什么? 当我尝试拖动组件时,画布不应该滚动到页面顶部。 详细描述那个漏洞** 每当我尝试拖动页面最后部分的组件时,画布就会滚动到顶部。有时候第一次就会出现,但有时候总是这样,可能和元件类型有关。

artf

你好,José,你能提供你问题的截屏吗?我试过拖动模板的最后一部分,但对我来说一切正常

josfh2005

你好@artf, 你可以在这里看看,https://recordit.co/vn1ZVN6J1N 不是在各个部分,任何元素都会这样,但只有第一次尝试拖动时才会。

artf

啊,明白了,只是第一次,我现在也👍拿到了

#31312020年11月11日作者 Joshmamroud4 个回答
0 个反应

将纯文本粘贴到文本组件中,会为粘贴的文本添加 <font /> 封装器

版本: 0.16.27 你能重现演示中的bug吗? [] 是的 [X] 不 预期的行为是什么? 将粘贴文本为纯文本(文本节点),不像Grapes JS在</>元素中进行打包。 目前的行为是什么? 当我把纯文本粘贴到空文本元素时,编辑器会用<font />元素包裹它。 在粘贴文本之前 ![Screenshot1](https://user-images.githubusercontent.com/5224187/98757808-4d606c80-239b-11eb-8194-3b854dd8ac97.png) 在文本粘贴(以纯文本形式)之后 ![Screenshot2](https://user-images.githubuser...

Joshmamroud

@artf你知道这是在组件、RTE还是其他地方发生的吗?你能指点我正确的方向吗?如果有人能帮忙,我将非常感激。谢谢!

artf

我没法复现,但我看到你用的是自定义的“dm-text”组件,这可能是原因?!

Joshmamroud

@artf 我不这么认为。以下是 dm-text 组件类型的配置 “JavaScript” { 扩展:“文本”, 型号:{ 默认值:{ 名称:“文本”, 特征:[], 可编辑:正确, 可掉落:错误, textable:确实如此, 风格:{ 填充:“10像素”, 宽度:“100%”, 高度:“自动” }, 可造型:[ “背景色”, “页分内”, “颜色”, “文本对齐” “font-size”, “字体家族”, “字体粗细”, “线高”, “边框宽度”, “边框颜色”, “边...

#31292020年11月10日作者 lebonsavane2 个回答
0 个反应

错误:需要Babel “^7.0.0-0”,但加载时为“6.26.3”

我尝试安装新版本,但在package.json里什么都没动。它用一个叫“blocks avancées”的插件,但每次运行代码时,每个文件夹都会有这个问题 " 错误....../src/dom_components/view/ComponentFusionView.js 模块构建失败:错误:需要 Babel “^7.0.0-0”,但加载时已加载“6.26.3”。如果你确定自己有兼容的@babel/核心版本,很可能是构建过程中加载了错误版本 "

artf

ComponentFusionView?那肯定不是来自主葡萄核心,我们没有那个成分......很可能你用的是某种修改过的版本,这可能是导致错误的原因

ClaudeCode

谢谢你举报,@lebonsavane。 错误 Error:需要 Babel “^7.0.0-0”,但加载时为“6.26.3”。如果你确定自己有兼容的@babel/核心版本,很可能是构建过程中加载了错误版本 发生在组件在组件生命周期完全初始化前尝试访问属性时。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript if (component && typeof component.method === 'func...

#31262020年11月9日作者 mohd74694 个回答
0 个反应

视频投掷错误

点击上传按钮时侧面预览正常,但点击那个视频预览时会报错,其他图片都无法正常工作,我需要在Canvas中显示视频,比如显示类似主体的图片 ![动图](https://user-images.githubusercontent.com/12613564/98598005-a24ca600-22fb-11eb-867e-95dc66a6f5a5.gif) 这就是我正在做的 ![图片](https://user-images.githubusercontent.com/12613564/98591110-96f47d00-22f1-11eb-9520-8c201f0b27d8.png) ![图片](https://user-images....

mohd7469

@artf你能告诉我,我该如何上传和预览视频文件,而不是图片?

ZeroCoolHacker

@awais786327我上传不同资源时也很吃力。也许这能帮到你。 https://grapesjs.com/docs/modules/Assets.html#uploading-assets

ZeroCoolHacker

@awais786327我看过那个网站,似乎你需要在视频标签里加上'autoplay=“true”才能播放

#31252020年11月9日作者 fq-selbach3 个回答
0 个反应

线性渐变CSS对背景图像有奇怪的处理

版本:0.16.27 你能重现演示中的bug吗? [x] 是的 [ ] 不 预期的行为是什么? 通过样式管理器添加“background-image”时,显示为“background-image: url(...);`. 目前的行为是什么? 你会看到的不是“background-image:url(https://grapesjs.com/docs/logo.png);”,而是“background-image:linear-gradient(https://grapesjs.com/docs/logo.png);”。 详细描述那个漏洞 当一个元素具有给定的类别为“背景:线性梯度(...)'或'背景图像:线性渐变(...);你试图...

johnkeel-thork

我正准备报告同样的问题。 新增背景图片: <img width=“847” alt=“截图 2021-12-23 12 06 51” src=“https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png”> 它正在转换为线条渐变,而不是网址: <img width=“621” alt=“截图 2021-12-23 12 07 36”...

artf

关闭 [jsfiddle](https://jsfiddle.net/cqr7Luaj/),问题似乎解决了

ClaudeCode

谢谢你举报,@fq-selbach。 *线性梯度CSS对背景图像产生奇怪影响的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:** 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更...

#31212020年11月9日作者 sadtaco1 个回答
0 个反应

专长/议题:CSS标准

我会说这既是功能请求,也算是个问题。 我觉得一个2015年以后几乎所有项目都用px的项目看起来很糟糕。 人们使用的屏幕尺寸在最窄的范围内只有768像素,无论是移动端还是桌面端,甚至2160p及更大。 “像素”测量对此不利。 这样的工具是为非技术人员设计的,他们不会理解屏幕上像素测量看起来正常的东西,但并非所有屏幕上都正确。 最像GrapeJS的就是 carrd.co 对吧?在那里,他们实际上只是用一些随意的“尺寸”测量,然后内部转换,这样最终用户就无法做出愚蠢的操作。 我的建议: 去除控件界面中的px,以及GrapeJS本身样式中的CSS。新默认用vmax、rem和/或%替换。 是的,通常有百分比和/或EM和REM的下拉菜单,但p...

ClaudeCode

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

#30812020年10月19日作者 maryia-kabash3 个回答
3 个反应

BUG:样式管理器 setTarget 无法正常工作

版本: 0.16.22 期望的行为是什么? setTarget 允许将 CSS 规则样式与所选组件不同 描述这个bug 调用 setTarget 方法时,样式管理器仍然会选中一个组件作为样式目标 当前行为是什么? setTarget 不会更新 this.propTarget.model(而是更新 this.propTarget.targets)。请对比文件“style_manager\view\SectorsView.js”: 版本 0.14.62 https://prnt.sc/v28tc2 版本 0.16.22 https://prnt.sc/v28ttv

artf

谢谢@maryia-kabash找到了问题,下次版本会修复!

maryia-kabash

你好,@artf! 我有个关于这个修复的问题——setTarget现在能正确更新类部分的类,但样式管理器并不能反映实际样式。请参见——https://prnt.sc/vfzuvv 也许这些事件可以触发,用来更新样式管理器中的数值?

artf

感谢你的报告和建议,Maryia。修复将在下一个版本中发布(我希望明天发布)

#30692020年10月9日作者 orosl3 个回答
0 个反应

BUG:退出编辑后链接上的样式消失或嵌套文本元素

你好, 我正在编辑带有版本 0.16.3 + newsleter-plugin 的遗留 HTML。样式存储在内联(因为该工具用于邮件编辑),我使用“componentFirst: true”这个功能。 我在编辑包含其他文本元素的组件文本时遇到了一个问题。 一旦我编辑父div中的文本,嵌套元素的样式在模糊处消失。内联样式存储在 ID 上,子节点的 id 完全移除。 我该如何阻止这种情况发生? 该行为在JSFiddle中展示了:https://jsfiddle.net/jsh8yv4p/ 我读过可以将父 div 中的文本包含在 span 或其他文本元素中,但由于编辑器加载的 HTML 是遗留的,我不想以这种方式更改其结构。 有没有办法...

artf

你好,@orosl,感谢你的报告。我找到并修复了这个bug,所以它将在下一个版本中发布。

orosl

你好@artf,非常感谢你的及时回复和发布。我升级到了最新版本0.16.27。不过我仍然遇到这个问题,只是行为稍微不同。 我不确定是否应该开一个新问题,因为问题已经部分解决了,但无论如何,我会在这里解释一下这个行为。 给出与上述类似配置并在演示中展示的方案:https://jsfiddle.net/x5srzpvk/5 如果我在嵌套的 span 元素中更改链接(或其他类似元素)的样式,编辑后样式丢失,因为 id 被更改(样式保留在 id 上)。 因此,id: jp365 变...

artf

谢谢@orosl其实修复方法是内部组件有效,但嵌套组件不行。我会在下一个版本里修正

#29182020年7月25日作者 neon123453 个回答
0 个反应

BUG:textnode 未从 Canvas 中移除

直接导入到包装器的文本不会随组件从画布中移除。 为了验证,可以多次导入简单的文本到演示中,观察它们如何组合,而不是替换之前的文本。 补充这些似乎有帮助: 编辑。DomComponents.addType('textnode', { 型号:{ removed() { var el = this.getEl(); el.parentNode.removeChild(el); } } }); 用demo v0.16.18测试过。

artf

我不太理解你的例子,能具体说明繁殖步骤吗?

neon12345

去 https://grapesjs.com/demo-newsletter-editor.html 的新闻通讯演示版,使用“导入模板”功能,包含像“hello”这样简单的文字但不包含 html(或者在根级和 html 和文本结合)。重复这个过程,根节点上的文本不会被删除,而是每次导入时都会累积。

artf

谢谢@neon12345,我找到了问题,应该会在下一个版本中修复

浏览所有主题