SyntaxPhoenix / editorjs-symfony-parser-bundle

A symfony bundle to parse data generated by EditorJS

EditorJS Symfony Parser Bundle

Table of Contents

1. About The Project
   • Built With
2. Usage
   • Installation
   • Supported plugins
   • Methods
3. Roadmap
4. Contributing
5. License
6. Contact

About The Project

The EditorJS-ParserBundle parses editorjs-configs Editor.js. It is designed to be best integrated in Symfony and also offers a Twig-Extension. The bundle is based on Durlecode/editorjs-simple-html-parser, but strongly improved the parsing by using an object-oriented approach.

Built With

• editorjs-simple-html-parser

Usage

use SyntaxPhoenix\EJSParserBundle\Parser\EditorjsParser;

$parser = new EditorjsParser($data);
$html = $parser->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"
}

Installation

composer require syntaxphoenix/editorjs-symfony-parser-bundle

Supported Plugins

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/link	link	.prs-link
@editorjs/list	list	.prs-list
@editorjs/paragraph	paragraph	.prs-paragraph
@editorjs/raw	raw
@editorjs/simple-image	simpleImage	.prs-image
@editorjs/image	image	.prs-image
@editorjs/warning	warning	.prs-warning
@editorjs/table	table	.prs-table
editorjs-alert	alert	.prs-alert + .prs-alert-{type}
editorjs-youtube-embed	youtubeembed	.prs-youtubeembed

If you want to add a new Parser for a specific editorjs-plugin you can fork the master and make a pull-request. Please also change the readme in that case and add the parser you have edited.

Methods

toHtml()

Return generated HTML

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>

Alert

<div class="prs-alert prs-alert-{type}">
 <div>My Text</div>
</div>

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the GPLv3 License. See LICENSE for more information.

Contact

@SyntaxPhoenix - [e-mail]

Project Link: https://github.com/SyntaxPhoenix/editorjs-symfony-parser-bundle