73
Free
Add to project

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
  • Easy to use extending interface, that allows you to build and publish your own blocks separatly in marketplace of OctoberCMS!

Integrations ready:

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

Blocks supported:

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

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. reazzon.ru

Russian OctoberCMS community: OctoClub.ru

The following plugin is required
Drivers
Free

Drivers

Provider of third party drivers.

91,884 installations
# 20 in Free of all time.
Free

Drivers

Provider of third party drivers.

Developer Tools

Beautifull content

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 a column in a database that is set to text.

  1. Create a column with type text at your Model table, or use an already existing one.
  2. Add 'ReaZzon.Editor.Behaviors.ConvertToHtml' to $implement attribute of your model.
  3. Add get<YourColumnName>HtmlAttribute() method and paste line of code as in the example below: 
    return $this->convertJsonToHtml($this->YourColumnName);
  4. Render your field {{ model.YourColumnName_html|raw }}
  5. Add editor styles to your page by <link href="/plugins/reazzon/editor/assets/css/editorjs.css" rel="stylesheet">

Example of model:

// ...
class Post extends Model
{

    // ...

    public $implement = [
        'ReaZzon.Editor.Behaviors.ConvertToHtml'
    ];

    // ...

    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 a new Plugin for your block or use your already existing.
  2. Open yours Plugin.php
  3. Create new method registerEditorBlocks(), and by example below add blocks array and scripts for them. 
    /**
 * Registers additional blocks for EditorJS
 * @return array
 */
public function registerEditorBlocks()
{
    return [
        'raw' => [
            'settings' => [
                'class' => 'RawTool'
            ],
            'validation' => [
                'html' => [
                    'type' => 'string',
                    'allowedTags' => '*',
                ]
            ],
            'scripts' => [
                '/plugins/reazzon/editor/formwidgets/editorjs/assets/js/tools/raw.js',
            ],
            'view' => 'reazzon.editor::blocks.raw'
        ],
    ];
}
  4. Done.

Now you can publish your own block to marketplace!

1.9.6

Fix uploaded images path

Oct 14, 2024
1.9.5

Vendor update. Plugins update. Improve compatibility with October CMS v3 and new Turbo router.

Sep 09, 2022
1.9.4

Fix compatibility issues with October CMS v3

Aug 04, 2022
1.9.3

Support of latest October CMS V2, and V3. Small refactor of extender interface.

May 08, 2022
1.9.2

Removed deprecated config

Mar 14, 2022
1.9.1

Fix errors if extension plugin doesnt have new methods

Mar 14, 2022
1.9.0

Added event to extend editorjs config right before render

Feb 23, 2022
1.8.1

Fixed bug with blocknames. Thanks @sergeitoroptsev

Feb 23, 2022
1.8.0

Added support to override block views from theme partials. Fixed StaticPage support, fixed Rainlab.Blog support.

Feb 22, 2022
1.7.9

Changed composer dependency version for editor-js-php

Sep 10, 2021
1.7.8

Fix for Ocotber v2 when editorjs opened on page with monaco editor and other vue components.

Aug 07, 2021
1.7.5

Fix for October V2. Thanks @shiftaltd. Possible fix for Editor JS in ML Static Pages

May 07, 2021
1.7.4

Fixed height stretching, added composer.json for October CMS v2

Apr 27, 2021
1.7.3

Upgrading EditorJS vendor to 2.19.1.

Feb 24, 2021
1.7.2

Fix check backend referer. (Thanks for debug [@m49n](https://github.com/m49n)~

Feb 24, 2021
1.7.1

Fixing rendering of content.

Jan 17, 2021
1.7.0

Fix style in plugins. !!!Fix security. Refactoring code plugins.

Jan 17, 2021
1.6.6

Fixing validation errors on rendering content.

Dec 09, 2020
1.6.5

New drag and drop reorder functionality. Updating link tool and some styles fixes.

Oct 04, 2020
1.6.4

Dropping October.Drivers plugin from requiring

Oct 03, 2020
1.6.3

New block "Attaches", provides ability to upload any file to your editor.

Oct 03, 2020
1.6.2

Fixing disposing of EditorJs. Fixing upload url for images. Now EditorJS can be placed inside repeater

Oct 03, 2020
1.6.1

Fixing typos, and delimiter block

Oct 02, 2020
1.6.0

!!! Refactoring extending system. Changing method for converting blocks to html. Please read upgrade guide

Oct 02, 2020
1.5.2

Fixing RainLab.StaticPages translate saving.

Sep 27, 2020
1.5.1

!!! Read upgrade guide, if you already have model with editorJS field

Sep 23, 2020
1.5.0

RainLab.Translate support. Now EditorJS supports multilanguage. Thanks for help @yurasovm

Sep 23, 2020
1.4.0

Fixed bug with namespaces, added Quote block and Underline inline tool

Jul 30, 2020
1.3.71

Small typo fix

Jul 30, 2020
1.3.7

Small files cleanup and changes

Jul 30, 2020
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'
        ]
    ];
}

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.