GrapesJS 问题

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

状态

排序

找到 545 个问题

🔍 typescript

#34342021年5月5日作者 advancedsoftwarecanada4 个回答

1 个反应

提问缺陷 style-manager typescript

用导入的 HTML/CSS/JS 到编辑器里，显示大纲，但没有内容，里面有 JS Fiddle

你可以在控制台输入“grapesjs.version”获得版本是的：https://jsfiddle.net/75a9u1cf/2/ 预期的行为是什么？我期望能在编辑器中编辑HTML和内容详细描述那个漏洞** 屏幕是纯白色的，我能看到形状和拖动元素，但编辑器就是无法显示内容半解：https://jsfiddle.net/75a9u1cf/3/

advancedsoftwarecanada

这个问题是可以解决的。我只是把HTML/JS应用换成了扁平的HTML——禁用了所有愚蠢的加载效果。我会在不在编辑器里时用外部脚本做一些花哨的操作。大家向 GRAPEJS致敬。

advancedsoftwarecanada

![图片]（https://user-images.githubusercontent.com/1661561/117187316-cc15ef80-ada9-11eb-922e-de033b92a7e8.png）

advancedsoftwarecanada

半解决了，我在谷歌上找到了一些东西： https://jsfiddle.net/75a9u1cf/3/ 但有些图片仍然无法使用。

查看详情

#34332021年5月5日作者 divesham2 个回答

0 个反应

增强提问文档 typescript

Video not playing

警告请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 你想给GrapesJS添加什么？详细描述你的功能需求详细最新版本有替代方案吗？[ ] 是的（描述替代方案）[x] 不这是否与某个问题有关？[x] 是的（请...

divesham

https://github.com/artf/grapesjs/issues/1381

GJSBlock

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

查看详情

#34292021年5月4日作者 justin37372 个回答

2 个反应

提问缺陷 style-manager typescript

There is no display grapesjs-style-bg plugin

你好@artf 感谢你在这里所做的一切但我试着用这个插件，但就是做不到 ![图片]（https://i.imgur.com/gaC65t1.png）版本：0.17.3 你能重现演示中的这个bug吗？[x] 是的[ ] 不详细描述那个漏洞** 没有显示插件目前的行为是什么？什么都没发生。你能附上截图、截图或实时演示吗？[x] 是的[ ] 不 https://jsfiddle.net/e4pbsgm0/

Ju99ernaut

