syntaxphoenix / editorjs-symfony-parser-bundle
A parser-bundle for editorjs and symfony
Requires
- ext-dom: *
- ext-json: *
- masterminds/html5: ^2.7
- symfony/flex: ^1.12
- symfony/framework-bundle: ^5.0
- twig/twig: ^3.3
Requires (Dev)
- phpunit/phpunit: ^8
README
EditorJS Symfony Parser Bundle
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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
License
Distributed under the GPLv3 License. See LICENSE
for more information.
Contact
@SyntaxPhoenix - support@syntaxphoenix.com
Project Link: https://github.com/SyntaxPhoenix/editorjs-symfony-parser-bundle