editorjs-html

A utility to parse editorjs clean data to HTML.

Installation

Host on Your Own

Browser - Get /build/edjsHTML.browser.js

Nodejs - Get /build/edjsHTML.node.js

For Both Browser & Node - Get /build/edjsHTML.js

NPM

npm install editorjs-html

CDN

Usage

Browser

  const edjsParser = edjsHTML();

  let html = edjsParser.parse(editorjs_clean_data);

  console.log(html);

Nodejs

  const edjsParser = edjsHTML();
  
  const html = edjsParser.parse(editorjs_clean_data);

  console.log(html);

Updates

See Releases

Docs

Supported Block Types

Header (H1-H6)
Lists (Ordered & Unordered)
Images
Delimiter
Paragraph

Parse Single Clean Data Blocks

  const edjsParser = edjsHTML();
  const blockHTML = edjsParser.parseBlock(editorjs_clean_data_block);

  console.log(blockHTML);

Extend For Custom Blocks

editorjs-html supports extending its functionality to render custom editorjs blocks. Moroever, You can even override these basic supported blocks.

The edjsHTML() accepts an optional object that would allow you to extend its functionality.
The name of the function must match with editor-js custom block type.

  // Your custom editorjs generated block
  {
    type: "custom",
    data: {
      text: "Hello World"
    }
 }

  // Parse this block in editorjs-html
  function customParser(block){
    return `<custom-tag> ${block.data.text} </custom-tag>`;
  }

  const edjsParser =  edjsHTML({custom: customParser});

[Update] From v2.0.0 onwards, the parser functions recieves full block instead of just data property of the block. Read releases for more information.

Contribution

Create an issue or send a PR for any contributions.

Suggestions

I would love to have your feedback and any suggestions. You can also let me know, if you need support for any more editorjs blocks.

Support

If you find this helpful, consider giving this repository a Star. You can also buy me a coffee here

License

MIT Public License

Author

@pavittarx

astrocket/editorjs-html