将 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-parser。它支持大多数块类型，您还可以为任何类型的块提供自己的自定义解析器。它支持：

• 段落
• 标题
• 表
• 生的
• 分隔符
• 代码
• 报价
• 列表
• 嵌入
• 图片

它也是可配置的。

Answer 4

你可以使用这个npm install @son_xx/editor-js-parser

Answer 5

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

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

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

Answer 6

我不知道为什么需要转换为html，你可以在服务器上拥有干净的数据，现在通过editor js

将它呈现为readOnly

默认的readOnly属性是false。

这里是editorjscheck this html提供的示例html文件

注意：因为我遇到了这个问题，唯一的原因是之前的 editorjs 没有只读模式。目前它支持只读模式。所以我的要求得到了满足。 我的需要得到了满足。如果有其他原因。以上答案 看起来不错。