Simple PHP Parser for Editor.js

Parse to HTML clean JSON Data from Editor.js

Installation

composer require durlecode/editorjs-simple-html-parser

Usage

useDurlecode\EJSParser\Parser;
$html = Parser::parse($data)->toHtml();

Where $data is the clean JSON data coming from Editor.js See $data example below

{
"time" : 1583848289745,
"blocks" : [
{
"type" : "header",
"data" : {
"text" : "Hello World",
"level" : 2
}
}
],
"version" : "2.16.1"
}

By default this will generate html with css classes with prs prefix, so if you want to change it, follow example below

useDurlecode\EJSParser\Parser;
$parser = newParser($data);
$parser->setPrefix("cat");
$parsed = $parser->toHtml();

Supported Tools

Package	Key	Main CSS Class
@editorjs/code	code	.prs-code
@editorjs/embed	embed	.prs-embed
@editorjs/delimiter	delimiter	.prs-delimiter
@editorjs/header	header	.prs-h{header-level}
@editorjs/inline-code
@editorjs/link	link	.prs-link
@editorjs/list	list	.prs-list
@editorjs/marker
@editorjs/paragraph	paragraph	.prs-paragraph
@editorjs/raw	raw
@editorjs/simple-image	simpleImage	.prs-image
@editorjs/warning	warning	.prs-warning

Methods

toHtml()

Return generated HTML

setPrefix(string $prefix)

Set CSS classes Prefix

getPrefix()

Return current prefix

getVersion()

Return Editor.js content version

getTime()

Return Editor.js content timestamp

getBlocks()

Return Editor.js content blocks

Generated HTML

Code

<divclass="prs-code"><pre><code></code></pre></div>

Embed

(Actually working with Youtube, Codepen & Gfycat)

<divclass="prs-embed"><iframesrc="" height="300"></iframe></div>

Delimiter

<hrclass="prs-delimiter">

Header

<h2class="prs-h2">Lorem</h2>

Link

<ahref="https://github.com/" target="_blank" class="prs-link"><divclass="prs-link-container-with-img"><divclass="prs-link-title">Title</div><divclass="prs-link-description">Description</div><divclass="prs-link-url">https://example.com/</div></div><divclass="prs-link-img-container"><imgsrc="https://example.com/cat.png" alt=""></div></a>

Ordered List

<divclass="prs-list"><ol><li></li></ol></div>

Unordered List

<divclass="prs-list"><ul><li></li></ul></div>

Paragraph

<pclass="prs-paragraph"><codeclass="inline-code">Pellentesque</code><i>malesuada fames</i><markclass="cdx-marker">tempus</mark></p>

Image

<figureclass="prs-image"><imgsrc="" class="prs-image-border prs-image-background" alt=""><figcaption></figcaption></figure>

Warning

<divclass="prs-warning"><ion-iconname="information-outline" size="large" aria-label="information outline"></ion-icon><div><p>Title</p><p>Message</p></div></div>

Raw

<divclass="prs-raw">
Raw HTML ...
</div>