sckatik/moonshine-editorjs

EditorJs block editor for MoonShine

2.0.2 2025-01-22 18:07 UTC

Requires

• php: ^8.0|^8.1|^8.2
• ext-curl: *
• ext-dom: *
• ext-fileinfo: *
• ext-json: *
• codex-team/editor.js: *
• guzzlehttp/guzzle: ^7.0
• illuminate/events: ^10.0 || ^11.0
• spatie/image: ^3.0

Requires (Dev)

• moonshine/moonshine: 3.x-dev
• orchestra/testbench: ^9.0
• phpunit/phpunit: ^11.0
• rector/rector: ^1.0

Conflicts

• moonshine/moonshine: <3.0

MIT

• Dmitriy Simakov

• laravel
• editorjs
• moonshine

README

Demo

You can can play with the demo here

Installation

Install via composer:

 composer require sckatik/moonshine-editorjs

Publish the config file

 php artisan vendor:publish --tag="moonshine-editorjs-config"

Publish assets be sure to publish without them the editor will not work

 php artisan vendor:publish --tag="moonshine-editorjs-assets"

Optionally, you can publish the views if you want to change the appearance of the fields that are output from the editorJs In views blocks

 php artisan vendor:publish --tag="moonshine-editorjs"

You can also connect the necessary components or your own in editorJs.

In the view fields/editorJs.blade.php remove the line

{{ Vite::useHotFile('vendor/moonshine-editorjs/moonshine-editorjs.hot')
->useBuildDirectory("vendor/moonshine-editorjs")
->withEntryPoints(['resources/css/field.css', 'resources/js/field.js']) }}

and connect your js with a set of its components EditorJs

Config

You can disable or enable the necessary blocks in the editor. In config/moonshine-editor-js.php in the configuration block - toolSettings

In config/moonshine-editor-js.php in the configuration block - renderSettings You can customize the rendering rules from EditorJs data

Usage

Add a field to the database with the text type To output data from EditorJs, use the following methods:

use App\Models\Post;
use Sckatik\MoonshineEditorJs\Facades\RenderEditorJs;
$post = Post::find(1);
echo RenderEditorJs::render($post->body);

Defining An Accessor

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Sckatik\MoonshineEditorJs\Facades\RenderEditorJs;

class Post extends Model
{
    public function getBodyAttribute()
    {
        return RenderEditorJs::render($this->attributes['body']);
    }
}

$post = Post::find(1);
echo $post->body;