GrapesJS 问题

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

找到 3,464 个问题

#23772019年11月5日作者 arunkumar4132 个回答
1 个反应

使用 Grapes CLI 创建插件

大家好, 我正在尝试使用 Grapes CLI 工具(https://github.com/artf/grapesjs-cli)来创建一个插件,用于 React 项目。 CLI工具创建了blocks.js、components.js和index.js文件。index.js文件包含以下代码: 以下哪一项应用于定义组件?loadComponents 是用来加载components.js中定义的组件,还是用来添加组件? 1) loadComponents(编辑器,选项) 2) editor.addComponents( ) 3)或者使用components.js文件 你能不能做几个代码沙盒,帮助我们更好地理解如何用 Grapesjs 配...

pouyamiralayi

@arunkumar413这个问题必须发布在[grapesjs-cli](https://github.com/artf/grapesjs-cli/issues)以下哪一项应用于定义组件? 您必须在“components.js”文件中[定义你的组件](https://grapesjs.com/docs/modules/Components.html#component-definition)。“loadComponents”是该文件的命名导入。 之后,你必须在“blocks...

artf

你能做几个代码沙盒,帮助我们更好地理解如何用 grapesjs 配合 react、jsx、像 material-UI 这样的 UI 工具包吗? https://github.com/artf/grapesjs/issues/2370#issuecomment-550515205

#23762019年11月5日作者 arunkumar4133 个回答
2 个反应

使用 Grapesjs 的材质界面

大家好, 我试图用材质界面组件和葡萄一起,但材质界面组件的渲染没有达到预期(https://codesandbox.io/s/grapesjsapp-umxf5)。我用这个模板(https://github.com/prashant2018/GrapesJs-React)测试了材质界面。 另外,能否请您澄清一下这个工具的使用场景?这个工具是用来用普通HTML标签构建组件,而不是像React这样的框架吗?还是说这和React、Angular、Vue等相辅相成? 顺便说一句,开个聊天频道讨论初学者和小型实现问题会很有帮助。 谢谢, 阿伦

pouyamiralayi

@arunkumar413 关于材料用例,请参见 [语法](https://github.com/ronaldaug/gramateria)请澄清一下这个工具的使用场景 Grapesjs 是一个目前支持网页的模板构建器。此外,它还提供了可以轻松集成到任何类型CMS的API。这个工具是用来用普通HTML标签构建组件,而不是用像React这样的框架吗?还是说这和React、Angular、Vue等相辅相成? 你提到的框架和 Grapesjs 的用例不同。据我所知,Reactiv...

artf

另外,能否请您澄清一下这个工具的使用场景。这个工具是用来用普通HTML标签构建组件,而不是像React这样的框架吗?还是说这和React、Angular、Vue等相辅相成? https://github.com/artf/grapesjs/issues/2370#issuecomment-550515205

Rishabh-prescience

我能把 Material UI 和 GrapesJS 集成,但卡在 ApexCharts 的集成上。有人能查查吗? [“代码沙盒”](https://codesandbox.io/s/grapesjs-emilsedgh-example-forked-xiq9r?file=/src/index.js)。提前感谢大家

#23742019年11月4日作者 MartinPutz3 个回答
0 个反应

组件样式在拖拽模式('absolute')中拖拽事件后不会更新。

在新的拖曳模式中,组件的样式在拖动后不会更新。 预期行为:通过点击组件(或工具栏图标)拖拽元素组件被“丢弃”后,样式应更新为新位置 当前行为:你把组件拖到别处x和y位置(上、左)与拖拽前相同 有个例外:如果样式管理器面板还没打开,然后你拖动组件,它会正确更新(但这是面板第一次打开) 这个问题在演示中同样可复现。 [https://jsfiddle.net/yt0wz29p/](https://jsfiddle.net/yt0wz29p/) 繁殖步骤:使用拖曳模式打开演示有集合的 x 和 y 值(例如 0px 和 0px)拖动组件并检查新的 x 和 y 值 GrapesJS 版本:0.15.8

artf

有一组 x 和 y 的值(例如 0px 和 0px) 你说的x/y是指左边/上方吗?

MartinPutz

是的,左边和上边应该会变更并更新,但它们保持不变。

artf

我看到只有重新选中元件后才会改变,你能确认吗?

#23732019年11月4日作者 FedericoPalma923 个回答
1 个反应

DataPicker 和 Element 控件位置错误

[Bug]:你好,我把 grapes js 集成到一个 asp.net 核心/Angular 项目中,我遇到了两个问题:添加方块后,工具栏和荧光笔随机显示在错误位置。 ![screenposition](https://user-images.githubusercontent.com/7261023/68115728-623d3100-fef9-11e9-8b8a-ebd2d2ad0377.png)当我点击数据选择器时,它显示在窗口外的位置错误。 ![screenposition_cp](https://user-images.githubusercontent.com/7261023/68115743-6c5f2f80-fef...

artf

关于颜色位置的问题,请参考这个 https://github.com/artf/grapesjs/issues/1533#issuecomment-432146597

artf

@picozzo92 你能制作一个最小且可复现的演示吗? 我正在做一个[大画布重构](https://github.com/artf/grapesjs/tree/multi-frame),可能会修复所有相关问题,有一个可复现的演示会帮助我理解这些

SaleDrache

我也遇到过颜色选择器位置的问题,得出结论是它的位置是与屏幕/HTML标签相关的(位置:绝对,左:x px),但如果包含gjs-editor的任何父元素是position: relative,它会影响modal的位置(比如你在页面上有侧边栏,就像我遇到的那样)。 希望这些信息对你有帮助,也能给你一些提示。

#23722019年11月4日作者 emilsedgh3 个回答
3 个反应

从工具栏拖曳可以关闭(拖拽模式)

[这里有本期的演示演示](https://jsfiddle.net/srvmLkt6/) 繁殖步骤:选择一个组件试着从工具栏拖动它 你可以看到组件立刻向左跳。 不过如果你单独拖动组件(不使用工具栏),效果还不错。 这只发生在Grapesjs从带边距加载且不是从“x:0”开始时 发生这种情况的原因如下: 无论是从工具栏还是组件本身拖拽,都会调用“tlb-move”命令。 'tlb-move' 接受 'event' 参数,元素的位置通过 'event.clientX' 计算。 当你拖动组件时,组件在iframe里,它的clientX与文档相关,一切顺利。 但工具栏按钮不在画布/iframe上。因此,来自“ToolbarButtonVi...

emilsedgh

哦,我试着在举报前找过,但没找到。谢谢。那我就关上这个了。

pouyamiralayi

@emilsedgh这里有公开讨论,[这里](https://github.com/artf/grapesjs/issues/2207)

alemenciones

这个问题在上一个版本里已经修复了,对吧? 我在移动设备上拖出iframe时需要一个解决方案

#23702019年11月4日作者 arunkumar4132 个回答
2 个反应

使用已有的 JSX 模板和 Grapesjs,同时将 Grapesjs UI 生成的模板转换为 react jsx 模板

大家好, 我刚开始玩 Grapesjs,想在 Grapesjs UI 编辑器中使用当前/正在运行的 React 模板/组件。还要把用 grapesjs 创建的模板转换成 react/jsx 模板/组件格式。能否告诉我 Grapesjs 是否可行,并指导我如何使用/配置 Grapesjs 以满足我的需求。 谢谢, 阿伦

artf

@arunkumar413我们还没到直接操作React组件的阶段,但#1970已经有事情在推进

pouyamiralayi

你好!请阅读[设置指南](https://grapesjs.com/docs/modules/Components.html#setup-jsx-syntax),之后你可以使用“editor.addComponents(<div>Hello JSX</div>)”来添加组件。 对于框架特定的 JSX,你也可以使用 [处理器回调](https://github.com/artf/grapesjs/blob/c1fb490a73adefb0fa073f37bef4e6178d9...

#23692019年11月2日作者 timkelly08103 个回答
2 个反应

在 Grapesjs 代码的哪个位置,它会把图片发布到上传端点?

我和我的团队开发了一个用 grapesjs 来构建邮件模板的应用程序。当图片被引入模板时,它们会自动被 base64 编码,发现该编码来自 https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js#L77 的第 77 行。由于图片采用了base64编码,无法直接发送到大多数电子邮件客户端而不被屏蔽,我们考虑将图片发送到本地数据库保存。我们注意到,当使用图片的网址源而不是编码时,图片会显示在邮件中。那么,在 grapesjs 代码的哪个位置会把图片发布到上传端点?头部是葡萄自动设置的,还是需要指定 x-content-type、conte...

artf

要禁用编码@timkelly0810只需将 false [此选项](https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js#L71) 关于上传资源你需要知道的全部信息在这里:https://grapesjs.com/docs/modules/Assets.html#uploading-assets

pouyamiralayi

[添加图片上传功能](https://blog.webnersolutions.com/adding-image-upload-feature-in-grapesjs-editor)

timkelly0810

Grapesjs 以什么身份向数据库发送图片?我们正在尝试弄清楚葡萄如何向Spring发送图像,以便我们能搭建数据库来接收接收新来的图像。

#23682019年11月2日作者 trafalmejo2 个回答
0 个反应

所有自定义组件实例都在更新

你好, 我为切换按钮创建了一个自定义组件。我的问题是,一旦我拖拽多个实例,然后编辑其中任何一个,所有实例的颜色、大小等都会被更新。 我用的是最新版本的 Grapesjs ~~~~ 编辑。BlockManager.add('toggle', { 标签:“切换”, attributes: { class:'fa fa-toggle-on'}, 分类:“基础”, 内容:'<label class=“switch”> <input type=“checkbox”><span class=“slider”></span></label>' }) ~~~~ 所有动画和属性都在我编辑器加载的CSS里。有人知道这是为什么吗?

pouyamiralayi

嗨!我猜这是因为你的模块拥有相似的职业,并且有共同的选择器。 在最新版本中,默认是“avoidInlineStyle”,那么你在最新版本中遇到这种情况了吗?

artf

@pouyamiralayi猜测是对的,这确实是因为同类,你必须在样式管理器中切换(https://github.com/artf/grapesjs/issues/863#issuecomment-544144357)它们,才能只样式化组件样式。顺便说一句,我希望很快能提供一个更直观的解决方案

#23672019年11月1日作者 pouyamiralayi暂无回答
0 个反应

对象在脚本插值中

描述这个bug(最新版本中不存在这个问题,这个问题不成立。) 假设我们的组件模型中有一个属性,即一个对象。 然后尝试用脚本插值这个属性:你会得到一个“[对象对象]”字符串。 重现该行为的步骤创建自定义组件类型。在模型内部,创建一个类似这样的属性:“test:{a:1,b:2}”在模型内部,创建一个脚本函数。在脚本函数中,创建如下变量:“const test = '{[ test ]}'''log解析后值:“console.log(JSON.parse(test))”将显示关于 JSON 解析的错误。 预期行为: 对对象属性进行插值会得到一个 JSON 字符串,可以解析以实现原始对象。 代码片段: 基于[这里](https://gi...

#23662019年11月1日作者 benvmatheson3 个回答
1 个反应

文本阴影在选中元素时移除 RGB 值

示例: https://jsfiddle.net/benvmatheson/g1ft06qh/8/ 导入带有文本属性的样式。 'text-shadow:RGB(51, 166, 58) 4px 4px 4px;' 这样操作正常,物品也能正确显示。然而,一旦选中了该项,RGB值会被移除并替换为0。 'text-shadow:0 4px 4px 4px;'

benvmatheson

看起来当元素被点击时,'targetUpdated'会被运行两次。一次正确数值为“rgb(89, 89, 89) 5px 6px 7px”,第二次用“rgb”清除“0 5px 6px 7px”。这也解释了为什么第一个数字还是最后一个数字应该被理解为颜色会让人困惑。 你有什么想法第二次游戏会从哪里来吗?

artf

是的,我已经知道这个问题了。 不幸的是,Style Manager 解析器相当简单,它所做的只是用分隔符(这里是“空格”)来拆分值,然后按定义中的顺序分配到相对属性。所以,严格来说,这个改动会让它“4px 4px 4px rgb(51, 166, 58)”正常运行,但是......不幸的是,事实并非如此,这是由于[CSSOM不一致](https://grapesjs.com/docs/guides/Custom-CSS-parser.html#cssom-results-a...

benvmatheson

由于跨浏览器依赖,这似乎会变成一个大型项目。是否值得引入第三方模块,而不是试图在葡萄里解决这个问题?

浏览所有主题