10

我正在尝试将 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？我必须手动转换吗？

4

6 回答 6

12

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

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

于 2020-06-17T14:21:28.217 回答
4

我找到了一个功能，我自己做了修改。我认为它可以改进，但现在这是我得到的最好的。

  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;
    }
于 2020-10-03T12:59:51.983 回答
3

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

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

它也是可配置的。

于 2020-11-02T09:46:59.733 回答
2

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

于 2020-11-18T04:12:22.423 回答
1

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

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

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

于 2020-06-06T19:03:02.543 回答
0

我不知道为什么需要转换为html，您可以在服务器上拥有干净的数据并通过编辑器js将其呈现为readOnly

默认只读属性是false.

这是editorjs提供的示例html文件检查这个html

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

于 2021-01-26T10:28:57.720 回答