GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#23882019年11月7日作者 asieraduriz3 个回答

2 个反应

拖<link>拽块到画布时，如何导入从要渲染的样式

我的情况：我正在慢慢将一些自定义的UI组件导入“ReactJS”到“GrapesJS”中。现在，我通过与Backbone集成，能够正确渲染该组件。但我的问题是，我能否使用“<链接”标签来下载我自己的自定义样式，这样我就能在画布中正确看到它们？我尝试过这样做，但都没成功。我不想手动下载我UI库里的每个CSS，但如果我渲染任何组件，我希望组件样式和“<link”导入的样式一致。

asieraduriz

你好@pouyamiralayi 感谢你的快速回答。不过，这似乎还不够，因为我想要的是能看到我渲染的组件和想要的样式，同时如果导出项目，还能包含这些文件

artf

只需在<link>模板内启动编辑器，它会加载到画布中，你就能在导出代码中看到它

pouyamiralayi

你好@fasaas你可以这样注入你的全球风格：自定义脚本也是如此。更多相关内容[见此处]（https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js）干杯！

查看详情

#23872019年11月7日作者 rlopzc3 个回答

14 个反应

如何更改默认选中的面板？

我尝试用'defaultCommand： 'open-blocks'，但样式管理器是默认选择的谢谢！

pouyamiralayi

谢谢你，@naveen-15697，你的解决方案非常棒！干得好。这@romariolopezc适合你的情况？正如@naveen-15697建议的，你必须这样做：而“视图”面板的[按钮IDS]（https://github.com/artf/grapesjs/blob/4bc79bd304072b458f63482d3a4f5049c6491467/src/panels/config/config.js#L56）如下：开放式 SM开放式TM开层开积块干杯！

naveen-15697

@pouyamiralayi它的表现并不如预期。如果我在加载时使用 'editor.runCommand（'open-blocks'）'，组件图标不会被选中。附加在样式管理器的底部![2019-11-11-085143409x567scrot]（https://user-images.githubusercontent.com/6199588/68596329-a764e400-0460-11ea-8b32-e9f2a57fcd1d.png）![2019-11-11-085...

rlopzc

@pouyamiralayi @naveen-15697，真的有效！！我在加载外用它，在初启 Grapesjs 之后。如果我在加载时使用它，切换到“开放块”时会有小延迟。如果是在'.init（{..}）之后，然后渲染时选择

查看详情

#23862019年11月7日作者 navewi1 个回答

1 个反应

如何在 Grapesjs 中为 ckeditor 添加类似 line-height 的插件？

我搞不清楚如何在 CKeditor 中添加行高。我看了 ckeditor 的文档，也按照他们提供的添加 ckeditor 插件的所有步骤都做了，但图标没有出现在工具栏里，我甚至不确定 line-height 插件是否加载出来了。有人能帮我或者成功在 Grapesjs 里添加插件到 ckeditor 吗？

navewi

好吧，算了。我在配置里出现了一个字符错误，把“=”打成了“：”。给所有有同样问题的人：要在 grapesjs 中添加 ckeditor 插件，请在 init 函数的插件选项中添加 extraPlugins 命令： [....] 'Grapesjs-plugin-CKEDITOR' ： { 选项：{ 语言：“de”，工具栏：[... ], extraPlugins： 'lineheight'， } },

查看详情

#23842019年11月6日作者 rodenp3 个回答

2 个反应

更细致的拖放调整大小和重新定位控制

我希望能为组件的拖拽功能添加额外功能，这样可以轻松调整大小和重新定位，而不必手动通过屏幕右侧的面板。你能给点建议，说明代码库中应该重点关注哪个部分吗？有没有人做过类似的事情，愿意分享一下他们的经验和知识？谢谢

pouyamiralayi

方便调整尺寸你可以在你的[组件类型定义]（https://grapesjs.com/docs/api/component.html#properties）中添加“可调节大小：true”。功能对组件的拖拽你可以在编辑器或特定组件上应用：干杯！

rodenp

感谢@pouyamiralayi的指导。这对列之类的东西也适用吗？

pouyamiralayi

@rodenp是的！每个组件类型都可以使用这个属性。

查看详情

#23832019年11月6日作者 smik33 个回答

3 个反应

不活跃

自定义组件在第一次添加时无法通过样式。

Fiddle复制问题：https://jsfiddle.net/gd8mo3e4/1/ 我有一个自定义组件用于创建PDF文档画廊。有一个自定义资产管理器，当块被放入编辑器时会打开，允许你选择PDF，然后更改缩略图。我遇到的问题是，在新页面重新加载时，第一次插入新的PDF块时，模型里没有导入样式。如果你删除它并添加新块，它就会生效。你可以通过创建列，然后把一个 PDF 块放进去来看到这一点。

