Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

editorjs-viewer

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

editorjs-viewer

Extremly easy turn JSON data to HTML from editor.js dynamicly

  • 2.0.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
21
Maintainers
1
Weekly downloads
 
Created
Source

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:

  1. paragraph
  2. header
  3. ...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'

// example data from editor.js
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."
            }
        },
    ]
};

// turn json to html
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'

// example from editor js
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
            }
        }
    ]
};

// define custom configuration
const conf = {

    // naming must be in lower case and can not be combined
    image : {
        onReturn(value){
            // value.data.file.url is the value from editor js image look at here https://github.com/editor-js/image
            // if you want to use another tag such as link, iframe or etc then follow their return rules
            return `<img src='${value.data.file.url}'`/>
        }
    },
    // you can add more e.g iframe, code, raw and etc
}

// passing the custom configuration as the second argument
const result = parser.toHTML(example.blocks, conf)
console.log(result)

Keywords

FAQs

Package last updated on 21 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc