Parse to HTML clean JSON Data from Editor.js
composer require durlecode/editorjs-simple-html-parser
use Durlecode\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
use Durlecode\EJSParser\Parser; $parser = new Parser($data); $parser->setPrefix("cat"); $parsed = $parser->toHtml();
| 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 |
Return generated HTML
Set CSS classes Prefix
Return current prefix
Return Editor.js content version
Return Editor.js content timestamp
Return Editor.js content blocks
<div class="prs-code"> <pre> <code></code> </pre> </div>
<div class="prs-embed"> <iframe src="" height="300"></iframe> </div>
<hr class="prs-delimiter">
<h2 class="prs-h2">Lorem</h2>
<a href="https://github.com/" target="_blank" class="prs-link"> <div class="prs-link-container-with-img"> <div class="prs-link-title">Title</div> <div class="prs-link-description">Description</div> <div class="prs-link-url">https://example.com/</div> </div> <div class="prs-link-img-container"> <img src="https://example.com/cat.png" alt=""> </div> </a>
<div class="prs-list"> <ol> <li></li> </ol> </div>
<div class="prs-list"> <ul> <li></li> </ul> </div>
<p class="prs-paragraph"> <code class="inline-code">Pellentesque</code> <i>malesuada fames</i> <mark class="cdx-marker">tempus</mark> </p>
<figure class="prs-image"> <img src="" class="prs-image-border prs-image-background" alt=""> <figcaption></figcaption> </figure>
<div class="prs-warning"> <ion-icon name="information-outline" size="large" aria-label="information outline"></ion-icon> <div> <p>Title</p> <p>Message</p> </div> </div>
<div class="prs-raw"> Raw HTML ... </div>