PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 1,399 个问题
🔍 outdated我按照文档操作，已经上传了图片。 当我拖动图片块（使用新闻通讯预设）并从资源中选择图片时，画布上会添加一张空白图片。我需要双击画布上的图片，然后重新选择图片才能显示。 我需要做些什么来接线吗？我尝试添加“window.editor = editor;”，但没解决问题。 谢谢你的帮助！
artf
...它会在画布上添加一张空白图像 无法复现。有现场演示吗？或者至少有个屏幕录制或动图？
hillelcoren
我做了一个基础示例，能用，肯定是我的代码出了问题。
hillelcoren
抱歉占用你的时间！ 如果有人在我这种情况下遇到这个问题，那是因为我用canvas：drop事件来调整HTML（用来执行邮件合并）。我通过检查用户是否丢弃图片来解决这个问题，这种情况下我们保持HTML原样。
我正在尝试启动这个集成，但我觉得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]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
你好， 我对画布样式有些疑问，这次我的配置就是这样的。 “''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]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
我需要一个函数自动复制视图代码组件中的 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]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
你好， 首先，这正是我长期以来一直在寻找的，感谢你的努力。 接下来，我想在排版|中添加一个字体。下拉列表。 我该如何添加一个？ 注意：我看到你建议添加新样式表的帖子，但我只希望它能根据排版选项应用。我还看到你添加了对“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添加了额外的字体，比如这样： 我猜用这种方法，我需要通过样式表把实际字体导入编辑器才能正常工作，还是你提供了其他机制？
我已经实现了一个新插件，在导出窗口里增加了另一个按钮，效果很好。但是当页面显示时，它和现有的“导出ZIP”按钮之间没有空格。 我该如何用 grapesjs 的方式添加空格？是不是只是想弄清楚要调整哪些html dom元素属性？..比如，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按钮不受我们控制，我们该如何为它加上按钮边框，随后又加上我们自己的......比如说，有圆角之类的？
我没看到任何可以创建表格的基本模块。即使我写了块，也无法编辑文本。 块状示例 有了这个选项，我无法修改每个TD的内容，也没有给我复制列或行的选项。 你打算@artf做一个桌块？
chiqui3d
用一段包裹TH正文效果很好。 但正如我之前说的，你打算添加自定义表格选项，比如边框和桌面颜色。
ionic666
@chiqui3d 嗨，你能告诉我怎么应对桌块问题吗
lock[bot]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
我重新声明了一种链接类型，像这样： 当我的按钮<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]
由于关闭后没有近期活动，该帖子已被自动锁定。请为相关漏洞开启新一期。
我想实现的目标： 我有一段代码需要在组件“丢弃”时运行。我把“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） => { 如果...
在我的使用场景中，我尝试动态更改存储并加载远程存储管理器使用的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我没注意到，可以做到这一点？