PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#37132021年8月18日作者 shkhalid3 个回答
1 个反应
文档组件提问typescript

Stored components with script can not be rendered properly

我在尝试保存一些组件（包括一些脚本）并重新加载页面时遇到了一些问题，组件渲染不正确。显示的是空盒子。 举个例子：当我尝试从“jvas28/grapesjs-echarts”保存图表组件并重新加载页面时，会出现这种情况 <img width=“1438” alt=“截图 2021-08-18 下午4点20分” src=“https://user-images.githubusercontent.com/8138036/129891078-2191094d-d735-4178-9859-588f774120b6.png”> 这是示例应用 https://codesandbox.io/s/cranky-wescoff-93pxd?fil...

shkhalid

谢谢@artf！ 最后我终于弄明白了 问题出在“tagVarStart”和“tagVarEnd”。评论完后它开始起作用了

artf

@shkhalid谢谢你的报告，但在这个仓库里，你应该打开可重现的问题，不使用外部插件，因为问题可能出在插件本身。至少就我对核心的判断来看，如果按照这个[指南]（https://grapesjs.com/docs/modules/Components-js.html）正确实现，组件中没有问题。

GJSBlock

谢谢你举报，@shkhalid。 关于用脚本存储的组件无法正确渲染的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件...

查看详情
#37072021年8月16日作者 denisoed1 个回答
0 个反应
提问组件增强typescript

Is it possible to set up the rendering of Vue components?

GrapesJs 是最好的页面构建器！：心： 抱歉，我是GrapesJs的新手。 我可以支持Vue组件吗？

GJSBlock

谢谢你举报，@denisoed。 关于是否可以设置Vue组件的渲染？的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细...

查看详情
#37062021年8月15日作者 momu-20161 个回答
0 个反应
style-manager组件typescript

Css in block can not be removed when block has been removed

