salimzade / editorjs-data-parser

Convert JSON data from EditorJS to HTML elements

EditorJs Data Parser

Easily convert json data from editorjs to html elements

Installaton

npm i editorjs-data-parser

yarn add editorjs-data-parser

Suppoted tools

• ✅ checklist
• ✅ embed
• ✅ head
• ✅ link
• ✅ list
• ✅ marker
• ✅ image
• ✅ paragraph
• ✅ quote
• ✅ raw
• ✅ table
• ✅ code
• ✅ warning
• ✅ delimeter

Usage example

import EditorJS from "@editorjs/editorjs";
import CheckList from "@editorjs/checklist";
import Code from "@editorjs/code";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import Embed from "@editorjs/embed";
import Delimiter from "@editorjs/delimiter";
import Marker from "@editorjs/marker";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Table from "@editorjs/table";
import Warning from "@editorjs/warning";
import { editorJsParser } from "editorjs-data-parser";

const editor = new EditorJS({
  tools: {
    header: {
      class: Header,
      inlineToolbar: true
    },
    list: {
      class: List,
      inlineToolbar: true
    },
    checklist: CheckList,
    delimiter: Delimiter,
    marker: Marker,
    embed: {
      class: Embed,
      inlineToolbar: false,
      config: {
        services: {
          youtube: true,
          coub: true
        }
      }
    },
    image: {
      class: Image,
      config: {
        endpoints: {
          byFile: "http://localhost:8008/uploadFile", // Your backend file uploader endpoint
          byUrl: "http://localhost:8008/fetchUrl" // Your endpoint that provides uploading by Url
        }
      }
    },
    checkList: CheckList,
    code: Code,
    raw: Raw,
    table: Table,
    warning: Warning,
  }
});

let btnConvert = document.getElementById("btnConvert");
btnConvert.addEventListener("click", () => {
  editor.save().then((outputData) => {
    let result = editorJsParser(outputData.blocks);
    console.log(result);
  });
});

Install supported tools

npm i --save @editorjs/checklist

npm i --save @editorjs/code

npm i --save @editorjs/header

npm i --save @editorjs/list

npm i --save @editorjs/embed

npm i --save @editorjs/delimiter

npm i --save @editorjs/marker

npm i --save @editorjs/marker

npm i --save @editorjs/image

npm i --save @editorjs/raw

npm i --save @editorjs/table

npm i --save @editorjs/warning

editorjs-data-parser's Issues

Could not find module in path: 'editorjs-data-parser

Could not find module in path: 'editorjs-data-parser' relative to '/src/index.js'

It will be fixed in the next update

Checklist parsing issue

It is temporarily not possible to parse the checklist
Will be fixed next update

why checklist is 'radio'？

why checklist converted to radio