How to install

You can install this plugin via October packet manager inside backend panel, or run command below:

php artisan plugin:install ReaZzon.Editor

Usage

After installing plugin, you are now able to set in fields.yaml type: editorjs to any desirable field. 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. Find Editor section and clock on EditorJs Settings button
4. Enable desirable integrations

How to render HTML from EditorJS JSON

There are two ways of rendering EditorJS:

First: TWIG filter |editorjs

1. You have model with type: editorjs field.
2. Inside your theme use |editorjs filter to convert JSON data to html.

   {{ post.content|editorjs }}

Second: Accessor inside your model

For example, you have content field, that has editorjs json data.

1. Create accessor in your model. Note that your accessor should have different name.

   public function getContentHtmlAttribute()
   {
       return \ReaZzon\Editor\Classes\JSONConverter::convertAndGetHTML($this->content);
   }

2. Use new attribute to render html wherever you want.

   {{ post.content_html }}

Create your own block

Blocks are called Tools in EditorJS ecosystem.

First, you need to follow official documentation of EditorJs and compile yourself js file with new tool.

After you got yours JS file, you can register it like all other tools registered inside tools folder.

1. Create new plugin

   php artisan create:plugin Acme.Foo

2. Create new file: /acme/foo/tools/ExampleTool.php

   <?php namespace Acme\Foo\Tools;
   
   use ReaZzon\Editor\Classes\Tool;
   
   class ExampleTool extends Tool
   {
       public function registerSettings(): array
       {
           return [
               'class' => 'Example'
           ];
       }
   
       public function registerValidations(): array
       {
           return [
               'value' => [
                   'type' => 'string'
               ]
           ];
       }
   
       public function registerScripts(): array
       {
           return [
               '/acme/foo/assets/js/exampleTool.js'
           ];
       }
   
       public function registerView(): ?string
       {
           return 'acme.foo::blocks.example';
       }
   }

3. Create view file with html of your block: /acme/foo/views/blocks/example.htm

   <div class="my-example-block">
       {{ value }} {# any data you have inside your block #}
   </div>

4. Put your compiled JS file inside assets/js folder, and name it accordingly, example exampleTool.js
5. Register your new tool inside Plugin.php of your plugin

   /**
    * registerEditorJsBlocks extension blocks for EditorJs
    */
   public function registerEditorJsTools(): array
   {
       return [
           \Acme\Foo\Tools\ExampleTool::class => 'example',
       ];
   }

6. Done! Your tool added to all editorjs.

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

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'
        ]
    ];
}

Upgrading To 1.5.1

You don't need your editorJS field to be jsonable. Remove it from $jsonable property of your model. Otherwise, your data will be corrupted.

Upgrading To 1.6.0

In all your models where editorsjs field converts to html blocks you need to do these steps:

1. Remove ConvertEditor trait use ConvertEditor; from your model;

2. Add array property $implement and add to it 'ReaZzon.Editor.Behaviors.ConvertToHtml'

   Example:

   class Post extends Model
   {
      // Remove use ConvertEditor;
      // ...
   
       public $implement = [
          'ReaZzon.Editor.Behaviors.ConvertToHtml'
       ];
   
      // ...
   }

3. That's it, now you can use your model as it was before.

Upgrading To 1.7.0

Trait ReaZzon\Editor\Traits\PluginHelper is deprecated, please use standard Laravel Resources response and ReaZzon\Editor\Classes\Exceptions\PluginErrorException for throwing an error.

For third party frontend plugins, use ReaZzon\Editor\Classes\Middlewares\PluginGroupMiddleware to add standard access restrictions.

Upgrading to 2.0

1. All behaviors and traits are deprecated and no longer exist. Remove ConvertToHtml behavior from your model, and read README.md on how to convert JSON to HTML.
2. All old extensions should be redone, and registered in Plugin.php accordingly to instruction in README.md section Create your own block.