PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 466 个问题
🔍 components我想用像 Element-UI 这样的 UI 框架自己构建样式管理器，快速做出一个美观的界面。但我该如何将属性绑定到选定的组件上？我没看到像“setProperties to an element...”这样的API。你能帮我讲讲怎么做吗，非常感谢!!
RutujaBadbe
#2296 这可能对你有帮助！
artf
我想如果你需要从零开始创建样式管理器，这种方法应该可行 “''js 让targetsToStyle = []; const eventToListen = 'component：toggled component：update：classes change：state change：device'; const sm = 编辑。风格经理; editor.on（eventToListen， （） => { targetsToStyle = editor.getSelected...
xinnai
@artf 这正是我需要的！非常感谢！
我正在努力让 grapejs Vue.js工作，但没有成功，我跟着入门程序操作，但还是没能正常工作。到目前为止，我已经把它添加到了 mounted() 部分，并且已经设置了一些带方块的按钮，可以显示并添加，但 [面板和按钮部分]（https://grapesjs.com/docs/getting-started.html#panels-buttons）一直没成功。 问题总结：使用Vue.js我无法让面板和按钮部分从开始时显示出来。 下面我附上了我目前主要想添加的App.vue文件——概念验证会稍后移到合适的位置。
uchoaaa
看看这个问题，可能会有帮助：https://github.com/artf/grapesjs/issues/275
artf
你好@joshk132说代码看起来不错，你能做一个可复现的演示吗（比如Codesandbox之类的软件）？
joshk132
@artf我已经让面板显示的位置正常工作了，但现在显示不正常了。我不得不做的解决方案是改用下面的代码。基本上我必须把“editor”作为变量，但我在最初的代码里已经去掉了，因为 vue linter 会抱怨。附上了一张图片链接，展示了下面代码的效果，我不太确定具体是什么原因导致了样式问题。 https://imgur.com/GuFqv0o
嗨！ 我尝试过在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...
你好， Facebook社交媒体组件是用来提供指向企业或组织Facebook页面的链接，还是专门用来分享与你时间线相关的内容？看起来是后者，尽管我觉得这有点反直觉，因为很多邮件的页眉和页脚只是提供社交媒体账户的链接。我只是想确认一下它的设计方式，以及如果它确实按设计正常运行，有没有什么变通方法或计划改变这种行为。 此致， 里克
artf
我猜你就是在找这个 https://github.com/artf/grapesjs-mjml
HeyWrecker
啊，那是我的错，谢谢！
HeyWrecker
作为后续，我确认了Instagram社交部分确实链接到了Instagram的主页。而Facebook选项则不链接到Facebook页面。
我有一个组件使用了“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...
版本： 0.16.44 你能重现演示中的bug吗？ [ ] 是的 [x] 不 预期的行为是什么？ 真的，其他任何东西都行 详细描述那个漏洞 我当时正试图将脚本加载到画布中。我第一次尝试是“脚本：[]”，然后遇到了这个PR帖子里提到的同步问题：https://github.com/artf/grapesjs/pull/67 我看到@artf的一个例子展示了另一种用一个叫“components”的属性来实现。这样做会导致JavaScript解析器失效。我不是开玩笑;我发了截图来证明。 还有一点有趣的是：控制台里写着“TAG LOAD”的文字来自我试图加载的脚本。所以......成功了吗？尽管页面因语法“无效”而崩溃。 目前的行为是什么...
KernelDeimos
我有一阵子没用内联“<script>''标签了，也忘了HTML解析器的这个限制。关上这个。
GJSBlock
谢谢你举报，@KernelDeimos。 尝试将脚本加载到Canvas时，可能会破坏JavaScript的问题？？ 似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSa...
你好@artf 我按照文档制作了一种新型资产管理公司 这里（https://codepen.io/abhi_punk81/pen/MWbWzaq） 我创建了类似文档里那种的新类型 我如何在放置自定义图标块后打开那个资产管理器 -： 一开始它没问题，但当我放下图片块后，默认情况下就会出现一个 请你指点一下我，我正在尝试为 Icons One 创建一个新的插件 根据之前提到的问题，我用add command（添加命令）来调用图标组件的comnd，卡住了：双击时怎么更新目标-： “''js const cm = 编辑。指挥; cm.add（'svg-icon'， { run（editor， sender， opts） { const a...
Abhisheknanda1344463
@artf 实现了，并且还能处理大小写不区分 https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov 谢谢！！❤️
Abhisheknanda1344463
嗨@artf不知怎么的我做到了 在组件激活时，我把这个标记为 -： “''js 事件：{ dblclick：“onActive” }, onActive （） { 编辑。AssetManager.render（editor.AssetManager.getAll（）.filter（asset => asset.get（'type'） == 'svg-icon'））; editor.runCommand（“open-assets”， { 目标：This.model， });...
artf
应该和你之前做的类似 “编辑。AssetManager.render（editor.AssetManager.getAll（）.filter（asset => asset.get（'type'） == 'svg-icon'））;' 所以通过搜索找到资源，然后用渲染更新
又见面了！ 当前情况：我开始剪辑在图层管理器中，我最大化了移动容器（箭头图标）的宽度，这样我可以通过点击任意方向拖动元素我在编辑器中快速移动，不小心移动了图层，而不是选择它 我想要的：例如，我想将移动事件的开始提前300毫秒，这样在这300毫秒内只触发选择动作 你知道移动时触发的事件叫什么吗（来自图层管理器）。 谢谢！ LE： component：drag：start 是事件
GJSBlock
谢谢你举报，@RaresVlaiduc。 关于组件启动移动时触发的事件，这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'）...
你好，@artf，这是一个很棒的框架，非常感谢。 我现在用它来创建移动版 BUI 框架的组件，遇到了一个问题，我添加了自定义的特性文本区，我该如何制作这个？当数据发生变化时，它会在输出脚本中触发。 “''js 编辑。TraitManager.addType（'textarea'， { createInput（{ 特质， 组成部分 }) { 这里我们可以决定使用性状中的性质 const el=document.createElement（'div'）; el.innerHTML = ' <textarea class=“buiv-textarea” name=“${options[0].name}” rows=“${options[...
Ju99ernaut
你需要在“剧本道具”中添加这个特质，你可以在这里阅读更多内容 https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
imouou
谢谢@Ju99ernaut，如果是某些内置功能，修改脚本时可以接收参数值，我目前遇到问题：自定义功能“textarea”可以触发DOM等更改，但导出脚本无法接收该参数的值，即使脚本道具设置为“datas”。
Ju99ernaut
你可以尝试强制脚本更新： “''js 编辑。DomComponents.addType（'slide'， { 型号：{ // ... init（） { this.on（'change：datas'， （） => this.trigger（'change：script'））; }, }, // ... }); ```
你好。 Grapesjs是个很棒的工具。谢谢你。 我想通过输入更新组件的文本值，我该怎么做？ 如果用户在输入框中填写类似“茶站，标题应改为该网站 ![图片]（https://user-images.githubusercontent.com/43874147/110532756-9d560280-80f3-11eb-8d27-639a006b3e79.png）
artf
只要找到组件，然后按你的想法更新它 “''js cont typedByUser = '类型某物...'; const cmp = editor.getWrapper（）.find（'.any-query-selector'）[0]; cmp && cmp.components（typedByUser）; ```
millord
我也想用类似的 Grapes 应用，但用 React 通过控制输入更新文本组件。有人能帮忙吗？
D-Rosa99
可以，谢谢