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

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#33552021年3月22日作者 Franci5co5aoco3 个回答
0 个反应
提问文档typescript

Add a title attribute to the Layers panel elements

你好@artf， 当我在图层面板中嵌套多个元素时，由于图层面板宽度不够大，有些元素名称会被截断，我知道自定义可调整大小面板可以解决，但大多数用例中添加标题属性就足够了。 ![截图 2021-03-22 14 50 53]（https://user-images.githubusercontent.com/23215166/112005599-338e1d80-8b23-11eb-9596-8e436734d383.png） 一个提示（标题）对用户会很有帮助。 grapesjs/src/navigator/view/ItemView.js 也许在跟随行添加标题属性能解决问题吗？ https://github.com/artf/gra...

artf

是啊，为什么不呢......你想创建一个永久纪录吗？:)

Franci5co5aoco

@artf当然，谢谢！ 我要做公关......

GJSBlock

谢谢你举报，@Franci5co5aoco。 关于FEAT：在图层面板元素中添加标题属性，这是个很好的问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'s...

查看详情
#33522021年3月19日作者 harsh2014 个回答
1 个反应
提问组件缺陷typescript

如果标签主体为空，默认内容在使用setComponents时会入

版本： 最新 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？[X] 是的[ ] 不 预期的行为是什么？ 带有空体的组件不应被填充默认内容。 目前的行为是什么？ 当我们创建一个空节点并用 setComponents（） 作为输入传递给 GrapesJS 时，如果标签主体为空，扩展 TextNode 的组件会添加默认内容。 详细描述那个漏洞** 当我们创建一个空节点并用 setComponents（） 作为输入传递给 GrapesJS 时，如果标签主体为空，扩展 TextNode 的组件会添加默认内容。我们有用例，有些标签可能是空的。有没有办法通过 setComponents 插入禁用它？...

artf

你在组件定义中定义了默认的“内容”，所以空的定义会用它作为默认。 只需将那个“内容”从组件定义中移动到“段落”块。

harsh201

@artf 有人能帮帮忙吗？

harsh201

谢谢@artf！完全忘了要在方块层面添加。

查看详情
#33472021年3月18日作者 xinnai4 个回答
0 个反应
提问style-manager组件文档typescript

How can I get Uncompressed JS code for me to edit?

你好，感谢你帮我解答这个问题。我想用自己的JSEditor来编辑html、css和js。 1、首先，我用 'getHtml'， 'getCss'， 'getJs' 在我的 JSEditor 里显示代码。我发现JS代码是压缩的。我怎样才能获得无压缩代码？ 我用的是'编辑器'。CodeManager.getCode（model， 'js'）'，而且它也是压缩版的。我看了源代码，也不太明白为什么 CodeManager 能显示无压缩代码。 2、还有一点是：当我设置JS代码，比如“document.getElementById（”wrapper“）.style.background = ”red“'时，并做以下操作： 'const htm...

artf

组件用JS的“脚本”依赖于你源代码中的同样代码。比如，如果你创建了一个插件，然后用webpack/babel构建它，组件就会打印构建结果。我想你可以为你的“脚本”组件单独创建 js 文件，然后让捆绑器忽略那些文件。

xinnai

@artf 你好，我不确定你是否理解我的问题。 我想在我自己的 js 编辑器里编辑 js 代码，首先我用 'getJs（'） 从你的编辑器里设置了 js 代码，但你demo.html里看起来是这样的： ![1444126130]（https://user-images.githubusercontent.com/23135336/112428513-3b91cb80-8d76-11eb-91de-ce51a8500203.jpg） 这些代码都是压缩的。我想要像这样一个未压缩...

artf

“autoBeautify” 是传递给 CodeMirror 的一个选项，但无论如何，它可能会美化代码，但不会解压，因为代码本身就是这样存储在组件里的

查看详情
#33432021年3月17日作者 neilkyoung4 个回答
0 个反应
缺陷提问typescript

Illegal Invocation error when using keepEmptyTextNodes

版本： 0.16.44 你能重现演示中的bug吗？[x] 是的[ ] 不 设置'编辑器'。Parser.getConfig（）.keepEmptyTextNodes = true;' 在控制台中，然后尝试将表单拖入一个两列插件。 预期的行为是什么？ 详细描述那个漏洞 据我观察，当定义了可丢弃属性时，“keepEmptyTextNodes”会抛出带有 Sorter.js 的错误。当它试图确定有效性时，最终会先获得文本节点，导致匹配比较失败（文本节点不支持匹配）。 目前的行为是什么？* 问题区域似乎是下面Sorter.js 这是因为tempModel拥有文本节点，可以包裹块中定义的内容。当移除它以获得 dropModel 时，我们得到...

artf

嗯，是的，这很合理，也许我们应该选第一个“有效”元素（也就是真正支持“匹配”的那个）。 但我也很好奇你关于使用“keepEmptyTextNodes”的理由是什么。几天前我其实还在考虑把它😂拆掉

neilkyoung

@artf 我们用于网页创作的系统实现了这一点。不过现在我们已经说服他们关闭了这个功能，感谢你上面的评论:-D

artf

太好了，那我就关上了。如果你那边的变更有问题或不同，请告诉我

查看详情
#33422021年3月17日作者 RutujaBadbe2 个回答
0 个反应
组件提问缺陷画布typescript

JQuery not working for script in component