Grapesjs 版本 v0.16.45，我尝试使用 countdown 插件（[https://github.com/artf/grapesjs-component-countdown]（https://github.com/artf/grapesjs-component-countdown）），当我删除整个组件时，一切都运行良好 通过工具栏，html 和组件被移除，但样式和 css 仍然在本地存储中。 让我困惑的是，演示演示中整个组件都被删除了，CSS 也被删除了。同样，我自己一些模块中的 CSS 也无法删除。 请帮我指出问题所在。 非常感谢！

GJSBlock

感谢你在2016年@momu报告此事。 感谢你分享关于CSS在被移除后无法移除的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么：** 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识别和优先排序修复。...

查看详情
#37022021年8月13日作者 throne19861 个回答
0 个反应
style-manager提问文档画布typescript

HTML head tags not added to the dom

我正在使用 [grapesjs library][1] 来构建网页，我根据文档添加了一个自定义块 [这里][1]，当我拖动块到 canvas 时，HTML 数据会被添加，但 '<head></head>' 标签是空的， 这是我的代码 function tempOnePlugin（editor） { 编辑。BlockManager.add（'my-first-block'， { 标签：'<i class=“fa fa-clone”></i>'， 内容：'<！DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>Vmmerce模板</title> <me...

GJSBlock

谢谢你举报，@throne1986。 关于*HTML头部标签未添加到dom的问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...

查看详情
#36992021年8月12日作者 diegoSenra4 个回答
0 个反应
组件缺陷画布style-managertypescript

Cell hovering randomly displaces from actual cell

嗨！ 我在公司的一个项目中使用 grapesJs 邮件编辑，配合Newsletter插件。 一切都运行得很好，除了我无法解决的这个bug： 有时候，当我在画布里拖动方块时，单元格的悬停会被打乱。最大的问题是这种行为完全随机，有时会发生也可能不会，但一旦发生真的很烦人。 唯一的模式是：只在放块后且独家地在画布上进行拼接如果我调整画布大小以适应移动端/平板，画布会恢复正常（即使切回桌面视图——但放置新方块时可能会再次发生）位移仅发生在垂直方向（随机向上或向下——通常是向上——且可以是任意位移大小）单元格选项菜单（选择父单元、移动组件、擦除单元格等）也会被移位，方式相同。 编辑器插入在一个内容较多的页面（侧边栏和页眉）。我不得不更改一些...

artf

你用的是最新版本吗？

diegoSenra

使用压缩后的0.10.7

artf

抱歉兄弟，这是4年前的版本，帮不上忙。 你试着更新了吗？

查看详情
#36942021年8月11日作者 codingmachine161 个回答
0 个反应
组件提问画布typescript

Dynamic Changes vanish when load from DB

@artf 这是我的代码，我在 select change 时在 div 里添加 test init（） { this.listenTo（this，“change：noOfLinks”，this.getInfoLinks）; }, getInfoLinks（） { let canvasDoc = 编辑器。Canvas.getDocument（）; canvasDoc.getElementById（“infoLinks”）.innerHTML = “test text ”; editor.trigger（“change：selectedComponent”）; 编辑。TraitManager.getTraitsViewer（）.re...

GJSBlock

谢谢你举报，@codingmachine16。 关于问题：动态变更在从数据库加载时消失，这个问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...

查看详情
#36932021年8月11日作者 GaikwadShubham3 个回答
1 个反应
style-manager提问组件缺陷typescript

AdoptStylesheet not supported in grapesJS

版本： 你可以在控制台输入“grapesjs.version”获得版本 0.17.22 你能重现演示中的bug吗？[x] 是的[ ] 不 预期的行为是什么？ 应该能以类似 grapesjs 容器外的方式看到网页组件 详细描述那个漏洞 Grapesjs 无法从可构造样式表渲染 CSS。 目前的行为是什么？ 能够在不样式的情况下加载组件 你能附上截图、截屏或实时演示吗？**[x] 是的（https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark）[ ] 不 CodeSandbox 入门模板 https://codesan...

artf

这个问题是由于 AdoptStylesheet 的工作方式，类似于 lit-element 的这个（https://github.com/lit/lit-element/issues/1139）。 基本上，你不能在多个文档中共享同一个CSSStyleSheet，所以必须手动重新创建，下面是一个自定义元素的代码，以支持adoptedStyleSheets。 “''js 编辑。Components.addType（'custom-element'， { isComponent：...

vasicvuk

有没有什么解决方案可以让lit-element components 3.X配合grapesJS使用？

GJSBlock

谢谢你举报，@GaikwadShubham。 AdoptStylesheet 在 grapesJS 中不支持的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSan...

查看详情
#36902021年8月10日作者 throne19861 个回答
0 个反应
提问style-manager文档typescript

AppendTo not working with trait manager

我有一个基本的例子如下 HTML <div id=“gjs”> <div class=“traits-container”></div> <div style=“padding： 25px”>Hello World!!</div> </div> <h1> 附加特质管理器 </h1> <div class=“traits-container”></div> J const editor = Grapesjs.init（{ 容器：“#gjs”， fromElement： true， 身高：“100%”， storageManager： false， traitManager： { appendTo： document.querySel...

GJSBlock

谢谢你举报，@throne1986。 关于附进“不使用特质经理的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something cha...

查看详情
#36882021年8月10日作者 mingxin-yang2 个回答
0 个反应
组件提问style-managertypescript文档

How to customize a component

我 https://grapesjs.com/docs/modules/Components.html#define-custom-component-type 读了这份文档，并尝试编写以下代码。我想让“mj-body”无法删除： 但我看不到效果，请帮帮我

artf

这样做 'isComponent： el => （el.tagName ||''）.toLowerCase（） === 'mj-body'，'

GJSBlock

谢谢你举报，@mingxin阳。 关于如何自定义组件的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'...

查看详情
#36872021年8月10日作者 Joshmamroud4 个回答
1 个反应
keyboard提问缺陷typescript

Keyboard shortcuts/Keymaps not working

版本： 0.17.22 你能重现演示中的bug吗？[ ] 是的[X] 不 我无法在演示中复现，但你可以用以下凭证登录[Documint]（https://app.documint.me）亲自观看：电子邮件： [email protected]： 演示 然后修改模板，试试用“ctrl+z”。 预期的行为是什么？ 应该能使用映射的快捷键（比如 Ctrl+Z），但它们不起作用。 目前的行为是什么？ 键映射是注册的，但它们无法使用。当我运行 'keymaps.getAll（）' 时，会看到所有默认的 keymaps 列表。当我听到键位映射的发射时，我什么都没有。当我通过配置添加自定义键位映射（比如“alt+u”），或者在初始化时添加时，...

Joshmamroud

你说得对，不是React或GrapesJS。事件传播被我使用的[rc-drawer]（https://github.com/react-component/drawer）组件阻止了。@artf谢谢你的帮助，这个问题从一开始就存在。

artf

嘿，@Joshmamroud我们有[代码]（https://github.com/artf/grapesjs/blob/75be5144a95488e557afabeca8ae50da8e15c60a/src/canvas/view/FrameView.js#L432-L444）可以将“keydown keyup keypress”事件传播到父文档，这样可以让keymaps正常工作，但一定要确保不包含任何阻止这些事件传播的代码或组件。

Joshmamroud

嘿，@artf，我觉得这可能被React屏蔽了。有什么建议能重新绑定这些活动听众吗？甚至不确定这是不是正确的解决方案或路径。

查看详情

浏览所有主题