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

GrapesJS 问题

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

找到 220 个问题

🔍 canvas
#34352021年5月6日作者 anlumo1 个回答
0 个反应
提问文档画布组件缺陷

Scrollable onStart/onEnd/updateTarget not Overridable

版本： 0.17.3 你能重现演示中的bug吗？[ ] 是的[X] 不 预期的行为是什么？ 能够覆盖组件model.default.scrollable中的 onStart、onEnd 和 updateTarget，详见[文档]（https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js）。 详细描述那个漏洞 我创建了一个扩展 ComponentImage 的组件。内容不是静态图像，而是根据需要渲染，当目标尺寸变化时必须重新渲染。 根据文档，我应该能在model.default.scrollable中定义onEnd，在调整大小完成后触发重新渲染（我不想在用户还...

GJSBlock

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

查看详情
#34132021年4月26日作者 theSC0RP4 个回答
0 个反应
画布提问typescript

Adding inline scripts and updating old events

在这种情况下，我建议你访问iframe的文档，手动添加内联脚本（要获取文档，请使用'editor.“。Canvas.getDocument（）'） Originally由@artf在 https://github.com/artf/grapesjs/issues/2012#issuecomment-496304498发布 嘿，@artf，我正在看#2012号，有些疑问。 如果脚本发生了更改，比如点击时的提醒消息。然后会加入多个事件。如何移除旧事件并添加新事件（无需保存和重新加载）。 一种方法是刷新iframe，但这会导致所有事件丢失（甚至是预定义的）。 你建议怎么做？

theSC0RP

我尝试按照以下步骤更新内联脚本：获取iframe文档： iframeDoc = editor.Canvas.getDocument()获取文档正文的内部HTML格式： iframeDocBodyHtml = iframeDoc.body.innerHTML替换正文的内部HTML： iframeDoc.body.innerHTML = iframeDocBodyHtml重新附加内联脚本 这样做会导致内置的 grapesjs 事件丢失，比如悬停或组件选择（这很明显，因为所有事件...

theSC0RP

我尝试通过写“editor.trigger（'core：component-select'）”来添加select和悬停事件，但也没用，而且执行“editor.runCommand（'core：component-select'）”会出错。 我是不是漏掉了什么？

artf

嗯，我觉得添加一个简单的强制重渲染iframe的方法（虽然不常见，但在某些情况下肯定有用）应该不错。不幸的是，目前你应该尝试使用私密方法，检查一切是否如预期，确认后我很乐意为类似“frame.trigger（'rerender'）”添加监听器。 现在我建议你试试类似的做法 “''js 看看画面的实际视角 const frameView = 编辑器。Canvas.getFrame（）.view; 一旦移除frameView，我们就必须重新渲染该帧 包装视图（包含工具栏和框架本...

查看详情
#34062021年4月20日作者 vatte212 个回答
0 个反应
style-manager组件提问文档画布

如何创建自定义存储管理器？它不会在重新加载页面后从Canvas中设置保存数据

大家好，我想把 Canvas 上的数据保存到 Redux 存储，这样可以，但重新加载页面后，存储加载方法没有把我的数据设置为构建器（Canvas），我不知道问题出在哪里，如果有人有解决办法请告诉我。 代码示例： “''js Grapejs.init（{ .../// storageManager： { 类型：“redux-storage”， 自动保存：错误， 自动装填：1， }, .../// }); const reduxStorage = {}; const storageManager = editor.StorageManager; storageManager.add（'redux-storage'， { load（ke...

artf

去掉这个“const resultKey = key.slice（4）;”。你用前缀存储数据，但加载时没有

GJSBlock

谢谢你举报，@vatte21。 关于如何创建自定义存储管理器，它不会在重新加载页面后设置Canvas保存数据，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） =>...

查看详情
#34052021年4月20日作者 chrisijoyah4 个回答
0 个反应
增强提问文档画布typescript

专长：在块状物落入画布前，需要挂钩的事件

警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么？ 详细描述你的功能需求详细 目前有一个事件可以连接到“canvas：drop”，可以访问掉落的模型。在将方块放入画布之前，我想先...

artf

你好@chrisijoyah你试过用'canvas：dragdata'吗？这里举个用法示例 https://jsfiddle.net/artur_arseniev/87rcb24n/

chrisijoyah

你好@chrisijoyah你试过用“canvas：dragdata”吗？这里举个用法示例 https://jsfiddle.net/artur_arseniev/87rcb24n/ 这是否意味着我可以阻止丢失的模型被添加到画布中？理想情况下，我想做一些检查，确定拖曳后的方块是否可以被放入某个区域，如果通过检测，我想在添加之前阻止它被放入。有没有办法做到这一点？我能不能做类似“result.content='' 或者类似...... “''js editor.on（'can...

artf

我能做类似result.content= ''的操作吗？ 是的，你应该能用这个技巧做到这一点。你能多说说你的使用场景吗？你想做什么样的检查？

查看详情
#33902021年4月6日作者 christosapos2 个回答
0 个反应
提问组件画布

通过点击组件内部更改复选框组件的特征。

通过点击Canvas内的组件，能否更改复选框组件简单中的“勾选”特性？

artf

是的，当然，性状读取的是组件模型的值，所以如果你更改绑定值，性状应该会改变

GJSBlock

谢谢你举报，@christosapos。 关于通过点击“组件内部”更改复选框组件特征的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...

查看详情
#33852021年4月3日作者 pranay22102 个回答
0 个反应
提问画布常规

How to use grapesjs with nuxtjs ?

我正在尝试用 nuxtjs 框架来完成 grapesjs，有什么解决方案吗？

artf

我觉得关键是为GrapesJS创建一个Vue组件，并在你的一些页面中使用它

GJSBlock

谢谢你举报，@pranay2210。 关于如何用 grapesjs 配合nuxtjs？提出了一个很好的问题。推荐的Canvas方法是使用事件驱动API。 从这里开始： 查看你所用模块的[GrapesJS 文档]（https://grapesjs.com/docs/） 寻找 on() 事件监听者方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： 如果你还卡住了： 分享最小的CodeSandbox复制品 把你已经尝试过的都写进去 提及你的 GrapesJS 版本 社...

查看详情
#33742021年3月31日作者 FacuCarbon2 个回答
1 个反应
画布常规

Images and videos are not focused

你好，我遇到了一个问题，就是当把视频或图片添加到画布时，画布不是居中，而是偏向左边。借助面板，我设定了对齐，但它也无法居中。 ![图片]（https://user-images.githubusercontent.com/67525225/113194408-7f357b00-9237-11eb-973b-fa7305418354.png）

Ju99ernaut

试着把它放进容器里，你可能可以用Flexbox之类的东西把它居中。

GJSBlock

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

查看详情
#33462021年3月18日作者 xinnai4 个回答
0 个反应
提问style-manager组件画布

我能自己开发样式管理器并方便地绑定属性吗？

我想用像 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 这正是我需要的！非常感谢！

查看详情
#33452021年3月17日作者 joshk1324 个回答
0 个反应
style-manager组件增强文档画布

面板和按钮部分，入门时无法使用 Vue.js

我正在努力让 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

查看详情
#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...

查看详情

浏览所有主题