Skip to content

techdiary-dev/editorjs-parser

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

codecov License: GPL v3

Simple PHP Parser for Editor.js

Parse to HTML clean JSON Data from Editor.js

Installation

composer require durlecode/editorjs-simple-html-parser

Usage

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();

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
<div class="prs-code">
    <pre>
        <code></code>
    </pre>
</div>
Embed
(Actually working with Youtube, Codepen & Gfycat)
<div class="prs-embed">
    <iframe src="" height="300"></iframe>
</div>
Delimiter
<hr class="prs-delimiter">
Header
<h2 class="prs-h2">Lorem</h2>
Link
<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>
Ordered List
<div class="prs-list">
    <ol>
        <li></li>
    </ol>
</div>
Unordered List
<div class="prs-list">
    <ul>
        <li></li>
    </ul>
</div>
Paragraph
<p class="prs-paragraph">
    <code class="inline-code">Pellentesque</code> 
    <i>malesuada fames</i> 
    <mark class="cdx-marker">tempus</mark>
</p>
Image
<figure class="prs-image">
    <img src="" class="prs-image-border prs-image-background" alt="">
    <figcaption></figcaption>
</figure>
Warning
<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>
Raw
<div class="prs-raw">
    Raw HTML ...
</div>

About

A simple html parser write in php for Editor.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • PHP 100.0%