PHPackages                             reazzon/editor - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. reazzon/editor

ActiveOctober-plugin

reazzon/editor
==============

No description provided yet...

2.0(1y ago)253013[4 issues](https://github.com/FlusherDock1/EditorJS/issues)PHP

Since Jun 4Pushed 1y ago2 watchersCompare

[ Source](https://github.com/FlusherDock1/EditorJS)[ Packagist](https://packagist.org/packages/reazzon/editor)[ RSS](/packages/reazzon-editor/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (10)Dependencies (2)Versions (19)Used By (0)

**EditorJS for OctoberCMS**
---------------------------

[](#editorjs-for-octobercms)

This plugin enables [EditorJS](https://github.com/codex-team/editor.js) to be used as a form widget for your backend panel. EditorJS is a versatile and modern content editor that stores content as JSON data, and renders it in any way you want.

### **Key features**

[](#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
- Full compatibility with October CMS forms, use it with Tailor or anywhere else.
- Flexible extension base, you can create any blocks you need for your content.

**Integrations ready:**

- RainLab.Blog
- Lovata.GoodNews
- Tailor

**Blocks supported:**

- Text
- Header
- List
- Quote
- Image
- Attachment
- Table
- Code
- Warning
- Delimiter
- Raw HTML
- ... and any block that you want to create

### **What does it mean «block-styled editor»**

[](#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**

[](#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.

**How to install**
------------------

[](#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**
---------

[](#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

[](#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

[](#how-to-render-html-from-editorjs-json)

There are two ways of rendering EditorJS:

#### First: TWIG filter `|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

[](#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**
-------------------------

[](#create-your-own-block)

Blocks are called Tools in EditorJS ecosystem.

First, you need to follow official documentation of [EditorJs](https://editorjs.io/the-first-plugin/) 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 ```