Editorjs plugin

January 6, 2024 · View on GitHub

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.

Currently supported Editor.js Tools:

Package	Key	Main CSS Class (with default prefix)	Additional / modificator CSS classes (with default prefix)
`@editorjs/header` `editorjs-header-with-alignment`	`header`	`.prs-header`	alignment: `.prs_left` `.prs_right` `.prs_center` `.prs_justify`
`@editorjs/paragraph` `editorjs-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_center` additional: `.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`

Installation

Unpack to plugins directory
Enable plugin from admin panel
Run composer install inside src directory plugin (Composer must be installed)
Set Editorjs markup parser in configurations Pages module

Configuration

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

Generated HTML

<h2 class="prs-header prs_center">Lorem</h2>

Paragraph

<p class="prs-paragraph prs_center">
    <code class="inline-code">Pellentesque</code> 
    <i>malesuada fames</i> 
    <mark class="cdx-marker">tempus</mark>
</p>

Ordered List

<ol class="prs-list prs_ordered">
    <li></li>
</ol>

Unordered List

<ul class="prs-list">
    <li></li>
</ul>

Table

<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>

Code

<pre class="prs-code">
    <code></code>
</pre>

Embed

(Actually working with Youtube)

<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>

Delimiter

<hr class="prs-delimiter">

LinkTool

<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>

Image

<figure class="prs-image prs_withborder prs_withbackground prs_stretched">
    <img src="" alt="">
    <figcaption></figcaption>
</figure>

Quote

<figure class="prs-quote prs_center">
    <blockquote></blockquote>
    <figcaption></figcaption>
</figure>

Warning

<div class="prs-warning">
    <i></i>
    <h4>Title</h4>
    <p>Message</p>
</div>

Alert

<p class="prs-alert prs_center prs_success">
    Alert!
</p>

Raw

<div class="prs-raw">
    Raw HTML ...
</div>

For more information about parser, see: https://github.com/editor-js/editorjs-php