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

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

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

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

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;
    }

字符串

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

• 段
• 报头
• 表
• 原
• 分隔符
• 代码
• 引用
• 列表
• 嵌入
• 图像

它也是可配置的。

您可以使用此npm install @son_xx/editor-js-parser

我不知道为什么需要转换为html，你可以在服务器上有干净的数据，现在通过编辑器js将其呈现为readOnly
默认readOnly属性为false。
以下是editorjs check this html提供的示例html文件

备注：既然我来到这个问题唯一的原因是早期的editorjs没有只读模式.目前它支持只读模式.所以我的要求得到满足.我的需要得到满足.如果有任何其他原因.上述答案看起来很好.

我使用了一个npm包editorjs-react-renderer，事实证明它非常有用，也很容易使用。

{
      "time": //some value here,
      "version": //some value here,
      "blocks": [
        {
          "type": "paragraph",
          "data": {
            "text": "Start writing here !!!",
            "level": 1
          }
        },
      ]
    }

字符串
现在通过以下方式安装软件包：

npm i editorjs-react-renderer

型
然后在相应的文件中导入以下内容

import Output from 'editorjs-react-renderer';

型
或

const Output = require('editorjs-react-renderer');

型
或者，如果你得到了类似Window is not defined的错误，或者你正在使用React/Next JS，使用这个方法导入

import dynamic from "next/dynamic";
let Output = dynamic(() => import('editorjs-react-renderer'), {ssr: false});

型
最后，使用上述格式和输出组件的data={}对象从JSON呈现HTML

<div>
        <Output data={ data_of_correct_format_containing_blocks } />
    </div>

型
可用的软件包是EditorJS-React Renderer (ERR)，下面是一个非常好的by shucoll演示

你需要手动转换它，但我会创建一个类似于引擎的东西，它有基于“类型”的组件，例如，如果它是type：image，它会呈现一个组件，显示来自“data.file.url”的图像，你也可以向这个图像组件添加更多功能，你可能想要一个标题，然后你就有了那个数据。
“embed”类型也是如此，这个类型将有一个“child”组件，它根据“data.service”条件进行渲染，在本例中是YouTube，然后它将使用“data.source”源创建一个嵌入的YouTube视频。
这可能也有帮助：https://github.com/codex-team/editor.js/issues/676

已经有很多解决方案了，但我很乐意用“我自己的”来贡献。
这是另一个项目的分支，它添加了对新块的支持，例如：

• SimpleImage
• 链接工具

https://www.npmjs.com/package/@herii/editorjs-parser
您可以使用yarn或npm安装它，这取决于您：

yarn add @herii/editorjs-parser


const edjsParser = require("editorjs-parser");

const parser = new edjsParser();
const HTML = parser.parse(editorjs_data); // editor_js_data is the object that contains the blocks genrated by editorjs

字符串
Here是必须传递给parser.parse（）的数据的一个示例。
这里有一个linkTool的例子，这是我添加的一个新的块（HTML是由这个解析器生成的，样式显示在我创建的sandbox中）。
x1c 0d1x的数据
希望对你有帮助！

您可以使用editorjs-html包将原生editorjs JSON内容转换为HTML。
我为此创建了一些实用程序：

import editorJsHTML from "editorjs-html";

const edjsParser = editorJsHTML()

/**
 * Parse editorjs JSON string to array of HTML code
 * @param data - editorjs JSON string
 * @returns {Array<string>|*[]}
 */
export function parseEditorJs(data) {
  if (typeof data === 'undefined' || data === null) {
    return []
  }
  let content = data
  if(typeof data === 'string' ) {
    content = JSON.parse(data)
  }
  return edjsParser.parse(content)
}

/**
 * Parse editorjs JSON string to HTML code
 * @param data - editorjs JSON string
 * @returns {string} with HTML code
 */
export function parseEditorJsToHtml(data) {
  const array = parseEditorJs(data)
  return array.join("\n")
}

/**
 * Parse editorjs JSON string to plain text
 * @param data - editorjs JSON string
 * @returns {string} with plain text
 */
export function parseEditorJsToText(data) {
  const html = parseEditorJsToHtml(data)
  // Convert html to text
  return html.replace(/<[^>]*>?/gm, '').trim();
}

字符串
要使这些函数正常工作，请确保首先安装该软件包：

yarn add editorjs-html

型