{"id":27075256,"url":"https://github.com/MichaelMikeJones/editorjs-parser","last_synced_at":"2025-04-06T00:02:50.303Z","repository":{"id":39373724,"uuid":"302007767","full_name":"miadabdi/editorjs-parser","owner":"miadabdi","description":"This package parses output blocks of Editorjs to html","archived":false,"fork":false,"pushed_at":"2024-04-22T12:06:34.000Z","size":65,"stargazers_count":86,"open_issues_count":7,"forks_count":30,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-28T06:02:23.678Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/miadabdi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-07T10:56:53.000Z","updated_at":"2024-05-19T14:48:34.930Z","dependencies_parsed_at":"2024-05-19T14:48:32.427Z","dependency_job_id":"490e3add-d353-459a-b202-bcd6bb12492a","html_url":"https://github.com/miadabdi/editorjs-parser","commit_stats":null,"previous_names":["michaelmikejones/editorjs-parser"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miadabdi%2Feditorjs-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miadabdi%2Feditorjs-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miadabdi%2Feditorjs-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miadabdi%2Feditorjs-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miadabdi","download_url":"https://codeload.github.com/miadabdi/editorjs-parser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415959,"owners_count":20935388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-06T00:01:43.532Z","updated_at":"2025-04-06T00:02:50.289Z","avatar_url":"https://github.com/miadabdi.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["JavaScript"],"readme":"# Editorjs-parser\n\neditorjs-parser is a NPM package for parsing the output object of [EditorJs](https://github.com/codex-team/editor.js) to HTML.\n\n# Installation\n\n### CDN\n\n- https://cdn.jsdelivr.net/npm/editorjs-parser@1/build/Parser.node.min.js (Node only)\n- https://cdn.jsdelivr.net/npm/editorjs-parser@1/build/Parser.browser.min.js (Browser only)\n\n### NPM\n\nUse the package manager [npm](https://www.npmjs.com/) to install editorjs-parser.\n\n```bash\nnpm install --save editorjs-parser\n```\n\n# Usage\n\nTo use the package in browser, import Browser verison through CDN to your HTML file and just call `edjsParser` class:\n\n```javascript\nconst parser = new edjsParser(config, customParsers, embedMarkup);\n```\n\nTo import the package in Node and Front-end code:\n\n```javascript\nconst edjsParser = require(\"editorjs-parser\");\nconst parser = new edjsParser(config, customParsers, embedMarkup);\n```\n\n**NOTE:** **Parameters are optional**. If you want to only pass the second parameter, set the first parameter to `undefined`.\n\nTo parse all blocks, pass the exact EditorJs' output object:\n\n```javascript\nconst markup = parser.parse(output);\n```\n\nTo parse one block, pass a complete block:\n\n```javascript\nconst markup = parser.parseBlock(block);\n```\n\n**NOTE:** HTML markup in code blocks are already sanitized and ready to be send to browser. You don't have to do anything.\n\n**NOTE:** Code blocks are compatible with [highlight.js](https://github.com/highlightjs/highlight.js/)\n\n## Supported blocks\n\n- Paragraph\n- Header\n- Table\n- Raw\n- Delimiter\n- Code\n- Quote\n- List\n- Embed\n- Image\n- Simple-image\n\n**NOTE:** It is pointless to use both `image` and `simple-image` block types in the same editor insatnce, but this parser supports both of them and you can use any of them that fulfills your needs.\n\n## Custom or overriding parser methods\n\nIf you have a custom block like so:\n\n```javascript\n{\n   type: \"customBlock\",\n   data: {\n       // Your data\n   }\n}\n```\n\nYou can pass an object of custom parsers or override existing parsers of supported blocks as the second argument, like so:\n\n```javascript\nconst customParsers = {\n    customBlock: function(data, config) {\n        // parsing functionality\n        // the config arg is user provided config merged with default config\n    },\n    image: function(data, config): {\n        return `\u003cimg src=\"${data.file.url}\" alt=\"${data.caption}\" \u003e`;\n    }\n}\n\nconst parser = new edjsParser(undefined, customParsers);\n```\n\n**NOTE:** The config arg is user provided config merged with default configuration.\n\n## Configuration\n\nThis is the default configuration. You can override any of these properties by passing a config object.\n\n```javascript\n{\n  image: {\n    use: \"figure\",\n    // use figure or img tag for images (figcaption will be used for caption of figure)\n    // if you use figure, caption will be visible\n    imgClass: \"img\", // used class for img tags\n    figureClass: \"fig-img\", // used class for figure tags\n    figCapClass: \"fig-cap\", // used class for figcaption tags\n    path: \"absolute\",\n    // if absolute is passed, the url property which is the absolute path to the image will be used\n    // otherwise pass a relative path with the filename property in \u003c\u003e like so: '/img/\u003cfileName\u003e'\n  },\n  paragraph: {\n    pClass: \"paragraph\", // used class for paragraph tags\n  },\n  code: {\n    codeBlockClass: \"code-block\", // used class for code blocks\n  },\n  embed: {\n    useProvidedLength: false,\n    // set to true if you want the returned width and height of editorjs to be applied\n    // NOTE: sometimes source site overrides the lengths so it does not work 100%\n  },\n  quote: {\n    applyAlignment: false,\n    // if set to true blockquote element will have text-align css property set\n  },\n};\n```\n\n### Relative path (images)\n\nTo use the relative path, you should return the filename of the uploaded image from your backend, alongside the url (for more info [docs](https://github.com/editor-js/image#backend-response-format-)).\n\nThen include the property name of filename in config like so: (for example the property name of the returned filename is `imageFileName`)\n\n```javascript\nconst config = {\n  image: {\n    path: \"/img/\u003cimageFileName\u003e\";\n  }\n};\n\nconst parser = new edjsParser(config);\n```\n\n**NOTE:** Images will have class `img`.\n\n**NOTE:** If the image is streched, the parsed `img` tag will have `img-fullwidth` as class.\n\n**NOTE:** If image is set to have a border, the parsed `img` tag will have `img-border` as class.\n\n**NOTE:** If `withBackground` is set to true, the parsed `img` tag will have `img-bg` as class.\n\nYou can style, according to these classes.\n\n### Apply provided lengths (embeds)\n\nIf you want the returned width and height of embeded element to be applied, set `useProvidedLength` option to true in config:\n\n```javascript\nconst config = {\n  embed: {\n    useProvidedLength: true,\n  },\n};\n\nconst parser = new edjsParser(config);\n```\n\n### Custom embed markup (embeds)\n\nIf you want to render a custom markup for your embed service, pass it in an object in third argument. For example if you want your own markup to be rendered for Youtube video embed, you got to do this:\n\n```javascript\nconst parser = new edjsParser(undifined, undifined, {\n  youtube: `Your markup in string`,\n});\n```\n\nYou also have access to `data` object. To use that you should put variable names in placeholders, like so:\n\n```javascript\nconst customEmbeds = {\n  youtube: `\u003ciframe src=\"\u003c%data.embed%\u003e\" width=\"\u003c%data.width%\u003e\"\u003e\u003c%data.caption%\u003e\u003c/iframe\u003e`,\n};\n\nconst parser = new edjsParser(undifined, undifined, customEmbeds);\n```\n\n**NOTE:** If you want to have [useProvidedLength](#apply-provided-lengths-embeds) functionality, use `\u003c%data.length%\u003e` instead of `\u003c%data.width%\u003e` and `\u003c%data.height%\u003e` in embed markups.\n\n`\u003c%data.length%\u003e` returns string like this: `width=\"300\" height=\"500\"`\n\n### Qoute Alignment (quotes)\n\nIf you need the returned alignment of blockquotes to be set, set `applyAlignment` to true in config:\n\n```javascript\nconst config = {\n  quote: {\n    applyAlignment: true;\n  }\n};\n\nconst parser = new edjsParser(config);\n```\n\n# Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.\n\nFor any issue or feature request, please open an issue.\n\n# License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMichaelMikeJones%2Feditorjs-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMichaelMikeJones%2Feditorjs-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMichaelMikeJones%2Feditorjs-parser/lists"}