EditorJs文本编辑器json转换为html元素的最佳方法是什么？

Question

我想把EditorJs的输出转换成Html。EditorJs输出的 "干净 "数据是这样的。

{
  "time": 1589987527499,
  "blocks": [
    {
      "type": "embded",
      "data": {
        "service": "youtube",
        "source": "https://www.youtube.com/watch?v=JbqGYgI3XY0",
        "embed": "https://www.youtube.com/embed/JbqGYgI3XY0",
        "width": 580,
        "height": 320,
        "caption": ""
      }
    },
    {
      "type": "image",
      "data": {
        "file": {
          "url": "http://localhost/uploads/images/1.jpg"
        },
        "caption": "",
        "withBorder": false,
        "stretched": false,
        "withBackground": false
      }
    },
    {
      "type": "header",
      "data": {
        "text": "test",
        "level": 2
      }
    }
  ],
  "version": "2.17.0"
}

我怎样才能将其转换为原始HTML？我必须手动转换吗？

Answer 1

你需要手动转换，但我会创建一个类似于引擎的东西，它有基于 "类型 "的组件，例如，如果它的类型是：图像，它将渲染一个组件，显示来自 "data.file.url "的图像，你也可以为这个图像组件添加更多的功能，你可能想要一个标题，然后你有这些数据。

同样的，"嵌入 "类型也是如此，这个类型会有一个 "子 "组件，根据 "data.service "的条件进行渲染，在这种情况下，它是YouTube，然后它会用 "data.source "的来源制作一个嵌入的YouTube视频。

这可能也会有帮助。https:/github.comcodex-teameditor.jsissues676。

Answer 2

editorjs-html "库可以帮助你将Json数据解析为HTML。它提供了一些基本的解析器功能，但也允许你覆盖和定义自己的解析器功能。它是独立于框架的，所以你可以在任何地方使用它。

• https:/github.compavittarxeditorjs-html

README资源库中有一些很好的信息，但你也可以在这里看到一些例子。https:/medium.com@pavittarxrendering-js-from-editor-js-to-html-bfb615ee78c4。