javascript

Editorjs blocks - JSON to HTML javascript

Use this code to convert JSON string to HTML string generated by editor.js output

function jsonToHtml(jsonStr) {
    obj = JSON.parse(jsonStr);

    html = '';
    obj["blocks"].forEach(function(block, index) {
        switch (block['type']) {
            case 'paragraph':
                html += '<p>'+ block['data']['text'] +'</p>';
                break;
            
            case 'header':
                html += '<h'+ block['data']['level'] +'>'+ block['data']['text'] +'</h'+ block['data']['level'] +'>';
                break;

            case 'raw':
                html += block['data']['html'];
                break;

            case 'list':
                lsType = (block['data']['style'] == 'ordered') ? 'ol' : 'ul';
                html += '<' + lsType + '>';
                block['data']['items'].forEach(function(item, index) {
                    html += '<li>' + item + '</li>';
                });
                html += '</' + lsType + '>';
                break;
            
            case 'code':
                html += '<pre><code class="language-'+ block['data']['lang'] +'">'+ block['data']['code'] +'</code></pre>';
                break;
            
            case 'image':
                html += '<div class="img_pnl"><img src="'+ block['data']['file']['url'] +'" /></div>';
                break;
            
            default:
                break;
        }
    });
    
    return html;
}
Was this helpful?