editorjs-html-viewer
v1.5.7
Published
Editorjs viewer convert json to html.
Downloads
26
Readme
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