GrapesJS 问题

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

找到 1,399 个问题

🔍 outdated
#6392017年12月14日作者 z1lk3 个回答
6 个反应

当标签名称更改时,在Canvas上重新渲染组件

我正在尝试构建一个基础的Header组件,允许你用一个特质选择H1到H6。但当选择某个选项时,画布不会更新。在代码视图中可以看到这个变化,如果我用拖曳工具移动画布中的元素,标签也会随之改变。我一直在阅读API文档和源代码,但我无法让组件自动重新渲染。我怀疑Grapes并没有监听组件标签名称的变化。在这种情况下,强制重渲染的合适方法是什么? “''js var comps = 编辑器。主导组件; VAR 块 = 编辑器。BlockManager; var textType = comps.getType('text'); var textModel = textType.model; var textView = textType....

artf

@z1lk我已经在下一个版本加了这个功能 “''js 模型 在 init 内部 this.listenTo(this, 'change:tagName', this.tagUpdated); // ... tagUpdated() { const coll = this.collection; cont at = coll.indexOf(this); coll.remove(this); coll.add(this, { at }); }, ```

z1lk

我不确定为什么“el”会是字符串,但请看关闭该问题的提交:https://github.com/artf/grapesjs/commit/e450cb98855d16ad819f1214350825a50e45e910 如果你用的是最新的 Grapes 版本,组件会监听 'tagName' 的更改,并自己做节点替换。所以你应该可以移除你的“init”和“tagUpdated”函数。该特征会更新“tagName”,组件负责其余部分。 编辑: 我还想到:有时传递给 'isCom...

artf

是的,这是因为你不能更改现有DOM元素的标签名。可能的解决办法是在更改“tagName”时,移除并替换该节点(保持在同一位置)

#6382017年12月14日作者 frank-tenzing2 个回答
0 个反应

项目中使用多个插件

你好, 我正在使用预设的新闻信仓库来调查Grapes.Js,我怎样才能在项目中创建多个并使用多个插件?干杯

artf

@frank-tenzing只是通过“插件”传递它们 “''js Grapesjs.init({ ... 插件: ['plugin1', 'plugin2', ...], 选项 pluginsOpts: { 'plugin1': {...}, 'plugin2': {...}, ... } }); ```

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#6372017年12月14日作者 frank-tenzing3 个回答
1 个反应

添加新块,无需硬编码

你好@artf, 我们将把这个葡萄编辑嵌入我们的门户,作为电子邮件编辑。 由于邮件将通过批量流程发送给客户,将实现合并标签,以将模板中的变量替换为客户的实际值,如姓名、年龄、地址。目前,合并标签已硬编码在代码中,方法则在 https://github.com/artf/grapesjs/issues/481 中。 由于编辑器的最终用户是非技术人员,随着业务的发展,会创建更多带有新变量(合并标签)的模板,我们需要让合并标签可以从面板上的按钮添加,然后将添加的标签保存到配置文件或数据库中。 有没有什么方法可以实现这种要求? 还有一个问题,能否从JSON/配置文件加载这些模块?非常感谢!

hoainam12k

嗨,@frank-Tenzing, 我觉得你应该在服务器端做,而不是用葡萄编辑器。例如,创建一个合并标签管理表单,并用 [API-Rich-Text-Editor](https://github.com/artf/grapesjs/wiki/API-Rich-Text-Editor)发送给 Grapes。这样你就可以让某些合并标签只针对某些模板使用。

artf

我们需要让合并标签可以从面板上的按钮添加,然后把添加的标签保存到配置文件或数据库中 嗯,这得看你自己怎么做。用户通过你的“新合并标签”面板创建标签,并在服务器上更新内容,然后,正如@hoainam12k已经提到的,你只需用RTE API来更新GrapesJS

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#6352017年12月13日作者 HarshOB3 个回答
0 个反应

有没有办法明确重新加载葡萄编辑器?

我想重新加载Grapes编辑器以获得具体的更改,有没有什么方法可以重新加载Grapes编辑器?

artf

具体变化 什么样的变化?

HarshOB

比如我会把代码直接传递给葡萄。我点击 Grapes Editor 头部的“查看代码”按钮时,拿到了 HTML 和 CSS。但编辑们没有看到它。一旦刷新页面或重新打开同一页面,编辑器里也会看到结构。

artf

@HarshOB我没完全明白你说的“我会明确把代码传递给葡萄”是什么意思,但如果你正确使用[Editor API](https://github.com/artf/grapesjs/wiki/API-Editor),你应该会看到画布更新,比如。 “''js editor.setComponents('<div class=“cls”>New component</div><style>...</style>'); ```

#6342017年12月13日作者 HarshOB3 个回答
0 个反应

我该如何用脚本传递内容?