smik3

它放入编辑器的缩略图/图片应该会根据容器进行缩放。我看到第一次加载时大小是原始大小，之后所有的方块添加都会正确对应它们被放入的列。如果你看导出代码，还会发现第一次放入一个块时，它不会更新CSS。后续方块会添加

smik3

有几张截图展示了我看到的行为...... <img width=“1021” alt=“截图 2019-11-06 11 32 16” src=“https://user-images.githubusercontent.com/19346508/68294968-394ba600-0089-11ea-941a-e441d3469c6f.png”> <img width=“1003” alt=“截图 2019-11-06 11 32 33” src=“https://use...

artf

我猜这和这个，可能还有这个@artf 嗯，不太行把'modelThumbElement.setAttributes（{“data-gallery”：fileName}）;改成“addAttributes”似乎能解决问题，但我不确定到底发生了什么（我本以为“错误”的行为会一直存在，而不仅仅是第一次）。我稍后会调查这件事

查看详情

#23822019年11月6日作者 adityaMurarka3 个回答

3 个反应

导入基本模块

大家好，我正在用 grapesjs 编辑器构建一个项目，我想让用户能够轻松地用编辑器搭建他的网站。为此，我希望 deafult 能提供尽可能多的 *块来帮助他完成。无论我想要什么都不在，我打算自己构建它们。基本上， grapesjs 有几个预设，每个都有自己的块，其中一些是共同的。我想把所有这些块导入我的项目。那么，有没有办法做到这一点？提前感谢大家。

adityaMurarka

你好！你可以指定你想要的[插件]（https://grapesjs.com/docs/modules/Plugins.html）列表：谢！嗨，pouyamiralayi，我试过你的方法，但没用。当我尝试导入GrapesJS通讯预设时，我收到了14个块，导入GrapesJS预设网页时，我收到了9块，但导入两个时，我仍然只收到14块，而不是全部。也无法导入GrapesJS MJML块。我是不是哪里做错了，或者你知道其他什么方法？

pouyamiralayi

@adityaMurarka我明白问题所在，我猜当他们聚在一起时会有些冲突！撇开“MJML”不谈，这是我做的（它只掉落了几个物品）：请注意条目的顺序，我还试着加上“MJML”，但似乎覆盖了其他内容！请考虑在期刊标题中添加[BUG]词。

adityaMurarka

@adityaMurarka我明白问题所在，我猜他们聚在一起时会有些冲突！撇开“mjml”不谈，这是我做的（它只掉落少数物品）：请注意条目的顺序，我还试着加上“mjml”，但似乎覆盖了其他内容！请考虑在期刊标题中添加[BUG]词。 @pouyamiralayi非常感谢你的帮助!. 这对两个插件都有效。 @artf 你能帮忙做一下MJML预设插件吗？

查看详情

#23812019年11月6日作者 ColinTenaguillo3 个回答

3 个反应

增强

编辑器里能添加信息模态吗？

你好，我想在 Grapejs 编辑器里添加一个可点击的问号，这样我们就能向用户提供该特定规格的具体信息。 ![图片]（https://user-images.githubusercontent.com/36203690/68286437-65fbbf80-0081-11ea-9e47-ba366c822984.png）它会打开一个模态，包含我们在向扇区添加该属性时能提供的所有信息。就像你在网页演示里做的那样。 ![图片]（https://user-images.githubusercontent.com/36203690/68287251-b9bad880-0082-11ea-94e9-429c2477e1cc.png）

artf

目前没有关于扩展/更新样式管理器属性的文档（我刚意识到像 [grapesjs-style-filter]（https://github.com/artf/grapesjs-style-filter）和 [grapesjs-style-gradient]（https://github.com/artf/grapesjs-style-gradient）这样的插件，但还不够），说实话，我目前做的（作为公共 API）并不够稳固，我不喜欢它。我希望能达到[自定义特质]（https:/...

ColinTenaguillo

这是我今天做的，做了一些修改： ![ezgif-3-c8ae3AAA7DC0]（https://user-images.githubusercontent.com/36203690/68382629-66b15600-0154-11ea-9add-2a5bebcac89e.gif）这是我想要的外观，现在我只需要想办法把我想要的内容放进模态里

ColinTenaguillo

