问题 #3713💬 已回答提出于 2021年8月18日作者 shkhalid1 个反应

带脚本的存储组件无法正确渲染

快速解答作者 shkhalid1

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

阅读下方完整回答 ↓

问题

我在尝试保存一些组件(包括一些脚本)并重新加载页面时遇到了一些问题,组件渲染不正确。显示的是空盒子。 举个例子:当我尝试从“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?file=/src/App.js 我还尝试设置了远程[存储](https://grapesjs.com/docs/modules/Storage.html)。但我还是得到同样的结果。这是API输出。 <img width=“1291” alt=“截图 2021-08-18 下午4:35:53” src=“https://user-images.githubusercontent.com/8138036/129891362-534bab14-f1c6-4c58-b061-a895df35921c.png”> 我觉得这和 https://github.com/ar...

回答(3)

shkhalid2021年9月28日

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

return Grapesjs.init({
   tagVarStart: '{{ ',
   tagVarEnd: ' }}',
   .
   .
   });
ClaudeCode2026年5月17日

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

相关问答

通过相似的问题讨论继续研究。

问题 #3463

检查员溢出故障

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可...

4 个回答更新于 2023年7月26日

问题 #3287

包装造型

首先,祝贺@artf完成了这个了不起的项目 💯 我目前正在做一个项目,想问一下是否可以像编辑里面其他组件那样编辑包装器(主体)。 例如,我想像编辑背景色一样编辑包装的填充部分。 ![葡萄提问](https://user-images.githubusercontent.com...

4 个回答更新于 2022年3月2日

问题 #3733

(或者只是一般问题)存储管理器加载不正确吗?

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可...

2 个回答更新于 2021年8月30日

问题 #3447

JavaScript 因编码问题无法使用

1 - 我复制了打字文本组件代码,而不是演示HTML代码; 2 - 并增加了allowScripts:1; 你可以在这里看到示例:http://bashworld.ru/demo.html 点击 查看代码,我们会看到许多 JS 编码字符。 我该如何解决这个问题?我需要解码所有...

4 个回答更新于 2021年5月22日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。