Skip to content

Latest commit

 

History

History
282 lines (207 loc) · 7.53 KB

README.md

File metadata and controls

282 lines (207 loc) · 7.53 KB
Raw

Contributors Stargazers Issues GPLv3 License


Logo

EditorJS Symfony Parser Bundle

Table of Contents
  1. About The Project
  2. Usage
  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

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 - [email protected]

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