将 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

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

• https://github.com/pavittarx/editorjs-html

README 存​​储库有一些很好的信息，但您也可以在这里看到一些示例，https://medium.com/@pavittarx/rendering-json-from-editor-js-to-html-bfb615ee78c4

Answer 2

我找到了一个函数可以做到这一点，并且我自己进行了修改。我认为它可以改进，但现在这是我得到的最好的。

  convertDataToHtml(blocks) {
      var convertedHtml = "";
      blocks.map(block => {
        
        switch (block.type) {
          case "header":
            convertedHtml += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
            break;
          case "embded":
            convertedHtml += `<div><iframe width="560" height="315" src="${block.data.embed}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>`;
            break;
          case "paragraph":
            convertedHtml += `<p>${block.data.text}</p>`;
            break;
          case "delimiter":
            convertedHtml += "<hr />";
            break;
          case "image":
            convertedHtml += `<img class="img-fluid" src="${block.data.file.url}" title="${block.data.caption}" /><br /><em>${block.data.caption}</em>`;
            break;
          case "list":
            convertedHtml += "<ul>";
            block.data.items.forEach(function(li) {
              convertedHtml += `<li>${li}</li>`;
            });
            convertedHtml += "</ul>";
            break;
          default:
            console.log("Unknown block type", block.type);
            break;
        }
      });
      return convertedHtml;
    }

Answer 3

Editorjs 输出干净的数据，维护者尚未实现readOnly从中获取 HTML 的功能。因此，唯一的解决方案是自己编写转换功能，但我为此创建了一个包。editorjs-解析器。它支持大多数块类型，您还可以为任何类型的块提供自己的自定义解析器。它支持：

• 段落
• 标头
• 桌子
• 生的
• 分隔符
• 代码
• 引用
• 列表
• 嵌入
• 图像

它也是可配置的。

Answer 4

您需要手动转换它，但我会创建一个类似引擎的东西，它具有基于“类型”的组件，例如，如果它是类型：图像，它将呈现一个显示来自“data.file.url”的图像的组件，您可以还可以向该图像组件添加更多功能，您可能需要一个标题，然后您就有了该数据。

“嵌入”类型也是如此，这个类型将有一个“子”组件，根据“data.service”条件进行渲染，在本例中它是 YouTube，然后它将制作一个嵌入的 YouTube 视频，其来源为“数据源”。

这也可能有帮助：https ://github.com/codex-team/editor.js/issues/676