嘿，我怎样才能用我的修改发布我的分支，针对拉取请求？ “''js export default Backbone.View.extend（{ 模板（model） { const pfx = this.pfx; 返回” <div class=“${pfx}label”> ${this.templateLabel（model）} </div> <div class=“${this.ppfx}fields”> ${this.templateInput（model）} </div>...

查看详情

#23802019年11月6日作者 varadero3 个回答

1 个反应

支持页面内容的多种语言

我们需要的是创建一个页面，但将文本内容翻译成多种语言。想象一个非常简单的示例，只有一个文本块写着“Hello”——我们不想强迫用户创建另一个页面，里面有同样的文本块，用不同的语言表达同样的内容。想象一下，页面必须翻译成10种语言，而页面有20个文本块——要用不同文本克隆并维护包含相同组件的页面克隆会太困难（新增文本字段需要在每个克隆中添加，而这没人愿意做）。有没有什么办法可以用当前的 GrapesJS 实现这一点，比如一个下拉菜单，可以在不同的“集合”文本内容之间切换，让用户可以选择一种语言，然后去更改该语言的文本内容，或者他想要的任何组件？我曾考虑在 StoreManager 的“store”函数中存储“data”对象，但如果...

varadero

关闭的 s 复制品 https://github.com/artf/grapesjs/issues/2342

pouyamiralayi

@varadero i18n 模块在 [路线图]（https://github.com/artf/grapesjs/issues/74#issue-222570799）干杯！

varadero

@pouyamiralayi 但那里提到的 i18n 不就是个模块，可以让你翻译 GrapesJS 本身，而不是用户创建的内容吗？

查看详情

#23792019年11月5日作者 gentritabazi2 个回答

2 个反应

加载前更新内容

我在Laravel里构建了一个CMS，用GrapesJS让页面构建器变得完美，我只为“帖子”创建了一个组件，这样用户可以选择类别，限制帖子数量。选择或更改限制或类别后，会向后端请求显示JSON 数据，然后我会附加到GrapesJS。我通过 GrapesJS 的命令将所有页面内容保存到数据库：“editor.store（）.html”'' 现在我该如何从数据库中从构建器中选中的那个类别（图片1和图2）加载新帖子。因为GrapesJS只给我显示html代码。 [组件图片1][1] [组件图片2][2] 用于逐页加载页面内容的代码组件代码： [1]：https://i.stack.imgur.com/OUrHm.png [2]：h...

artf

@gentritabazi01 给你 “''js if（data.status == '成功'） { component.set（'content'， data.html）; } ``` 你可以用“component.components（data.html）”，这样会用服务器返回的新内容替换

pouyamiralayi

@gentritabazi01据我所知，依赖编辑器存储来做自定义数据层逻辑并不是个好主意。我通过 GrapesJS： editor.store（）命令将所有页面内容保存到数据库.html 你可以使用：上面的代码可以放在你的模型或视图定义的初始化钩子里。这样你就有一个更容易解析的对象列表。干杯！

查看详情

#23782019年11月5日作者 varadero3 个回答

0 个反应

在样式管理器中修改全局CSS

我们希望实现以下目标：用以下类标记我们的块HTML元素：添加一些定义CSS类的样式，如：使用 GrapesJS 风格管理器，我们希望更改上述 CSS 类，以便设置“容器背景色”，可以更改“.my-container” 规则的“背景色” 我们为什么要这样做？我们希望页面能使用某种“主题”，用户可以更改——我们不希望用户点击元素来更改样式。更重要的是——我们想从样式管理器中移除几乎所有内容——对用户来说，更改这些技术设置太复杂了——期望用户花时间调整阴影、边界半径等是不现实的。我们希望为用户简化造型。假设在这些设置中有“主色”和“次要色”——所有必须带有“主色”的 HTML 元素都会被标记为“...类=“原色......”，其他则标...

artf

我们想从风格管理器中移除几乎所有内容你可以在风格管理器中更改显示内容：https://grapesjs.com/docs/getting-started.html#style-manager 而且它的工作原理是基于画布中选择的内容假设在这些设置中有“三原色”和“次要色”——所有必须使用“主色”的 HTML 元素都会被标记为......类=“原色 ...还有一些会被标记为......class=“secondary-color” ...，用户会进入“主题”设置，看到“原色”...

amenk

这非常有趣！@varadero 你成功了吗？有没有代码可以分享？

varadero

这非常有趣！@varadero 你成功了吗？有没有代码可以分享？我们在初始化 grapesjs 时提供了 CSS。CSS 是在别的地方创建的，不是在 Grapesjs 构建器里。

查看详情

GrapesJS 问题

浏览所有主题