Editor.js: json to html on frontend...

[mypetertw]

Json string render HTML on frontend, how can it works?

[rmlamarche]

Duplicate of #676

A read-only init option is also in the Roadmap #837

It also depends on your needs. You can use a templating engine such as ejs or pug if you want server side rendering benefits.

Since you said "on the frontend", you can also just write a function in client side javascript that renders elements as you need, iterating over data.blocks with some if statements or a switch.

function renderHTML(data) {
    let result = ``;
    for (let block of JSON.parse(data).blocks) {
      switch (block.type) {
        case 'paragraph':
          result += `<p>${block.data.text}</p>`;
          break;
        case 'header':
          result += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
          break;
        case 'list':
          ...
      }
    }
    return result;
  }

[sumitvekariya]

https://medium.com/@sumitvekariya7/editor-js-read-only-mode-in-angular-4f73192ed860

I have created readOnly view mode for angular using switchcase statement based on block type and I have used css classes given in editor.js iteslf, so It creates 100% same user interface.

[docluv]

This seems like the best approach. Seems like you will need a rendering class for each custom block.

[pavittarx]

If you want an extendable framework-free approach: https://github.com/pavittarx/editorjs-html. Use it in the browser, or node, extend it to suit your needs.
I created to use it with my own project, but would like to see if anyone else would want to use it.

• ~1kb bundles, ~200 downloads in just two days.
• No switch cases or if-else conditions.

[MichaelMikeJones]

I've created a package for this purpose. editorjs-parser
It supports :

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

It also is configurable.

[khaydarov]

read-only mode is released with v2.19