GrapesJS 问题

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

找到 1,399 个问题

🔍 outdated
#8612018年2月12日作者 hillelcoren3 个回答
0 个反应

帮助将图片添加到画布中

我按照文档操作,已经上传了图片。 当我拖动图片块(使用新闻通讯预设)并从资源中选择图片时,画布上会添加一张空白图片。我需要双击画布上的图片,然后重新选择图片才能显示。 我需要做些什么来接线吗?我尝试添加“window.editor = editor;”,但没解决问题。 谢谢你的帮助!

artf

...它会在画布上添加一张空白图像 无法复现。有现场演示吗?或者至少有个屏幕录制或动图?

hillelcoren

我做了一个基础示例,能用,肯定是我的代码出了问题。

hillelcoren

抱歉占用你的时间! 如果有人在我这种情况下遇到这个问题,那是因为我用canvas:drop事件来调整HTML(用来执行邮件合并)。我通过检查用户是否丢弃图片来解决这个问题,这种情况下我们保持HTML原样。

#8602018年2月12日作者 vrudikov3 个回答
0 个反应

无法自机整合GrapesJS + Material Design Lite

我正在尝试启动这个集成,但我觉得MDL框架运行不了,因为JS组件根本没有初始化 这是[plunker](https://plnkr.co/edit/Be2Xcv?p=preview) 我查了GrapesJS和MDL的代码,似乎都正常。我尝试了几种初始化MDL JS的方法:canvas init,git script 在 GJS div 内容后,但都没成功 非常感谢任何帮助

artf

你好@vrudikov JS 似乎加载正常(你可以从对话等其他 JS 元素中看到),但 MDL 似乎没有自动初始化。我觉得你只需要找到如何调用它的init方法就行了

vrudikov

对于所有想要 Material + GrapesJS 集成的人来说,只需使用 [material-components-web](https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md)

lock[bot]

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

#8592018年2月12日作者 hibuno2 个回答
2 个反应

更换画布风格

你好, 我对画布样式有些疑问,这次我的配置就是这样的。 “''js VAR Editor = Grapesjs.init({ 容器:“#gjs”, 画布:{ 风格:['/builder/css/builder-desktop.css'] } }) ``` 默认情况下,我用名为“builder-desktop.css”的CSS作为默认画布样式。然后我想,如果我更改设备管理器并选择移动端,我可以把画布样式改成“builder-mobile.css”。 非常感谢

hibuno

你好, 算了,我解决了这个问题,只要在更改时加事件就行。 “JavaScript editor.on('Change:device', function(e) { if (e.attributes.device !== 'Desktop') { editor.setStyle('/builder/css/builder-mobile.css') } 否则 { editor.setStyle('/builder/css/builder-desktop.css') } });...

lock[bot]

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

#8582018年2月12日作者 poirin3 个回答
2 个反应

如何在视图代码中自动提取 html/css 代码?

我需要一个函数自动复制视图代码组件中的 html/css 代码。有预定义的功能吗?还是我必须直接实现这个?

hibuno

你好@poirin, 我有解决办法,上周我也遇到了这个问题,我尝试保存当前的HTML和CSS,而不手动复制。 下面是我的代码。 --- 添加自定义面板,例如,左上键(保存键)。 “JavaScript /*创建保存按钮@type {弦} / panelManager.addPanel({ id:“customPanel”, 可见:真, 按钮 : [{ ID:“微笑”, className : 'fa fa-save', attributes : { title: 'Upda...

artf

如果你说的是存储模板、数据库或其他远程终端,你可以设置内置的RemoteStorage,看看这里的#778

lock[bot]

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

#8572018年2月11日作者 webnoob3 个回答
3 个反应

:我如何在排版中添加自定义字体 |字体下拉菜单?

你好, 首先,这正是我长期以来一直在寻找的,感谢你的努力。 接下来,我想在排版|中添加一个字体。下拉列表。 我该如何添加一个? 注意:我看到你建议添加新样式表的帖子,但我只希望它能根据排版选项应用。我还看到你添加了对“atRules”的支持,但我觉得这不会在字体下拉菜单里增加选项,而且我也找不到相关文档...... 感谢你的时间。

IceCrystal0k

这是我如何向样式管理器添加新字体的方法: 在初始化后调用这些函数,或者在editor.on('load', ()=> { ....addFonts() ... })如果你用的是像 Newsletter 预设这样的预设,加载后会修改样式管理器。 另外,在 canvas 中注入所用字体,在 init 函数中使用 canvas 属性:

artf

你好@webnoob目前唯一的方法是通过初始化对象添加它。以下是演示片段 https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1045-L1062 如你所见,我没有指定任何字体家族,只是更新了它的名称 “''js buildProps: ['font-family', ...], 性质:[ { 名称:“Font”,属性:“font-family”}, ...

webnoob

谢谢你的分享。根据你上面给我展示的内容,我用StyleManager添加了额外的字体,比如这样: 我猜用这种方法,我需要通过样式表把实际字体导入编辑器才能正常工作,还是你提供了其他机制?

#8552018年2月9日作者 kewilson3 个回答
2 个反应

导出窗口里新按钮没有空格

我已经实现了一个新插件,在导出窗口里增加了一个按钮,运行正常。然而,当页面显示时,它和现有的“导出ZIP”按钮之间没有空格。 我该如何用葡萄的方式添加空格?是不是只是想弄清楚要调整哪些html主导元素属性?..例如,https://www.w3schools.com/jsref/domobjall.asp

ryandeba

你好@kewilson, 如果我理解没错,我猜设置左边距而不是左边填充会好得多......这个[截图](https://imgur.com/a/Fx1XL)接近你想要实现的效果吗?如果是这样,你可以把“button.style.paddingLeft = ”30px“的代码替换成”button.style.marginLeft = “10px”。或者你也可以用CSS来实现(创建一个自定义CSS文件,grapes.min.css后立即加载): '.gjs-mdl-conten...

ryandeba

你好@kewilson, 没有实时代码示例(比如jsfiddle演示)这部分有点难处理,但我看到一些问题:'让按钮=编辑器。Modal.getElementsByTagName(“button”) ||{};`这很可能是因为'编辑器'Modal' 不是 dom 元素,因此 'getElementsByTagName' 不是一个有效的方法。“编辑。Modal.getContentEl().getElementsByTagName(“button”)'应该能用。这里默认用空物体...

kewilson

好,所以 button.style.paddingLeft = “30px”;可以,但我注意到按钮所在的边框区域无法区分两者......也就是说,每个按钮的文字周围没有按钮边框。因为导出ZIP按钮不受我们控制,我们该如何为它加上按钮边框,随后又加上我们自己的......比如说,有圆角之类的?

#8542018年2月9日作者 chiqui3d3 个回答
0 个反应

桌块

我没看到任何可以创建表格的基本模块。即使我写了块,也无法编辑文本。 块状示例 有了这个选项,我无法修改每个TD的内容,也没有给我复制列或行的选项。 你打算@artf做一个桌块?

chiqui3d

用一段包裹TH正文效果很好。 但正如我之前说的,你打算添加自定义表格选项,比如边框和桌面颜色。

ionic666

@chiqui3d 嗨,你能告诉我怎么应对桌块问题吗

lock[bot]

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

#8522018年2月9日作者 JulyanoF2 个回答
0 个反应

如何更改<a>特质内容?

我重新声明了一种链接类型,像这样: 当我的按钮<a>('')被创建时,它的创建方式如下: '<a class=“btn botao-roxo”>Botão</a>' 我想知道如何更改这个(Botão)特质的内容。

JulyanoF

正是我想要的: [定义新的特质类型](https://github.com/artf/grapesjs/wiki/Traits#define-new-trait-type)

lock[bot]

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

#8502018年2月8日作者 austinbiggs3 个回答
0 个反应

:组件:移动事件

我想实现的目标: 我有一段代码需要在组件“丢弃”时运行。我把“dropped”加引号,因为TLB移动结束时它需要触发。 作为用户,如果我点击工具栏中的移动图标,完成组件移动后,我需要代码启动。我尝试了不少事件都没成功:stop:tlb-move、change:canvasOffset、focus和move-comp;但都没有成功。 我加载的编辑器内容包含一个Flexslider实例(它会创建额外的标记/元素样式),当用户移动Flexslider的容器时,这个实例就会失效。为了解决这个问题,我希望能立即重新初始化滑块,这样它就不会坏掉。 还有其他事件可以用来运行我的代码吗?我避免使用“component:updated”,因为它触发...

artf

你试过用 [Components-&-JS](https://github.com/artf/grapesjs/wiki/Components-&-JS)吗?

maxtacco

我也遇到同样的问题——我无法确定组件上的某个事件来监听移动结束时的信号。

maxtacco

所以,我唯一能让它合理运行的方法是监听组件模型的 init() 方法中触发的“selectComponent” 事件 https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168: “JavaScript editor.on('change:selectedComponent', (editor, model) => { 如果...

#8492018年2月8日作者 ajwootto3 个回答
1 个反应

能否卸载并摧毁编辑器实例或重新加载配置选项?

在我的使用场景中,我尝试动态更改存储并加载远程存储管理器使用的URL。据我所知,如果我直接更改配置,编辑器不会识别并使用任何更改,比如说, “编辑。Config.storageManager.storeUrl = 'blah' 编辑器已经初始化后。 为了解决这个问题,我尝试通过程序化移除目标DOM元素并调用初始化来卸载编辑器。然而,init 函数似乎创建了多个编辑器实例。我注意到GrapesJS.editors数组在跟踪这些实例,所以我尝试把它设置为空,希望实例能被垃圾回收。然而,即使在这种情况下,编辑器的事件处理程序似乎仍会在之后触发,从而保存错误的数据。 理想情况下,我希望能用某种解构器方法销毁编辑器(如果还没有的话),或者强...

maxtacco

您可以随时访问RemoteStorage并更新网址: “JavaScript const RemoteStorage = 编辑器。StorageManager.get('remote'); RemoteStorage.set('urlLoad', [urlLoad]); RemoteStorage.set('urlStore', [urlStore]); ```

arthuralmeidap

@ajwootto, 你可以创建一个自定义的远程存储,并在里面应用你自定义的保存/更新逻辑。 请查看这个链接:https://github.com/artf/grapesjs/wiki/API-Storage-Manager

ajwootto

这两个选项大概都行得通,但我忘了提,有些情况下我想用预先指定的组件和样式重新初始化编辑器(比如在初始化中传递),而不是从远程存储加载,但在其他情况下,我希望初始内容只来自远程存储。这种情况发生在同一页面上,编辑器的内容需要被调换。是不是有什么API我没注意到,可以做到这一点?

浏览所有主题