嗨！ 我尝试过在Canvas和index.html中添加jQuery。 我正在这样用canvas添加它—— 'canvas = 编辑。画布; const script1 = document.createElement（'script'）; script1.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; canvas.getDocument（）.head.appendChild（script1）;' 在HTML页面里我把它加成了script标签——'<script src=“https://code.jquery.com/jquery-3.6.0.min.js”></scr...

artf

这里你可以看到如何正确加载依赖 https://grapesjs.com/docs/modules/Components-js.html#template-related

GJSBlock

谢谢你举报，@RutujaBadbe。 错误 ReferenceError： $ 未定义 发生在 Canvas 尝试访问属性时，尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法： 如果你控制代码，可以用空检查包裹调用： “JavaScript 如果（component && typeof component.getDocument === 'function'） { 你的准则 } ``` 根本原因分析： Canvas 在调用 'getDocu...

查看详情
#33412021年3月15日作者 HeyWrecker4 个回答
2 个反应
提问组件typescript

Social Media Group - Facebook

你好， Facebook社交媒体组件是用来提供指向企业或组织Facebook页面的链接，还是专门用来分享与你时间线相关的内容？看起来是后者，尽管我觉得这有点反直觉，因为很多邮件的页眉和页脚只是提供社交媒体账户的链接。我只是想确认一下它的设计方式，以及如果它确实按设计正常运行，有没有什么变通方法或计划改变这种行为。 此致， 里克

artf

我猜你就是在找这个 https://github.com/artf/grapesjs-mjml

HeyWrecker

啊，那是我的错，谢谢！

HeyWrecker

作为后续，我确认了Instagram社交部分确实链接到了Instagram的主页。而Facebook选项则不链接到Facebook页面。

查看详情
#33402021年3月15日作者 xinnai3 个回答
1 个反应
提问typescript常规

当我把 grapesjs 放进分割面板时，GJS-CV-tools 位置错误

你好，感谢你的工作。我有个问题。我想做一个类似Codepen的视图，并且想让Grapesjs视图可以上下拖动。但当我拖动它时，工具会去错位置，鼠标悬停高亮元素的位置也错了。我尝试过 splitjs 和其他开源代码，但总是遇到这个问题。 你能帮帮我吗？非常感谢!! https://user-images.githubusercontent.com/23135336/111138227-a5fa7d00-85ba-11eb-9393-0f3307322a56.mp4

Ju99ernaut

你可以试试运行 'editor.refresh（）'

xinnai

@Ju99ernaut 非常感谢，你救了我一命！

GJSBlock

谢谢你举报，@xinnai。 关于我把 gjs-cv-tools 放在分页时位置错误的问题很棒 grapesjs 。推荐的做法是使用事件驱动 API， GrapesJS 从这里开始： 查看你所处模块的[GrapesJS 文档]（https://grapesjs.com/docs/） 寻找 on() 事件监听者方法。 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： 如果你还卡住了： 分享最小的CodeSandbox复制品 把你已经尝试过的都写进去 提及你的 Grap...

查看详情
#33372021年3月12日作者 wfcheng4 个回答
0 个反应
提问画布keyboardtypescript

问题：使用方向键在Canvas中以绝对定位模式移动方块

你好，我正在为学生开发一个解决方案，让学生通过Grapejs编辑器（类似Canva）制作幻灯片讲述他们的高中经历，并且已经将编辑器配置为“绝对”模式，效果非常好。 但我似乎找不到用方向键在编辑器里移动掉落方块的方法。 我知道自定义键位绑定，会考虑添加这个功能，但只是想看看我是不是遗漏了什么，有没有其他更好的选择。

artf

不，不幸的是，在这种情况下，自定义键位映射是唯一的解决方案。 你应该直接获取选中的组件并更新它的样式。

michaelhofer

我找到了一个可行的解决方案如下： 命令的添加如下： “moveSelectedElements”方法只需以下操作： 不过，当用方向键移动元素时，画布也会滚动，这是库巴默认的行为。 我们如何防止使用keymap（'e.preventDefault（）'））的默认传播？这应该是自动发生的，还是有办法配置？

sathudeva7

keymaps.add（'ns：my-keymap'， '⌘+s， ctrl+s'， 'some-gjs-command'， { 阻止默认浏览器操作 防止：正确， });

查看详情
#33362021年3月12日作者 fahad1572 个回答
0 个反应
文档typescript常规

Single click text edit

让文本可编辑需要大量点击，我们能让文本字段在一次点击中可编辑吗？我知道，拖动方块时单击会很烦人，这已经很常见了，但就我的情况来说，我想只编辑单击，如果可能的话请指导一下。

artf

https://github.com/artf/grapesjs/issues/3146#issuecomment-733687439

GJSBlock

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

查看详情
#33352021年3月11日作者 zachsnoek3 个回答
0 个反应
组件提问style-managertypescript

Creating trait with Style Manager property UI

我有一个组件使用了“background-url”样式管理器属性： 我想重用样式管理器中显示的这个UI，作为“设置”下显示的背景URL特性： ![截图 2021-03-11 12：28 27 PM]（https://user-images.githubusercontent.com/26049962/110852079-be8b3000-8266-11eb-9e59-2802744c9e4a.png） 有没有可能让样式管理器的属性像特质一样表现，并显示在“设置”部分，还是我需要用这个界面创建一个新的特质？ 谢谢。

artf

遗憾的是，目前还无法实现，但计划很快添加一个新的UI模块，应该可以重复使用UI元素

zachsnoek

：+1：谢谢！

GJSBlock

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

查看详情

浏览所有主题