GrapesJS 问题

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

找到 3,464 个问题

#28092020年5月29日作者 antman33511 个回答
0 个反应

模态销毁内容物

你好, 我用的是modal和一些命令。我注意到调用 'modal.setContent( ... )'之前在模态中的部分被移入一个带有'GJS-MDL-Collector'类的隐藏div。 有没有办法在关闭时销毁内容?还是我应该在关闭前删除“.innerHTML('')”? 谢谢, 安东尼奥

artf

如果你不需要那些参考,可以手动清理

#28082020年5月27日作者 robertraf3 个回答
1 个反应

生产环境中的自定义类型组件

你好,我有个问题,当我从编辑器创建自定义类型组件时,下一步该如何在我的应用程序中显示该组件?目前我用 Firestore 插件保存组件数据,对象中存储的属性有:gjs-assets、gjs-components、gjs-css、gjs-html 和 gjs.styles。 如果我想在生产环境中使用这些组件,接下来该怎么办?我应该使用JavaScript框架还是库?或者说是同一个没有编辑功能的葡萄编辑,谢谢。

Ju99ernaut

“onRender” 只是指定当你成功将组件放置在画布上时应发生的事情,而 “script” 则是将在 html 中以 “script” 标签生成的代码。 大致是: '''html <script> //... var items = document.querySelectorAll('#someid'); 对于(var i = 0; len = items.length; i < len; i++) { (function(){ 组件定义中的脚本压缩版本 })() }...

Ju99ernaut

我觉得在生产环境中,你只需要用“grapesjs”生成的html和css代码。

robertraf

我理解这一点,但如果我想渲染我创建的组件,它就无法实现。我来解释一下,我创建了一种组件,可以从端点渲染数据,如果我用html和css代码,它就无法工作。 自定义组件类型 '编辑。DomComponents.addType('group', { 型号:{ 默认值:{ 最终代码中将使用的标签名称 标签名称:“div”, 属性:“”, 你可以用特质来自定义自定义属性 特质:[ { 类型:“选择”, 变革提案:1, 名称:“customProp”, 选项:[] } ] }, ini...

#28072020年5月27日作者 alesub3 个回答
0 个反应

:启动编辑器“fromElement”在标签内创建组件,数据-gjs-type=“text”

你好, 我目前正在尝试启动编辑器“fromElement”,在容器内设置以下 html: 但执行时,grapesjs 在 '' 标签内创建组件<p>,即使将 'data-gjs-type' 属性设置为 'text'。我想做的是把待编辑的段落作为一个整体组件呈现。 你可以在这里看到问题的实际运作:https://codepen.io/alesub/pen/xxwNaPd 谢谢你提供这个很棒的工具!

alesub

@artf澄清一下:这个bug是基于你在评论中描述的预期行为: https://github.com/artf/grapesjs/issues/576#issuecomment-348550694 还有带文字的 div 在演示页面上的表现。 如果我理解错了,请告诉我, 再次感谢!

alesub

你好,你有进展吗?让我迷惑的是,演示页面上没有这个问题,任何加粗或斜体文字保存或重新加载后都不会变成独立组件。 任何见解我都会非常感激, 谢谢!

artf

关闭这个,因为现在这是默认行为。 也可以通过 https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.2 添加的“disableTextInnerChilds”选项来自定义行为

#28052020年5月27日作者 EgorPashko3 个回答
6 个反应

“您所做的更改可能无法保存。”会弹出警报弹窗

大家好 我遇到了一些与警报有关的问题,当我尝试登出页面时会弹出。 其实我也不知道是bug还是别的什么。 我看过相关文档,但还没得到答案。如果你帮我,我会感激你。 警报提示是“您所做的更改可能无法保存。”

Ju99ernaut

我猜即使你设置了存储,提醒还是会出现。把这个加到你的初始化里: “''js VAR Editor = Grapesjs.init({ //... 在卸载未保存更改页面前先显示提醒 noticeOnUnload: 0, //... }) ``` 默认情况下,它设置为 true。

Ju99ernaut

这大概是因为你没有设置“存储”设备

pjdevries

我也考虑过“存储”,正准备搭建一个虚拟存储,希望能绕过这个问题。不过“noticeOnUnload: 0”功能非常好用,所以没必要。 非常感谢。

#28032020年5月26日作者 motazad1 个回答
0 个反应

响应式页面模式(翻译与绝对)

@artf 我想使用翻译模式和绝对模式 但也存在一些问题 1- 不再可能掉线当我在设备(手机和平板)上设置盒子时,如果屏幕比设备大小稍大或稍小,输出可能有问题。

artf

使用绝对模式,设计上更难处理响应式页面

#28022020年5月26日作者 meyerco1 个回答
1 个反应

编辑器在快速切换控件选择时卡住了

描述该漏洞在当前演示中被重现发生了什么?在快速切换控件 时,编辑器卡住了。演示中复现步骤选择一个控制并快速切换到另一个控制。这样做几次,编辑器就会卡住。 ![ezgif com-video-to-gif (3)](https://user-images.githubusercontent.com/65889198/82869853-9fb9e800-9f37-11ea-97e8-9fad0d5b74d2.gif)控制台上的错误

artf

谢谢你的报告,@meyerco大概找到了主要问题,应该会在下一个版本中修复

#28012020年5月25日作者 fedd3 个回答
1 个反应

用服务器端的 if 或 foreach 表达式(即 MVEL)丰富任何组件

我正在研究如何制作一个带有服务器端表达式的模板,可以重复某个组件(“foreach”)或完全移除(“if”)。我的后端用 [mvel](http://mvel.documentnode.com/) 解析模板。 我的想法是给所有或部分部分元素添加几个设置。例如,映射到单元格<div>的“'”,所以它看起来像这样: <div mvel-foreach=“item : people” class=“cell” id=“iuck”> ....部分内容inside...@{item.lastName}...... ...等等等等 </div> 或者用文本(“mvel-ending”插入分隔符): <div mvel-ending=“', '...

Ju99ernaut

要包围元素,可以查看“toHtml”,你可以在相关内容中搜索示例。 无论如何,我觉得替换默认组件类型不是个好主意,我建议创建一个扩展默认类型的新组件,并用“isComponent”来确定它的分配方式。[components](https://grapesjs.com/docs/modules/Components.html#how-components-work)的文档可能会有帮助

fedd

组件的文档可能会有帮助 我是基于这篇文章编写的代码。上面写着,更新组件类型其实很简单,让我们看看具体方法: .... “默认值”属性的处理方式不同 并将与旧的“默认”合并 所以我现在更新了一个简单的“输入”组件类型,不是默认的: const mvelModel = { 型号:{ 默认值:{ 特质:[ 'mvel-if', “mvel-foreach”, “mvel-ending”, ] } } }; 编辑。DomComponents.addType('input', mve...

artf

@fedd你可以在“model.init”函数中添加你的新特征

#28002020年5月25日作者 meyerco3 个回答
0 个反应

移除提示时,其 css 不会被移除

描述该漏洞在当前演示中被重现预期行为当工具提示被移除时,其CSS也会被移除接下来会发生什么?当工具提示被移除时,其CSS不会被移除演示中复现步骤清理画布拖拽提示移除提示点击顶部工具栏的导入按钮,提示CSS未被移除。 ![图片](https://user-images.githubusercontent.com/65889198/82789579-32448380-9e73-11ea-8269-20a4c0a54788.png)我研究的结论 为了理解这个bug,我通知说样式签名功能无法正常工作。 我猜测这个bug发生在命令core:component-style-clear的[run](https://github.com/artf...

artf

是的,我觉得你说得对,可能是替换 “''js 依赖于视图 const len = dc.getWrapper().find('[data-gjs-type=“${type}”]').length; 也许能解决这个问题,你想检查一下并创建一个PR吗?:)

meyerco

@artf 也许用这个代码来保持代码通用? “''js 依赖于模型 const len = dc.getWrapper().findType(type).length; ```

artf

@meyerco 😅 好的,抱歉,那是我尝试时复制粘贴的

#27992020年5月24日作者 dintifla3 个回答
0 个反应

选择器带id和类选择器的顺序,id-selector后空格

我目前正在开发一个网页应用,我们将这个项目集成为图形界面编辑器来定制环境。 我们的图形界面组件是从数据库加载和解析的。例如,我们可以通过一个ID来识别按钮、数据网格等(例如“17190fbd-13d6-430f-bb32-1a09d2151a77”)。这些组件由多个嵌套的 HTML 元素由框架构建,框架会添加样式类。 我现在的目标是通过类似“#ancestor-id .framework-class1.framework-class2”(例如 '#17190fbd-13d6-430f-bb32-1a09d2151a77 .my-text-label')访问 GrapesJS 的内部元素。 我在画布加载后,会为每个嵌套元素添加id-...

dintifla

简短更新: 我用 'selectors.unshift(idSelector)' 而不是 'selectors.add(idSelector)' 时,成功让选择器的顺序正确了。 现在我仍然遇到id-和class-selector之间缺失空格的问题。 直到现在,我一直找不到进入“Selectors.getFullString(..)”的方法。改变行为

artf

你好@dintifla SelectorManager并不是设计成那样工作的(你只能混合使用'.class1.class2'类,但不能用ID),但说实话,我不太明白你使用SelectorManager的目的是什么。 如果你需要在编辑器中查询组件,只需这样做:'anyParentComponent.find('#my-id .my-class')[0]'

dintifla

你好@artf谢谢你的回复。归根结底,这不仅仅是查询一个组件,而是生成它的CSS。我不需要 HTML,因为我的应用是用富客户端应用设计的,以抽象表示存储到数据库,然后解析成 DOM。因此,我无法使用GrapesJS生成的ID,因为我无法存储HTML(或其他DOM的任何表示)。 最终,我期望我的所有规则都是这样写的:“#top-level-component-id .my-class { ...} 举个简单的例子,比如生成的按钮 HTML: '''html <div id=“...

#27982020年5月24日作者 niklasdahlback1 个回答
0 个反应

Block:drag 中的父引用

我想知道是否可以在block:drag事件中获得生成组件的父属性和/或索引,类似于component:drag事件中的父属性?似乎传递的事件参数中没有任何关于父的引用。 我之所以问这个问题,是因为我正在研究一个方案,用方块的投影框而不是绿色线来预览拖拽方块的假设掉落结果。

artf

'block:drag' 不能包含对组件的引用,因为它在被丢弃前还没被创建

浏览所有主题