Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pavittarx/editorjs-html
A javascript library to parse editorjs clean data to html. It is adaptable and usable in all kind of projects.
https://github.com/pavittarx/editorjs-html
editor editorjs editorjs-html html javascript javascript-library nodejs react rendering vue
Last synced: about 1 month ago
JSON representation
A javascript library to parse editorjs clean data to html. It is adaptable and usable in all kind of projects.
- Host: GitHub
- URL: https://github.com/pavittarx/editorjs-html
- Owner: pavittarx
- License: mit
- Created: 2020-04-27T02:52:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-21T16:36:11.000Z (9 months ago)
- Last Synced: 2024-05-19T14:34:47.332Z (7 months ago)
- Topics: editor, editorjs, editorjs-html, html, javascript, javascript-library, nodejs, react, rendering, vue
- Language: TypeScript
- Homepage: https://runkit.com/pavittarx/editorjs-html-example
- Size: 65.4 KB
- Stars: 309
- Watchers: 9
- Forks: 60
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editorjs-html
README
# editorjs-html
A utility to parse editorjs clean data to HTML.
- Use it with plain Javascript/Typescript, React, Angular, Vue or any templating engine/framework of your choice.
- Fast, Efficient and Lightweight.
- Fully customizable to the core.
- Supports basic editorjs blocks which are customizable as well.
- Extendable for any new or custom editorjs blocks.
**[Note]** As of recent release, editorjs v2.10 a read-only mode available. You can use the same to display your editorjs data. However, **someone looking for something lightweight with customizability and more granular control are free to use this library.**
# Installation
### Host on Your Own
* **Browser** - [Get /build/edjsHTML.browser.js](./build/edjsHTML.browser.js)
* **NodeJs** - [Get /build/edjsHTML.node.js](./build/edjsHTML.node.js)
* **For Both Browser & Node** - [Get /build/edjsHTML.js](./build/edjsHTML.js)
### NPM
```shell
npm install editorjs-html
```
### CDN
* https://cdn.jsdelivr.net/npm/[email protected]/build/edjsHTML.js
* (Browser Only Build): https://cdn.jsdelivr.net/npm/[email protected]/build/edjsHTML.browser.js
## Usage
### Browser
```js
const edjsParser = edjsHTML();
let html = edjsParser.parse(editorjs_clean_data);
console.log(html);
```
### Nodejs
```js
const edjsHTML = require("editorjs-html");
const edjsParser = edjsHTML();
const html = edjsParser.parse(editorjs_clean_data);
console.log(html);
```
## Updates
See [Releases](https://github.com/pavittarx/editorjs-html/releases)
## Docs
### Supported Block Types
* Header (H1-H6)
* Lists (Ordered & Unordered)
* Nested Lists
* Image
* Delimiter
* Paragraph
* Quote
* Code
* Embed
## Parse Entire EditorJS Data Object
```js
const edjsParser = edjsHTML();
const HTML = edjsParser.parse(editorjs_data);
// returns array of html strings per block
console.log(HTML);
```
## Parse Entire EditorJS Data Object (Strict Mode)
```js
const edjsParser = edjsHTML();
const HTML = edjsParser.parseStrict(editorjs_data);
// returns an error
if(HTML instanceof Error) throw HTML;
// in case of success, returns an array of strings
console.log(HTML);
```
## Parse Single Clean Data Block
```js
const edjsParser = edjsHTML();
const blockHTML = edjsParser.parseBlock(editorjs_data_block);
// returns string of html for this block
console.log(blockHTML);
```
## Get the list of missing parser functions
```js
const edjsParser = edjsHTML();
// returns the list of missing parser functions
const blockHTML = edjsParser.validate(editorjs_data);
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.
```js
// Your custom editorjs generated block
{
type: "custom",
data: {
text: "Hello World"
}
}
```
```js
// Parse this block in editorjs-html
function customParser(block){
return ` ${block.data.text} `;
}
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](https://github.com/pavittarx/editorjs-html/releases) for more information.
## Contribution
Create an issue or send a PR for any contributions you would like to make.
I am thankful for everyone who has contributed their own bits to the repository. Even though the library is small and the scope for writing new or lots of features is limited. I still grateful to see a lots of contributions coming in.
## Suggestions & Recommendations
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](https://www.buymeacoffee.com/pavittarx)
## License
MIT Public License
## Author
[@pavittarx](https://github.com/pavittarx)