{"id":20877425,"url":"https://github.com/flusherdock1/editorjs","last_synced_at":"2025-07-21T11:34:02.870Z","repository":{"id":41804363,"uuid":"268629405","full_name":"FlusherDock1/EditorJS","owner":"FlusherDock1","description":"Formwidget plugin for October CMS","archived":false,"fork":false,"pushed_at":"2024-02-15T07:53:10.000Z","size":1012,"stargazers_count":23,"open_issues_count":4,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-03-15T09:08:45.124Z","etag":null,"topics":["cms","editorjs","october","octobercms","octobercms-formwidget","octobercms-plugin"],"latest_commit_sha":null,"homepage":"https://octobercms.com/plugin/reazzon-editor","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FlusherDock1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-06-01T20:50:02.000Z","updated_at":"2024-03-15T09:08:45.125Z","dependencies_parsed_at":"2024-02-07T20:49:00.980Z","dependency_job_id":null,"html_url":"https://github.com/FlusherDock1/EditorJS","commit_stats":{"total_commits":77,"total_committers":7,"mean_commits":11.0,"dds":"0.18181818181818177","last_synced_commit":"c82916e5dbc88331b26d009c267f5f7d0e73cf90"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlusherDock1%2FEditorJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlusherDock1%2FEditorJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlusherDock1%2FEditorJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlusherDock1%2FEditorJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlusherDock1","download_url":"https://codeload.github.com/FlusherDock1/EditorJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225141812,"owners_count":17427362,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","editorjs","october","octobercms","octobercms-formwidget","octobercms-plugin"],"created_at":"2024-11-18T06:56:59.320Z","updated_at":"2025-05-12T15:32:56.691Z","avatar_url":"https://github.com/FlusherDock1.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"## **EditorJS for OctoberCMS**\n\nThis plugin enables [EditorJS](https://github.com/codex-team/editor.js) to be used as a form widget for your backend panel.\nEditorJS is a versatile and modern content editor that stores content as JSON data, and renders it in any way you want.\n\n### **Key features**\n\n- It is a block-styled editor\n- It returns clean data output in JSON\n- Designed to be extendable and pluggable with a simple API\n- Full compatibility with October CMS forms, use it with Tailor or anywhere else.\n- Flexible extension base, you can create any blocks you need for your content.\n\n**Integrations ready:**\n- RainLab.Blog\n- Lovata.GoodNews\n- Tailor\n\n**Blocks supported:**\n- Text\n- Header\n- List\n- Quote\n- Image\n- Attachment\n- Table\n- Code\n- Warning\n- Delimiter\n- Raw HTML\n- ... and any block that you want to create\n\n### **What does it mean «block-styled editor»**\n\nWorkspace 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.\n\nThere 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.\n\n### **What does it mean clean data output**\n\nClassic 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.\n\nGiven 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.\n\n## **How to install**\n\nYou can install this plugin via October packet manager inside backend panel, or run command below:\n\n```bash\nphp artisan plugin:install ReaZzon.Editor\n```\n\n## **Usage**\n\nAfter installing plugin, you are now able to set in `fields.yaml`  `type: editorjs` to any desirable field.\nYou are not limited of how many editors can be rendered at one page.\n\n### How to enable integrations\n\n1. Make sure that the desirable plugin for integration is installed in system (list of supported plugins listed in Key Features section)\n2. Go to Settings\n3. Find `Editor` section and clock on `EditorJs Settings` button\n4. Enable desirable integrations\n\n### How to render HTML from EditorJS JSON\n\nThere are two ways of rendering EditorJS:\n\n#### First: TWIG filter `|editorjs`\n\n1. You have model with `type: editorjs` field.\n2. Inside your theme use `|editorjs` filter to convert JSON data to html.\n    ```twig\n   {{ post.content|editorjs }}\n    ```\n\n#### Second: Accessor inside your model\n\nFor example, you have **content** field, that has editorjs json data.\n\n1. Create accessor in your model. Note that your accessor should have different name.\n\n    ```php\n    public function getContentHtmlAttribute()\n    {\n        return \\ReaZzon\\Editor\\Classes\\JSONConverter::convertAndGetHTML($this-\u003econtent);\n    }\n    ```\n2. Use new attribute to render html wherever you want.\n    ```twig\n    {{ post.content_html }}\n    ```\n\n## **Create your own block**\n\nBlocks are called Tools in EditorJS ecosystem.\n\nFirst, you need to follow official documentation of [EditorJs](https://editorjs.io/the-first-plugin/) and compile yourself js file with new tool.\n\nAfter you got yours JS file, you can register it like all other tools registered inside **tools** folder.\n\n1. Create new plugin\n    ```bash\n    php artisan create:plugin Acme.Foo\n    ```\n2. Create new file: /acme/foo/tools/ExampleTool.php\n    ```php\n    \u003c?php namespace Acme\\Foo\\Tools;\n\n    use ReaZzon\\Editor\\Classes\\Tool;\n\n    class ExampleTool extends Tool\n    {\n        public function registerSettings(): array\n        {\n            return [\n                'class' =\u003e 'Example'\n            ];\n        }\n\n        public function registerValidations(): array\n        {\n            return [\n                'value' =\u003e [\n                    'type' =\u003e 'string'\n                ]\n            ];\n        }\n\n        public function registerScripts(): array\n        {\n            return [\n                '/acme/foo/assets/js/exampleTool.js'\n            ];\n        }\n\n        public function registerView(): ?string\n        {\n            return 'acme.foo::blocks.example';\n        }\n    }\n    ```\n3. Create view file with html of your block: `/acme/foo/views/blocks/example.htm`\n    ```twig\n    \u003cdiv class=\"my-example-block\"\u003e\n        {{ value }} {# any data you have inside your block #}\n    \u003c/div\u003e\n    ```\n4. Put your compiled JS file inside `assets/js` folder, and name it accordingly, example `exampleTool.js`\n5. Register your new tool inside Plugin.php of your plugin\n    ```php\n    /**\n     * registerEditorJsBlocks extension blocks for EditorJs\n     */\n    public function registerEditorJsTools(): array\n    {\n        return [\n            \\Acme\\Foo\\Tools\\ExampleTool::class =\u003e 'example',\n        ];\n    }\n    ```\n6. Done! Your tool added to all editorjs.\n\n---\n\nEditor.js developed by CodeX Club of web-development.\nAdapted for OctoberCMS by Nick Khaetsky. [reazzon.ru](https://reazzon.ru)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflusherdock1%2Feditorjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflusherdock1%2Feditorjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflusherdock1%2Feditorjs/lists"}