Editor.js plugin for Cotonti CMF - Modern block-style editor
Content editor and 2 way parser plugin:
- from Editor.js blocks to HTML
- from HTML to Editor.js blocks
Plugin markups created HTML content with special classes. This classes described in table.
| Package | Key | Main CSS Class (with default prefix) | Additional / modificator CSS classes (with default prefix) |
|---|---|---|---|
@editorjs/headereditorjs-header-with-alignment | header | .prs-header | alignment:.prs_left.prs_right.prs_center.prs_justify |
@editorjs/paragrapheditorjs-paragraph-with-alignment | paragraph | .prs-paragraph | alignment:.prs_left.prs_right.prs_center.prs_justify |
@editorjs/inline-code | |||
@editorjs/marker | |||
@editorjs/underline | |||
@editorjs/list | list | .prs-list | additional:.prs_ordered |
@editorjs/raw | raw | ||
@editorjs/simple-image | simpleImage | .prs-image | additional:.prs_withborder.prs_withbackground.prs_stretched |
@editorjs/embed | embed | .prs-embed | additional:.prs_youtube.prs_codepen.prs_vimeo |
@editorjs/link | linkTool | .prs-linktool | additional:.prs_title.prs_description.prs_sitename |
@editorjs/delimiter | delimiter | .prs-delimiter | |
editorjs-alert | alert | .prs-alert | alignment:.prs_left.prs_right.prs_centeradditional: .prs_primary.prs_secondary.prs_info.prs_success.prs_warning.prs_danger.prs_light.prs_dark |
@editorjs/warning | warning | .prs-warning | |
@editorjs/table | table | .prs-table | additional:.prs_withheadings |
@editorjs/quote | quote | .prs-quote | alignment:.prs_left.prs_center |
@editorjs/code | code | .prs-code |
- Unpack to plugins directory
- Enable plugin from admin panel
- Run
composer installinsidesrcdirectory plugin (Composer must be installed) - Set Editorjs markup parser in configurations Pages module
- You can turn off unnecessary tools in
editorjs.editor.php - Set sanitize data from client with HTML Purifier rules in
sanitize-blocks-config.json - Set custom prefix (default is
prs) for generated classes in plugin configuration
For more information on cleaning rules, see: https://github.com/editor-js/editorjs-php
<h2 class="prs-header prs_center">Lorem</h2><p class="prs-paragraph prs_center"> <code class="inline-code">Pellentesque</code> <i>malesuada fames</i> <mark class="cdx-marker">tempus</mark> </p><ol class="prs-list prs_ordered"> <li></li> </ol><ul class="prs-list"> <li></li> </ul><table class="prs-table prs_withheadings"> <thead> <tr> <th>1</th><th>2</th> </tr> </thead> <tbody> <tr> <td>a</td><td>b</td> </tr> </tbody> </table><pre class="prs-code"> <code></code> </pre><figure class="prs-embed prs_youtube"> <iframe width="580" height="320" src="https://www.youtube.com/embed/CwXOrWvPBPk" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="1"></iframe> <figcaption>Shrek (2001) Trailer</figcaption> </figure><hr class="prs-delimiter"><figure class="prs-linkTool"> <a href="https://github.com/" target="_blank"> <img src="https://example.com/cat.png" alt=""> <p class="prs_title">Title</p> <p class="prs_description">Description</p> <p class="prs_sitename">example.com</p> </a> </figure><figure class="prs-image prs_withborder prs_withbackground prs_stretched"> <img src="" alt=""> <figcaption></figcaption> </figure><figure class="prs-quote prs_center"> <blockquote></blockquote> <figcaption></figcaption> </figure><div class="prs-warning"> <i></i> <h4>Title</h4> <p>Message</p> </div><p class="prs-alert prs_center prs_success"> Alert! </p><div class="prs-raw"> Raw HTML ... </div>For more information about parser, see: https://github.com/editor-js/editorjs-php