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 2 months 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 (6 months ago)
- Last Synced: 2024-05-19T14:34:47.332Z (4 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
- awesome - pavittarx/editorjs-html - A javascript library to parse editorjs clean data to html. It is adaptable and usable in all kind of projects. (TypeScript)
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)