我也这样做了自定义组件,也用了脚本 “''js bm.add('test-block', { 标签:“测试块”, 属性:{ 类别:“FA FA-text” }, 内容:{ 脚本:“console.log('元素',这个)”, 内容:“<h1>你好,123</h1>”, 加点样式让组件显眼 风格:{ 宽度:“100px”, 高度:'100px', “背景色”:“红色”, } } }); ``` 脚本运行正常,但我无法选择组件。还有其他带脚本写内容的方法吗?

artf

改一下 “组件:”<h1>你好123</h1>“,

HarshOB

如果我在创建自定义组件时用脚本,我没有获得特质。特质方面有问题吗?

artf

嗯,你的区块里没有什么特质...... 如果你想用自定义组件,就必须设置“类型” “''js 内容:{ 类型:“你的组件类型”, 脚本:“console.log('元素',这个)”, 内容:“<h1>你好,123</h1>”, ```

#6332017年12月13日作者 HarshOB2 个回答
1 个反应

给特质赋予“本能”或“阶级”。

有没有可能给特征赋予“id”或“class”,比如我用select trails,想给“select”HTML标签赋予“id”以便执行事件。

artf

点击这里 https://github.com/artf/grapesjs/issues/589

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#6322017年12月13日作者 volgan2 个回答
0 个反应

导入带有文件CSS的HTML

我能不能在导入 HTML 到 Grapejs 时使用标签链接(例如 bootstrap css 链接或我的主题链接)和样式?

artf

@volgan确定 #27

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#6312017年12月12日作者 z1lk2 个回答
1 个反应

如何在样式管理器中刷新激活组件的类视图

我正在使用一个特性(type=select)来更改组件的类(一个“列”组件,也就是代表宽度为1-12的类)。在我移除了之前的“col-*”类并添加新选中的类(通过select更改触发的函数)后,样式管理器的类部分仍然保留着旧类。如果我选择另一个组件,然后再次选择该列,它会得到新的、正确的类。我怎样才能在样式管理器中强制刷新,而不取消或重新选择该组件? 也许我添加或移除类的方式不对,如果样式管理器视图应该会自动更新的话。这是Backbone的标准内容吗?如果是的话,我很希望能推荐一本简明的Backbone入门指南。 相关组件创建:

z1lk

啊。ClassTagsView(样式管理器的类部分)在编辑器模型中,在事件“change:selectedComponent”时更新选择列表。 https://github.com/artf/grapesjs/blob/66c19dae4ff5536a34b9ea73d3614fc76752a77c/src/selector_manager/view/ClassTagsView.js#L54 通过在我的“changeColClass”方法末尾添加以下内容,解决了我的问题:

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#6302017年12月12日作者 kkuksin2 个回答
0 个反应

(提问)有可能用语式方式设置类别吗?

谢谢你的组件,我非常喜欢。 我有一些动态方块(我有标签页,切换标签页时,我会添加一组方块,然后移除另一组方块。问题是当我移除旧的区块时,无法移除它们的分类。 如果我用 js 删除它们的类别(document.querySelectorAll('.gjs-block-category'),然后用 .remove() 替换每个类别),下次打开旧标签页时这些类别就不会出现了。 有没有办法在切换标签页和更改区块时,在BlockManager里以动态方式更改类别?

artf

@kkuksin你不需要移除方块/分类,你应该直接重新渲染方块。我们在这里讨论过块和标签页 #499

lock[bot]

由于关闭后没有近期活动,该帖子已被自动锁定。请为相关漏洞开启新一期。

#6292017年12月11日作者 krunal0393 个回答
0 个反应

特质有时不会触发事件

有时 traits change 事件不会在模型和视图上触发事件,我看到下面有类似错误。 未捕获范围错误:最大呼叫堆栈大小超过。 在HTMLDivElement。<anonymous> (grapes.min.js:9229) 在O(grapes.min.js:8871) 在i.each(grapes.min.js:9131) 在i.trigger(grapes.min.js:9228) 在 i.o.trigger(grapes.min.js:23251) 在i.O.Click(grapes.min.js:23274) 在 F.i.openSettings (grapesjs-hsbc.js:1232) 在HTMLDivEleme...

artf

@krunal039你说的是哪个活动?你能举个例子说明是如何再现的吗

krunal039

下面@artf是CodePen链接,我添加了名为Slider的自定义组件。当你把滑块放到编辑器里然后点击它时,应该会打开特性管理器,如果你把链接标题或链接到打开的值改成空白,它会跳出高报错误。 https://codepen.io/kmpdev/full/LORdOM/ 错误: 未捕获范围错误:最大呼叫堆栈大小超过。 2grapes.min.js:2 未捕获范围错误:最大呼叫堆栈大小超过。 在HTMLDivElement。<anonymous> (https://cdnjs...

artf

我无法重现任何错误,但我第一眼看到的问题是你更新模型的方式 “''js ... someModel.attributes.href = this.get(“ahref”); 用途 someModel.set('href', this.get(“ahref”)); ``` 那你就不需要“$(this.el)”了,你已经有“这个.$el”

浏览所有主题