GrapesJS 问题

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

找到 3,464 个问题

#14432018年9月19日作者 sapien992 个回答
0 个反应

Angularjs 组件作为 Grapesjs 组件

嗨,artf, 首先,感谢这个了不起的项目,我真的很喜欢使用它。其次:这不是关于在 angular 项目中运行 grapesjs,而是完全相反:grapesjs 作为 angular 6 组件已经运行良好。我想在 Grapesjs 画布中使用其他 Angular 组件。在主页上,这个组件(只是一个 helloworld)和 grapesjs 组件并列运行,后者看起来像这样: '<demo-component></demo-component> <grapesjs-component></grapesjs-component>' 演示组件渲染如预期 '\<demo-component ngcontent-c0=“” nghost-c...

artf

所有通过“canvas.scripts”加载的自定义脚本都是在组件之前加载的,所以如果你试图挂载到某个东西上,显然是无法实现的。你可能还需要使用['组件相关'](https://grapesjs.com/docs/modules/Components-js.html#component-related)脚本

lock[bot]

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

#14422018年9月19日作者 comedydriving2 个回答
1 个反应

无法加载 JSON 数据。

我能把我的json数据保存到数据库里,但模板无法正确加载。 我的json数据可以在这里看到: ![jsondata](https://user-images.githubusercontent.com/25832457/45772605-ccb7e280-bc0d-11e8-9d11-fb9d2d902a66.PNG) 当我加载页面时,控制台显示是这样的,这让我怀疑json加载不正常: ![jsonload](https://user-images.githubusercontent.com/25832457/45772523-98442680-bc0d-11e8-9fba-99269ca5c29e.PNG) 我的 JSON 格式...

comedydriving

解决了。 第一个问题是内容类型必须是json。 然后我不得不更新我的存储PHP脚本,以接受json数据: $POST = jsondecode(filegetcontents('php://input'), true); 最后,数据库中的字段被设置为“text”而不是“long text”,导致json组件被截断了。

lock[bot]

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

#14412018年9月19日作者 ageir3 个回答
0 个反应

把图片拖到画布上不会显示图片

在本地服务器上运行最新版本(0.14.29)。使用示例网页预设。Ubuntu 18.04,Chromium 69。 我在拖拽图片到画布时遇到了问题。我用的是PHP后端。图片上传并添加到了资产管理器,但画布里没有显示图片,只有缺失的文件图标和上传文件名称。 我以演示页面为基础。https://grapesjs.com/demo.html 测试时,它在该文件中替换资产管理器为: 服务器上传时的响应如下: '{“data”:[{“id”:“641”,“name”:“myfile.jpg”,“type”:“image”,“src”:“\/remote\/file\/641”,“height”:“0”,“width”:0“}]}' 添加到画...

JulyanoF

@ageir我做了一些不同的(文件上传): 以及 以及列表图片:

artf

因为你的自定义上传文件(为什么不只用原始文件???),你就不会调用回调 https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/FileUploader.js#L105

mathiasbc

你好@artf, 我也有同样的问题,我的配置是这样的: 这个功能还行,我实际上可以上传图片,它们会显示在资产管理器里。对于图像块,我有: 这是直接从通讯插件复制的。现在,当我拖动到画布上的图像块并双击想要的图片时,组件会被添加,但我看到的是“src: ”'',所以没有显示任何图像。有什么建议吗?

#14402018年9月19日作者 ionic6663 个回答
0 个反应

如何监听特质中选择框的变化

![1](https://user-images.githubusercontent.com/36065691/45727423-4643d680-bbf6-11e8-9ab7-eb6954d0311f.png) ![2018-09-19_102259](https://user-images.githubusercontent.com/36065691/45727426-48a63080-bbf6-11e8-96f1-b9b448e9d4ac.png) ![3](https://user-images.githubusercontent.com/36065691/45727429-49d75d80-bbf6-11e8-8e71-...

JulyanoF

@ionic666我想你需要创建一个自定义特质: [https://github.com/artf/grapesjs/wiki/Traits#define-new-trait-type](https://github.com/artf/grapesjs/wiki/Traits#define-new-trait-type)

artf

如果没有“changeProp: 1”,那就是一个简单的属性,所以你要听的是:'change:attributes:data-sensor'

lock[bot]

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

#14392018年9月18日作者 kickbk3 个回答
1 个反应

从AM删除画布/LS中的图片

我用资源管理器上传图片,资源管理器会把图片存储在服务器上。我选择要插入画布的图片,它会把它存储在LocalStorage里。太好了! 现在我删除了那张图片。它会从服务器和资产管理器中移除。太棒了! 我刷新了页面。 由于该图片被用于画布,因此没有从画布中删除,因此画布中缺少了该图像。打开AM时也显示缺失的图像,因为它试图从LS加载。 如果我对原因有误,请纠正我。 我在想解决办法可能是,当我们从AM中移除图片时,它也应该从画布和LS中移除它。 我该怎么做? 顺便说一句,我确实有一个函数,可以用下面的代码调用从AM移除图片的功能,也许我应该加点什么?

artf

好吧......@kickbk这就是为什么我要求在创建新问题时提供所有信息,所以请下次一定要说明 顺便说一句,这些是不同的组件,试试这个: 'Wrapper.find('[data-gjs-type=mj-image][src=“....”]')'

artf

我觉得解决办法可能是,当我们从AM中移除图片时,它也应该从画布和LS中移除它。 好吧,但这种逻辑完全取决于你自己,绝对不应该在核心里加入请注意,我确实运行了一个函数,可以用下面的代码调用 AM 中移除图片的功能,也许我应该加点什么? 没错,一旦 ajax 调用完成,你就移除组件 “''js am.addType('image', { 浏览量:{ onRemove(e) { const src = this.model.get('src'); const wrapper =...

kickbk

当我做 wrapper.find('img[src=“${src}”]') 时,我得到的是空数组。事实上,我在 wrapper.find('img') 上也会出现空数组。 我正在拿包装纸,但里面似乎没有任何图片。我们是不是查询错了元素?

#14382018年9月18日作者 mrajeshkrossark3 个回答
0 个反应

通过 reactjs 包装器加载 HTML 内容的方法

@artf兄弟,我想加载包含css和js的html页面(视差)。我工作了大约10天,但还是找不到我是否正确操作。所以你能给我正确的操作说明吗?最终目标是在 React 包装页面为用户提供一组模板,一旦用户选择了任意模板,系统就会将所选模板加载到 grapesjs 编辑器中。所以请我赶紧解决这个问题。提前感谢大家。

artf

https://grapesjs.com/docs/getting-started.html

suresh5

@artf兄弟,我想加载包含css和js的html页面(视差)。我工作了大约10天,但还是找不到我是否正确操作。所以你能给我正确的操作说明吗?最终目标是在 React 包装页面为用户提供一组模板,一旦用户选择了任意模板,系统就会将所选模板加载到 grapesjs 编辑器中。所以请我赶紧解决这个问题。提前感谢大家。 兄弟,关于Grapesjs和React有什么最新进展吗?

mrajeshkrossark

> @artf兄弟,我想加载包含css和js的html页面(视差)。我工作了大约10天,但还是找不到我是否正确操作。所以你能给我正确的操作说明吗?最终目标是在 React 包装页面为用户提供一组模板,一旦用户选择了任意模板,系统就会将所选模板加载到 grapesjs 编辑器中。所以请我赶紧解决这个问题。提前感谢大家。嗨兄弟,关于用 React 的 Grapesjs 有什么最新消息吗? 在你的 react 组件的 componentDidMount() 中,你可以像下面那样初...

#14362018年9月18日作者 peakrams3 个回答
3 个反应

原子块或复杂分量

你好, 我正在研究编辑器,觉得我理解了组件和模块的区别。现在,我想知道 GrapesJS 是否支持将块作为原子实体管理,或者允许将组件定义为带有节点的树。 比如,我有一个叫“separator”的块,基本上是一个带有“tbody”、“tr”和“td”的表格,这些都是gjs中的组件。我希望实际上点击这个分隔块的任何组件时,都会选择我设置自定义特征和属性的“表格”组件,然后我可以在正确的组件上编程拆分(例如,设置表格的高度实际上会设定嵌套“td”的高度)。 我的目标是让用户感受到他们在处理单一原子元素的感觉,即使在源代码层面,他们为该元素设置的属性是分布在组成该元素的不同节点之间。 我能预见的主要问题是源代码应该是可导入的,因为它是由...

artf

我能预见的主要问题是源代码应该是可导入的,因为它是由编辑器生成的,我不确定编辑器是否能区分分隔符元素和用于表格数据的表格组件中的任何 td 组件,以及它是否能嗅探所有样式,重新填充到编辑器中。 是的,这是个好问题,基本上编辑器有一堆组件类型,每次添加新组件时,它都会放在堆栈顶部 假设你需要在选中的表格组件([组件的API](https://grapesjs.com/docs/api/component.html))中添加一个。 “''js const selected =...

artf

它为该节点返回了类型,阻止了编辑器测试该节点内部节点的组件类型? 不,内层节点仍会被遍历,但你实际上可以通过这个作为返回“isComponent”来阻止这一点 “''js isComponent(el) { ... 返回 { 类型:“分离器”, 如果返回的对象包含“组件”, 内层节点将被跳过 组成部分:[], } } 空桌子,那你能做什么?!?用这个: “''js 组件:[el.innerHTML], “内容”是静态内容,编辑器不会创建组件,你甚至无法选择它们(因为不是组件...

artf

是的,内容属性确实能解决我的问题,但我猜我必须手动保持它的值(通过字符串操作)与用户对分隔符组件属性和特征所做的更改保持同步,而且因为它是分隔符组件模型的一部分,任何对它做的更改都会触发视图更新, 右? 正如你说的,“我希望实际上点击分隔块的任何组件都能选择表格”,我猜“分隔符”是静态的,不需要更改内部内容,这取决于你的特征具体做什么,比如说,如果你只是更改组件本身的属性,它仍然与其视图同步否则,如果我让内层节点被遍历,但检查祖先和/或后代节点,确认它们是否属于分隔器组件,...

#14352018年9月17日作者 benschiefer2 个回答
0 个反应

复选框特性未正确渲染

组件设置中没有显示“勾选”的复选框类型特征。 要重现:进口加价在画布中选择输入元素进入组件设置注意“已检查”设置未被勾选。 “required”属性也会出现同样的问题。 同样,如果你导入 或 或 组件设置中没有正确显示该元素为必需。 期望:如果该属性存在,且其值是空字符串或与该属性的正规名称ASCII大小写不区分匹配的值,且无前置或后置空白,则组件设置中的复选框应勾选

artf

应该会在最新的 https://github.com/artf/grapesjs/releases/tag/v0.14.33 和 https://github.com/artf/grapesjs-plugin-forms/releases/tag/v1.0.1 中修复(插件名称改为'gjs-plugin-forms' -> 'grapesjs-plugin-forms')

lock[bot]

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

#14342018年9月17日作者 YashPrince3 个回答
0 个反应

工具栏隐藏文本元素

@artf 请检查你的演示页面文字是否隐藏在工具栏下方。我们如何更新工具栏的位置? ![工具栏问题](https://user-images.githubusercontent.com/40828744/45635311-493daa80-bac2-11e8-9407-eb17dcb8205c.png)

artf

目前该职位是[硬编码](https://github.com/artf/grapesjs/blob/dev/src/commands/view/SelectComponent.js#L519),但我们可以像通过事件扩展RTE工具栏那样扩展(https://github.com/artf/grapesjs/blob/dev/src/richtexteditor/index.js#L237-L239)

artf

https://github.com/artf/grapesjs/pull/1730 关闭

lock[bot]

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

#14332018年9月17日作者 YashPrince3 个回答
6 个反应

悬停工具栏

@artf我们如何在悬停时显示工具栏。目前,当我们选择任何元素时,工具栏是打开的,但我想在悬停时显示它。任何帮助都将不胜感激。 ![工具栏配置](https://user-images.githubusercontent.com/40828744/45635174-f19f3f00-bac1-11e8-95e5-c988d27f8531.png)

limbobark

@sakshigarg9, “''js 编辑。Commands.extend('select-comp', { onHovered(em, component) { const trg = component && component.getEl(); 如果 (trg) { const pos = this.getElementPos(trg); this.updateBadge(trg, pos); this.updateToolbar(component);显示工具栏...

artf

我唯一能帮到你的方法是让你检查这个命令 https://github.com/artf/grapesjs/blob/dev/src/commands/view/SelectComponent.js(命令ID:'select-comp'),它负责显示工具栏。所以你可以尝试用 [Commands API](https://grapesjs.com/docs/api/commands.html) 来扩展它

sakshigarg9

@YashPrince 你好,你解决这个问题了吗?我需要类似的实现

浏览所有主题