abdelhamiderrahmouni/filament-editorjs

Next generation block styled editor.

v0.1.0 2024-06-16 20:08 UTC

Requires

• php: ^8.1
• filament/forms: ^3.0
• illuminate/contracts: ^10.0|^11.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.22
• nunomaduro/collision: ^7.8
• orchestra/testbench: ^8.5
• pestphp/pest: ^2.13
• pestphp/pest-plugin-laravel: ^2.1
• phpunit/phpunit: ^10.3

MIT

• Rahman Ramsi

• laravel
• filament-editorjs
• mrfade

README

EditorJs integration for Filament Admin/Forms.

Installation

You can install the package via composer:

composer require abdelhamiderrahmouni/filament-editorjs

Usage

use FilamentEditorJs\Forms\Components\EditorJs;

EditorJs::make('content')

Customization

Tools

By default all tools are enabled. This is a list of available tools:

[
    'attaches',         // @editorjs/attaches
    'checklist',        // @editorjs/checklist
    'code',             // @editorjs/code
    'delimiter',        // @editorjs/delimiter
    'header',           // @editorjs/header
    'image-gallery',    // editorjs-gallery
    'image',            // @editorjs/image
    'inline-code',      // @editorjs/inline-code
    'link',             // @editorjs/link
    'list',             // @editorjs/list
    'marker',           // @editorjs/marker
    'nested-list',      // @editorjs/nested-list
    'paragraph',        // @editorjs/paragraph
    'quote',            // @editorjs/quote
    'raw',              // @editorjs/raw
    'style',            // editorjs-style
    'table',            // @editorjs/table
    'underline',        // @editorjs/underline
    'warning',          // @editorjs/warning
]

You can disable any of them using by passing an array of tool names:

EditorJs::make('content')
    ->disableTools(['image', 'raw']);

Also you can enable only certain tools:

EditorJs::make('content')
    ->tools(['image', 'raw']);

Tools Options

You can pass options to the tools:

EditorJs::make('content')
    ->toolsOptions([
        'attaches' => [
            'endpoint' => '/upload/file',
        ],
        'image' => [
            'endpoints' => [
                'byFile' => '/upload/image',
                'byUrl' => '/upload/image-by-url',
            ],
        ],
    ]);

Debugging

To debug the editor, you can enable the debug mode:

EditorJs::make('content')
    ->debug();

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• All Contributors

License

The MIT License (MIT). Please see License File for more information.