从“pageManager”加载“组件”和“样式”

Question

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome v117.0.5938.149可复制演示链接 https://jsfiddle.net/9oLrsvya/描述一下那个虫子 如何复现这个漏洞？请参见 jsfiddle 中的“pageManager”对象 预期的行为是什么？ 查看以下文档：https://grapesjs.com/docs/api/pages.html#pages 它应该能正确地从“pageManager”中加载“组件”和“样式”到编辑器中。 目前的行为是什么？ 当你通过编辑器中的“查看代码”检查代码时，你会发现既没有完全相同的 HTML，也没有样式正确加载。“body”标签不会保留编辑器在应用任何样式时添加的“ID”标签，这意味着样式无法正常工作。而且CSS根本没正确加载。 --- 如果这是确认的bug，我很乐意尝试修复。如果能大致知道“组件”和“样式”是从哪里加载的那就太好了，因为我对项目文件不太熟悉。行为准则[X] 我同意遵守本项目的行为准则

mapsmarketing · Accepted Answer

有个烦人的点是，编辑器会在下面默认样式前面加上，保存这些样式时会有许多重复的样式：

* {
  盒子尺寸：边框盒;
}
正体 {
  优势：0;
}

编辑： 查看文档后，我终于找到了“protectedCss”，设置为空时，样式的前置功能就停止了。

artf · Answer

你好@mapsmarketing目前 GrapesJS 无法正确导入 HTML 文档的字符串格式，所以解析器会跳过像 “html”、“head”、“body” 这样的元素，只返回“body”内部解析出来的内容，你现在可以做的一个变通方法是把组件作为对象传递 “''js 组件：{ 属性：{ ID： 'IGNT' }， components： '

测试世界！

'， }, ``` 关于样式，这是浏览器默认的CSSOM解析器问题，请参考这个[插件]（https://github.com/GrapesJS/parser-postcss）

mapsmarketing · Answer

你好@artf， 我找到了一种方法，可以通过以下方法正确保存“身体”属性和样式： 我注意到你的[Page.toJSON]（https://github.com/GrapesJS/grapesjs/blob/e03dfc7483b7fd936f3580bee78fee6d03c2b055/src/pages/model/Page.ts#L134-L149）输出了指定页面的所有内容。不过，它似乎无法正确输出“样式”（我总是被设置为未定义），所以我通过编辑器检索了激活页面的样式，并覆盖了 JSON 中的样式。我认为“样式”之所以没有设置，是因为你在[Page.ts]（https://github.com/GrapesJS/grapesjs/blob/e03dfc7483b7fd936f3580bee78fee6d03c2b055/src/pages/model/Page.ts#L55-L58）里有“if （！props.frames）”检查。 下面是一个我在HTML中加载的示例。我用的是“frames”，因为“component”和提供的结构不兼容。我在没有使用解析器插件的情况下加载样式，...

从“pageManager”加载“组件”和“样式”

问题

葡萄JS版本

你用的是什么浏览器？

可复制演示链接

描述一下那个虫子

行为准则

回答（4）

相关问答

诸如 md：flex-row（tailwind）等组件样式被移除

官方的解析@keyframes方法并不起作用

选择器：移除事件不存在

（0.16.41）组件已失去其风格

与此问题匹配的付费插件

相关教程

GrapesJS DevTools: A Developer Panel Inside Your Editor

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS

浏览插件分类

问题