196

Product support

Visit this product's website for support.

Categories

Editor for OctoberCMS

Meet the new Editor. The most advanced "WYSWYG" (if you can say so) editor ever.

Key features

  • It is a block-styled editor
  • It returns clean data output in JSON
  • Designed to be extendable and pluggable with a simple API
  • Native OctoberCMS events support for convenient extending of custom blocks

Integrations ready:

  • RainLab.Blog
  • RainLab.StaticPages
  • Lovata.GoodNews
  • Indikator.News

Blocks supported at the moment:

  • Paragraph
  • Header
  • List (ul, ol)
  • CheckList
  • Link (Opengraph)
  • Table
  • Code
  • Raw
  • Embed
  • Delimiter
  • Image (paste url, drag'n'drop, upload)

What does it mean «block-styled editor»

Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.

There are dozens of ready-to-use Blocks and the simple API for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.

What does it mean clean data output

Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block.

Given data can be used as you want: render with HTML for Web clients, render natively for mobile apps, create markup for Facebook Instant Articles or Google AMP, generate an audio version and so on.


Editor.js developed by CodeX Club of web-development. Adapted for OctoberCMS by Nick Khaetsky. https://reazzon.ru

How to install

Install plugin by OctoberCMS plugin updater.

Go to Settings –> Updates&Plugins find EditorJS in plugin search. Click on icon and install it.

Usage

After installing plugin, you are now able to set in fields.yaml type:editorjs to any desirable field. That's all. You are not limited of how many editors can be rendered at one page.

How to enable integrations

  1. Make sure that the desirable plugin for integration is installed in system (list of supported plugins listed in Key Features section)
  2. Go to Settings
  3. In the sidebar find Editor Settings button inside Editor tab
  4. Enable desirable integrations
  5. Done.

How to render HTML from Editor JSON

To implement Editor to your Model, you must prepare column in database that is set to text and added to $jsonable property.

  1. Create column with type text at your Model table, or use already existing one.
  2. Add column to $jsonable array in your Model.
  3. Add \ReaZzon\Editor\Traits\ConvertEditor trait to your Model.
  4. Add get<YourColumnName>HtmlAttribute() method and paste line of code as in the example below:
    return $this->convertJsonToHtml($this->YourColumnName);
  5. Render your field {{ model.YourColumnName_html|raw }}
  6. Add editor styles to your page by &lt;link href=&quot;/plugins/reazzon/editor/assets/css/editorjs.css&quot; rel=&quot;stylesheet&quot;&gt;

Example of model:

// ...
class Post extends Model
{
    use \ReaZzon\Editor\Traits\ConvertEditor;

    // ...

    /**
     * @var array Attributes to be cast to JSON
     */
    protected $jsonable = [
        'content'
    ];

    // ...

    public function getContentHtmlAttribute()
    {
        return $this->convertJsonToHtml($this->content);
    }
}

Example of rendering:

{{ post.content_html|raw }}

Extending

You can create any new block as you like by reading official documentation that you can find here Editor.Js docs

After creating new JS scripts with new block type Class, you can go through steps below to extend EditorJS formwidget:

  1. Create new method in your Plugin.php file named registerEditorBlocks(), and by example below add blocks array and scripts for them.
    /**
     * Registers additional blocks for EditorJS
     * @return array
     */
    public function registerEditorBlocks()
    {
        return [
            'blocks' =>[
                'raw' => [
                    'class' => 'RawTool'
                ],
            ],
            'scripts' => [
                '/plugins/reazzon/testcontent/assets/js/raw.js'
            ]
        ];
    }
  2. Done.

Now you can even publish your editorjs extender plugin to marketplace, so everyone can use your block!

1.3.6

Warning text fixed

Jun 06, 2020

1.3.5

Image block added. Added setting for toggling off security of outside api calls to editor plugins. Code cleanup and slight refactor.

Jun 05, 2020

1.3.0

Added integrations with RainLab.Blog, RainLab.StaticPages, Lovata.GoodNews, Indikator.News.

Jun 04, 2020

1.2.0

!!! Refactoring of extender method

Jun 04, 2020

1.1.0

Ability to add custom blocks through third-party octobercms plugins, 3 new blocks, slight refactor of formwidget configuration.

Jun 03, 2020

1.0.62

Updated README

Jun 03, 2020

1.0.61

Repacking plugin

Jun 03, 2020

1.0.6

Fixing Link plugin is not being rendered

Jun 03, 2020

1.0.5

Fixing small issue of block creating model on first button click

Jun 03, 2020

1.0.4

Fixing bug, that blocks editor from rendering

Jun 03, 2020

1.0.2

Added readme and license files and information

Jun 03, 2020

1.0.1

Small fixes

Jun 02, 2020

1.0.0

First version of Editor

Jun 02, 2020

Upgrading To 1.2

If you are not developing additional blocks for EditorJS, you can skip this instruction and safely update the plugin.

Version 1.2 brings new way to extend EditorJS completely abandoning events system. For that you need to: Instruction to upgrade:

  1. Create new method registerEditorBlocks() in your Plugin.php
  2. Move arrays with blocks and scripts to it like in example below
  3. Done.

Before:

/**
 * Boot method, called right before the request route.
 *
 * @return array
 */
public function boot()
{
    \Event::listen('reazzon.editor.extend_editor_scripts', function (){
        return '/plugins/reazzon/testcontent/assets/js/raw.js';
    });
    \Event::listen('reazzon.editor.extend_editor_tools_config', function (){
        return [
            'raw' => [
                'class' => 'RawTool'
            ],
        ];
    });
}

After:

/**
 * Registers additional blocks for EditorJS
 * @return array
 */
public function registerEditorBlocks()
{
    return [
        'blocks' =>[
            'raw' => [
                'class' => 'RawTool'
            ],
        ],
        'scripts' => [
            '/plugins/reazzon/testcontent/assets/js/raw.js'
        ]
    ];
}