What is the best way to convert EditorJs text editor json to html elements?

Question

I'm trying to convert EditorJs output to Html. EditorJs outputs 'clean' data like this:

{
  "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"
}

how can I convert to this to raw HTML? Do I have to convert this manually?

Answer 1

I found a function to do it and I made a modification of my own. I think it can be improved but right now this is the best that I got.

  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 2

The 'editorjs-html' library can help you parse you Json data to HTML. It provides some basic parser functions, but also allows you to override and define your own parser functions. It is framework independent, so you can use it anywhere.

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

The README repository has some good information, but you can also see some examples here, https://medium.com/@pavittarx/rendering-json-from-editor-js-to-html-bfb615ee78c4

Answer 3

Editorjs outputs clean data and maintainers have not implemented readOnly functionality yet, to get the HTML out of it. So, the only solution is to write a conversion functionality by yourself, but I've created a package for this purpose. editorjs-parser. It supports most block types and You can also provide your own custom parser for any type of block. It supports :

• Paragraph
• Header
• Table
• Raw
• Delimiter
• Code
• Quote
• List
• Embed
• Image

It is also configurable.

Answer 4

you can use this npm install @son_xx/editor-js-parser