editorjs-html-viewer v1.5.7
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
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago