EditorJs Html Viewer

Convert json elements that generated by EditorJs to html content as string.

Installing

npm i editorjs-html-viewer 

Import

JS

import HtmlViewer from 'editorjs-html-viewer';

From cdn :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editorjs-html-viewer@latest">

And in nodejs environment :

const HtmlViewer = require('editorjs-html-viewer/nodejs');

CSS

Import style from cdn :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editorjs-html-viewer@latest/dist/css/main.min.css">

Import style from css file :

@import 'editorjs-html-viewer/dist/css/main.min.css';

From js code :

import 'editorjs-html-viewer/dist/css/main.min.css';

Usage

// your stored content blocks in database as an array.
let blocksElements = [{id: 1, type: "text", "data": {text: "Hello world"}}];

// create a new object from HtmlViewer class with blocks as a parameter.
let htmlViewer = new HtmlViewer(blocksElements);

// you can use the html code result in your way.
console.log(htmlViewer.html);   

let htmlViewer = new HtmlViewer(blocksElements);

// you can render the html directly by passing the selector
htmlViewer.render("#contentLayout");

Note If you use the html result by your way, you need to call applyHandlers static function to let some features work correctly.

HtmlViewer.applyHandlers(); 

Sometimes you would like to use a css framework witch built on removing the default styles (normalize), such as Tailwindcss, so, you can prevent that happend for some tags like (h and list) tags through :

let htmlViewer = new HtmlViewer(blocksElements, {withDefaultStyle: true});

If you prefer the dark mode in code blocks like me, don't change anything because it is default, but also you can use the light mode through changing the codeTheme option :

let htmlViewer = new HtmlViewer(blocksElements, {codeTheme: 'light'});

Reading Time

You can get the reading time of the content through :

htmlViewer.getReadingTime();

the returned value is an object which contains :

• minutes
• wordsCount

Supported plugins

• Text, Paragraph, Header
• Table
• Image
• Quote
• List
• Link
• Delimiter
• Inline code
• Code, and (editorjs-codeflask)
• Checklist
• Warning
• Embed
• Personality
• Attaches