带脚本的存储组件无法正确渲染
问题
我在尝试保存一些组件(包括一些脚本)并重新加载页面时遇到了一些问题,组件渲染不正确。显示的是空盒子。 举个例子:当我尝试从“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)
谢谢@artf! 最后我终于弄明白了 问题出在“tagVarStart”和“tagVarEnd”。评论完后它开始起作用了
return Grapesjs.init({
tagVarStart: '{{ ',
tagVarEnd: ' }}',
.
.
});
@shkhalid谢谢你的报告,但在这个仓库里,你应该打开可重现的问题,不使用外部插件,因为问题可能出在插件本身。至少就我对核心的判断来看,如果按照这个[指南](https://grapesjs.com/docs/modules/Components-js.html)正确实现,组件中没有问题。
谢谢你举报,@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先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可...
问题 #3287
包装造型
首先,祝贺@artf完成了这个了不起的项目 💯 我目前正在做一个项目,想问一下是否可以像编辑里面其他组件那样编辑包装器(主体)。 例如,我想像编辑背景色一样编辑包装的填充部分。 存储管理器加载不正确吗?
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可...
问题 #3447
JavaScript 因编码问题无法使用
1 - 我复制了打字文本组件代码,而不是演示HTML代码; 2 - 并增加了allowScripts:1; 你可以在这里看到示例:http://bashworld.ru/demo.html 点击 查看代码,我们会看到许多 JS 编码字符。 我该如何解决这个问题?我需要解码所有...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK
Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.
教程
How to build a GrapesJS desktop app with Electron (complete guide 2026)
Run GrapesJS inside an Electron desktop app: mount it in the renderer, save projects to disk through IPC, and export HTML/CSS.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
浏览插件分类
直接跳转到市场上的插件分类页面。