Welcome
editorjs-viewer
is package to turn JSON
data to HTML
from editor.js dynamicly and extremly easy to use.
by default this package can parse the following data:
- paragraph
- header
- ...whatever you want you can add more
not too many right, it's because we want to provide you a dynamic
return easily and it's up to you whatever data you want to return you can do that it's absolutly posible, by doing that you can parse any json data to any html tag.
Installation
npm install editorjs-viewer
Usage
1. Using the default configuration
import {parser} from 'editorjs-viewer'
const example = {
blokcs: [
{
"id": "4VO1-bae5v",
"type": "header",
"data": {
"text": "Editor.js",
"level": 1
}
},
{
"id": "uF5EPBJ50g",
"type": "paragraph",
"data": {
"text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
}
},
]
};
const result = parser.toHTML(example.blocks)
console.log(result)
2. Using custom configuration
In this example below, i wan't to turn image
block to html
tag but in the default configuration there's no configuration for returning image block as html, so here's the benefit by using this package you can use custom configuration look at example below
import {parser} from 'editorjs-viewer'
const examples = {
blokcs: [
{
"id": "4VO1-bae5v",
"type": "header",
"data": {
"text": "Editor.js",
"level": 1
}
},
{
"id": "uF5EPBJ50g",
"type": "paragraph",
"data": {
"text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
}
},
{
"id" : "mom8ixFY4s",
"type" : "image",
"data" : {
"file" : {
"url" : "https://codex.so/public/app/img/external/codex2x.png"
},
"caption" : "",
"withBorder" : false,
"stretched" : false,
"withBackground" : false
}
}
]
};
const conf = {
image : {
onReturn(value){
return `<img src='${value.data.file.url}'`/>
}
},
}
const result = parser.toHTML(example.blocks, conf)
console.log(result)