GrapesJS 问题

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

找到 466 个问题

🔍 components
#31752020年12月9日作者 mcottret2 个回答
0 个反应

选择和激活RTE在程序化移除组件时未被清除

版本: 0.16.30 你能重现演示中的bug吗? [x] 是的 [ ] 不 繁殖步骤:在演示画布中选择文本组件选择框和RTE出现打开控制台执行 'editor.setComponents('');'组件被移除,但选择框和RTE仍然存在(见附图) 预期的行为是什么? 当程序性移除带有活跃RTE的选中组件时,应清除该选中和激活RTE的组件。 目前的行为是什么? 组件选择和RTE在不存在组件上保持活跃。点击后元件选择会消失,但RTE不会,且会报错。 提议解决方案:当['ComponentTextView'的“onDisable”处理程序被移除时,执行该处理程序](https://github.com/artf/grapesjs/blo...

artf

感谢@mcottret报告。我自己处理过这个问题,应该会在下一个版本中修复,但一如既往,感谢你愿意帮忙:)

ClaudeCode

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

#31742020年12月9日作者 ThetripGr2 个回答
1 个反应

创建新的组件类型不会继承其父类型的函数

你好,我正在尝试通过创建以下插件来创建一个所有组件共享的新共同特性 在另一个插件文件中,我也按照文档的做法创建了一个新的组件类型,叫做“extendedText”,它以“文本”类型为基础。而文本类型则有如下所示的“handleBgColorChange()” ![图片](https://user-images.githubusercontent.com/65759874/101602916-837b2580-3a07-11eb-9c9e-dd6d2db1a9af.png) 从文本分支的新类型则不支持 ![图片](https://user-images.githubusercontent.com/65759874/101603067...

ThetripGr

算了,我仔细看了文档,之前没注意到关于扩展父功能的内容

ClaudeCode

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

#31722020年12月8日作者 theSC0RP2 个回答
0 个反应

如何在家谱中追踪组件的更新情况?

嗨,@artf。我有一些关于组件生命周期钩子的问题。在我的应用程序中,我想跟踪组件所有子节点及其子节点的更新情况,依此类推。我该怎么做?直接子节点的更新通过“model.updated()”钩子追踪,但我需要跟踪一个组件(我们称之为super child)的更新,该组件是另一个组件的嵌套子节点(我们称之为super parent)。在超级父节点和超级子节点之间,可以有任意数量的组成部分。我该如何跟踪这些更新? 比如,如果我在super child中添加了一个组件,我想在super parent里做一些事情。 而且,我无法在全球范围内追踪这些变化。我想在组件层面做。 <hr/> 为了给我的问题提供更多背景,我现在想做的是:<br/>...

artf

我会在父节点上创建一个专门的监听器 “''js 父分量 ... init() { this.on('cell-changed', this.doStuff) }

ClaudeCode

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

#31712020年12月7日作者 skbhagat404 个回答
0 个反应

添加/更新 href 特征不会在图像中添加“<a></a>'' 封装器。

预期行为——当我更新'href'特性值时,图片应该被包裹在'a'中,'href'值设置为。即 '<A href=“google.com”><img src=“/></a>' 当前行为 = 无变化反映 这里有添加特质的代码 上述功能需双击触发, 请帮我,如何在不使用特征管理器的情况下,从代码动态地将 href 添加到图片中。 ```

skbhagat40

即使我做了 'selectedElement.getTrait('href').set({value: 'fb.com', target: '_blank'})

skbhagat40

我觉得组件视图没有被更新,如果我重复操作,它会渲染带有之前值的“标签”。

skbhagat40

如果我在属性中更新 href,它就能工作

#31702020年12月7日作者 ThetripGr3 个回答
0 个反应

从性状中添加类名

你好,我想实现的是通过分配一个名为“对齐”的额外特征来扩展文本组件,并通过该特征决定我想做的对齐类型,之后不应用 css,但应为组件赋予相应的类名。有没有什么例子能让我自己找到类似的东西 :/ ?

ThetripGr

我又试了几次终于让它工作起来了,我会试着解释一下我是怎么让它工作的。当你定义性状时 “''js 默认值:{ 特质:[{类型:“选择”, 选项:[{ { 值:'myCustomClass',名称:'选项A' }, }], 标签:“traitLabel”, 名称:“traitName”, 变革提案:1 }] }, 抱歉格式有点,我还不会粘贴格式化代码:P

artf

抱歉格式有点乱,但我还不会粘贴格式化的代码:P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown

ClaudeCode

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

#31662020年12月1日作者 nanaya14 个回答
0 个反应

复制粘贴节点的问题

*版本:0.16.27 你能重现演示中的bug吗? [ ]是的 [ ] 不 预期的行为是什么? 在右侧面板和画布中,粘贴的节点应该在复制的节点之后。 目前的行为是什么? 我复制一个节点。在views-container(右面板)中,粘贴的节点位于复制节点之后。但在画布中,粘贴的节点位于复制节点之前。如下所示: ![图片](https://user-images.githubusercontent.com/22161888/100718588-7c945780-33f6-11eb-9f8d-ef17fc192031.png) 详细描述那个漏洞 当 html 标签之间存在空格或回车时,就会出现这个错误。 因为在'grapesjs/sr...

artf

我试过本地设置,但节点位置是正确的。你能制作一个现场演示吗?

nanaya1

抱歉,我没有详细说明发生这个错误的具体情况。 Grapesjs自带的组件不会出现这个错误,因为它们没有空格、回车或制表符。 我在定制组件时遇到了这个问题。 我自己定制了很多组件,有些会遇到这种情况。 发现该问题的自定义组件节点初始化示例如下。 如果你想在 grapesjs 默认组件中重现这个问题,可以通过 f12 元素的“Editor as HTML”输入节点间空格。具体如下。 ![live_demo](https://user-images.githubuserconte...

nanaya1

@artf我不小心关闭了问题。

#31612020年11月27日作者 ssmanoj-grapes4 个回答
0 个反应

Editor Undo 正在移除集合,无法替换组件

在撤销前所选组件的集合 ![元素收集-前-u](https://user-images.githubusercontent.com/75111879/100419275-467b6e80-30aa-11eb-8df4-10e210d41689.png) 撤销后所选组件的集合 ![元素收集后](https://user-images.githubusercontent.com/75111879/100419319-55622100-30aa-11eb-8272-baebedf9313e.png) 代码用新组件替换该组件 ![代码](https://user-images.githubusercontent.com/75111879/...

artf

抱歉,没有可复现的演示,这个问题对我来说说不通

ssmanoj-grapes

你好,artf, 请查看本期[grapejs-issue.zip](https://github.com/artf/grapesjs/files/5630421/grapejs-issue.zip)的演示视频。

artf

好吧,既然你无法制作一个可复现的演示,我得关闭这个......

#31602020年11月27日作者 congweibai2 个回答
0 个反应

在Vue的自定义设置面板中添加切换移动标签

版本:^0.16.18 这个问题旨在将图层移动函数提取到自定义层。 我只想在组件中看到,子组件可以在面板中重新排序。 假设这些组件处于同一层级。我的代码会是这样的: ![重新订购](https://user-images.githubusercontent.com/53634020/100399696-a91d3c00-30a3-11eb-8c48-107480ec4746.png) 我见过层次重排是可以发生的。有没有哪里能获得这些功能? 提前感谢任何反馈或见解

artf

不,这种情况下,你得自己处理分类

ClaudeCode

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

#31552020年11月24日作者 Abhisheknanda13444633 个回答
0 个反应

添加动画

你好@artf我想在所有方块上加入动画 这里有一段代码,但不行,你能帮帮我吗? 谢谢

artf

你忘了动画特性上的“changeProp: 1”

Abhisheknanda1344463

@artf 不说动画名称,它不起作用。 我需要添加 CSS 规则吗? 有什么建议吗?拜托?

ClaudeCode

谢谢你举报,@Abhisheknanda1344463。 感谢你分享关于添加动画的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。G...

#31532020年11月23日作者 excitedbox2 个回答
0 个反应

FEAT:添加动态数据块

我自己也在考虑做这个,因为这个问题被要求很多次了,我想问问这个项目是否已经在进行中,如果没有,也许大家愿意给点建议。 我想象的它的运作方式有点像一个带有容器块的表单,定义数据源、获取密钥的方法(post/get),以及它是一次性数据项还是循环项,比如列表或一组卡片。然后你会插入一个动态模板块,里面有数据项的占位符,定义了列。对于列表,它代表一行,对于一组卡牌,则是一个卡块,内容被列ID替换。 这还可以用于设置表单的默认值,将表单响应处理到数据库中,并开启许多其他内容可能性。 我的问题是我是否应该使用模板引擎来简化操作,但那需要额外的依赖。是否可以在从主侧边栏拉取组件时创建一个子画布来创建模板?我应该把数据库脚本分开,而不是用存储管...

artf

这些事情可以通过插件来实现,但我无法回答你的问题,完全离题了,找到正确答案取决于你的知识(可以试着在StackOverflow上问问)。

ClaudeCode

谢谢你举报,@excitedbox。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在: 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本,可能已经解决了这个问题 如有稳定版,升级前先测试最新稳定版 如果漏洞非常严重,可以使用“npm audit fix --force”,但请务必彻底测试 理解风险: 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触...

浏览所有主题