在从 Code Editor 保存代码时丢失组件信息

Question

我已经在网页构建器中集成了代码编辑选项。使用 'editor.getHtml（）' 获取当前 HTML 内容并在代码编辑器中填充在从代码编辑器保存代码时，我使用 'editor.setComponents（）' 将编辑内容设置为构建画布。 问题从代码编辑器保存html后，它会丢失所有旧组件相关信息，并作为一个新组件，特征中保留默认值。'data-gjs-type' 变成默认，无法识别自定义组件。 分析与思考 查了一下，好像是，当我们使用 'editor.getHtml（）' 时，它会得到没有任何 'data-gjs-*' 属性的最终 html。'editor.setComponents（）' 方法似乎覆盖了旧的组件信息。 问题为了保留所有旧组件信息并在编辑编辑HTML后使用，我们该如何做到？如果是通过使用'editor.getComponents（）'实现，保存代码编辑器内容后，我们如何存储和重用？ ![setcontent]（https://user-images.githubusercontent.com/33261697/78021117-4d61ae00-7370-11ea-...

pouyamiralayi · Accepted Answer

@jenter [#1331评论]（https://github.com/artf/grapesjs/issues/1331#issuecomment-409537048）和[#2644评论]（https://github.com/artf/grapesjs/issues/2644#issuecomment-598666594）是很好的例子。另外可以看看[#2664评论]（https://github.com/artf/grapesjs/issues/2664#issuecomment-600533428），这是个需要避免的陷阱！ 干杯！

noogen · Answer

@sathyanarayananaCES 首先，呼应其他人的建议，最好使用“get/setComponents”和“get/setStyle”来保存编辑器的内容。 如果我理解没错，你是想用HTML来做“htmlCodeEditor”，并且用户编辑后能导入回“编辑器”。 看看编辑器导入的演示，它只是调用“setComponents”，并附带原始 HTML。 参考资料 - https://github.com/artf/grapesjs/blob/dev/docs/api/editor.md#examples 和 https://github.com/artf/grapesjs/blob/dev/test/specs/grapesjs/index.js#L180 要实现你的功能，需要调用 'editor.genHtml（）' 的 'htmlCodeViewer.setContent'，然后用 'editor.setComponents' 导入，并用 'htmlCodeViewer' 的原始 HTML 返回，而不是处理 components 数组。 你需要理解的一个陷阱是，在内部，Grap...

pouyamiralayi · Answer

你好@sathyanarayananaCES必须调用“editor.getComponents”和“editor.getStyle”才能获取组件详情;然后你可以通过调用“editor.setComponents”和“editor.setStyle”返回存储状态，使用上述函数调用的结果。 干杯！

在从 Code Editor 保存代码时丢失组件信息

问题

回答（3）

相关问答

文本组件无法更新，无法从toHTML获得最终结果。

Editor.setComponents（html）在编辑器中重置为默认的特征值

把动态方块配置保存成HTML吗？（倒计时，滑行者）

：如果在顶部/左侧有空位，Mode Absolute 无法拖动组件

与此问题匹配的付费插件

浏览插件分类

问题