遗憾的是，插件不会自动替换原始背景图像输入，所以你得手动替换。你需要想办法把这个添加到你的样式管理器配置里，并移除内置版本： “''js { ID：“背景-背景”，财产：“背景”，类型：“BG”， }, ``` 更多参考资料请点击这里 https://github.com/artf/grapesjs/blob/c136ea722383c0ece710ff3bbab1ce9b30f986ba/demo.html#L1154

GJSBlock

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

查看详情

#34252021年4月30日作者 anlumo2 个回答

1 个反应

提问缺陷 style-manager typescript

StaticRules for CssComposer Non-Functional

CssComposer 的 [示例配置文件]（https://github.com/artf/grapesjs/blob/c3a49015df45eb49b0beb605e45ead1ea56a3af8/src/css_composer/config/config.js#L6）引用了一个 'staticRules' 属性。这个属性名称在源代码的其他地方没有使用（通过[GitHub搜索]（https://github.com/artf/grapesjs/search?q=staticRules）验证），也没有任何作用。版本： 0.17.3 你能重现演示中的bug吗？[ ] 是的[X] 不（其实不太适用）预期的行为是什么？把...

artf

谢谢@anlumo你说得对，那是个旧选项，我会去掉的。对于静态 CSS 规则，我们有 [这些选项]（https://github.com/artf/grapesjs/blob/210f87030d7d1e2aa2e5c427e4347b49ad258134/src/editor/config/config.js#L72-L77）

GJSBlock

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

查看详情

#34202021年4月28日作者 sanchit362 个回答

0 个反应

提问 style-manager 组件 typescript

[紧急!! 问题：如何在 reactjs 项目中实现 LocalStorage？？

我正在尝试在 Reactjs 应用中实现 localstorage，但不知为何它没有在 localstorage 中存储数据 “JavaScript useEffect（（） => { const templateComponent = JSON.parse（ localStorage.getItem（“gjs-components”） ); console.log（模板组件）; const templateStyle = JSON.parse（localStorage.getItem（“gjs-style”））; console.log（模板样式）; const editor = Grapesjs.init（{ 容器：“#edi...

artf

本地storageManager会帮你完成所有工作，所以你不需要做现在那些手动操作。所以保留storageManager选项，把剩下的都删掉。附言：使用useEffect要小心，添加一个空数组作为依赖，否则它会在每次渲染时调用初始化......

GJSBlock

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

查看详情

#34182021年4月27日作者 emyasnikov2 个回答

0 个反应

提问缺陷 typescript

Panels "visible" attribute doesn't prevent panel rendering

版本： v0.17.3 你能重现演示中的bug吗？[ ] 是的[x] 不预期的行为是什么？ “编辑。Panels.addPanel（{id： 'test'， visible： false}）' 即使'visible'属性设置为false，仍能渲染面板。编辑器渲染后它完全正常，所以“panel.set（'visibility'，！panel.get（'visibility'）' 正确切换可见性。尝试将“gjs-hidden”类和“visible： false”一起设置的变通方法1也没用。这样之后会检查可见性，“gjs-hidden”类也会被移除。至少我看到的行为是这样的。之前已经出现过同样的问题：[#1602]（https...

artf

是的，我觉得只要在PanelView.render里添加这个.toggleVisible（）就行了。如果你想冲击个人纪录，我很乐意合并:)

GJSBlock

谢谢你举报，@emyasnikov。面板“可见”属性不阻止面板渲染的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...

查看详情

#34172021年4月27日作者 NagarRahul2 个回答

1 个反应

组件提问 typescript

FEAT：地图组件是如何运作的？我们如何创建天气组件并渲染？

能否详细说明地图组件在拖曳后是如何渲染的？我们如何为天气创建一个新的组件，并且它如何像地图组件一样渲染？ @artf

theSC0RP

如果你还没看过，可以看看以下内容，了解地图组件的工作原理：[地图分量模型]（https://github.com/artf/grapesjs/blob/dev/src/domcomponents/model/ComponentMap.js）[地图组件视图]（https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/ComponentMapView.js）

GJSBlock

谢谢你举报，@NagarRahul。关于FEAT：地图组件是如何工作的，这个问题很棒。我们如何创建天气组件并渲染它？。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'so...

查看详情

#34162021年4月27日作者 ghost2 个回答

0 个反应

组件缺陷提问 typescript

0.15.10 - setAttribute - is not a valid attribute name

你好！我知道这是这里报告的 bug，#2029，但现在我无法从'0.15.10'更新到包含解决方案的版本。你知道我现在设置组件时有什么解决办法吗？我用的是 VueJS 搭配 GrapesJS。以下是我尝试设置组件的方法。 'this.grapeEditor.setComponents（myHtml）;' 但“setAttribute”会跳出“不是有效的属性名称”，而且内容不会显示。提前感谢大家。

artf

抱歉，我帮不上这么老的版本。为什么你不能更新？？

GJSBlock

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

查看详情

#34152021年4月26日作者 mmotov4 个回答

0 个反应

提问 typescript 常规

Custom Asset Manager. How to set bg image

你好！我正在为资产管理器构建一个自定义模态，基本上，我似乎需要覆盖“open-assets”“”命令。我如何理解用户是否想设置图片src或背景图片属性？提前感谢大家！

advancedsoftwarecanada

赞同，我刚开始用GrapeJS，并让它在我的系统上运行起来，想在头部div上设置背景图片，而不用写CSS代码：/

artf

实际上，关于资产选择的知识不应该包含在指挥系统本身，因为行动应由谁来执行命令来决定，例如： “''js editor.runCommand（'open-assets'， { onSelect（asset） { const cmp = editor.getSelected（）; cmp && cmp.addStyle（{ 'background-image'： 'url（“${asset.get（'src'）}”）' }） } }); ``` 我建议你检查一下当前的[命令]（...

advancedsoftwarecanada

这并不是我们问题的正确解决方案。我想做的是把这个功能添加到一个组件里，我们该怎么做？ ![图片]（https://user-images.githubusercontent.com/1661561/117693092-a57dfd00-b18b-11eb-8537-e4188d99eb40.png）

查看详情

#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，我们就必须重新渲染该帧包装视图（包含工具栏和框架本...

查看详情

GrapesJS 问题

浏览所有主题