PHPackages hosseinesteki/filament-editorjs - 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. [Utility & Helpers](/categories/utility) 4. / 5. hosseinesteki/filament-editorjs ActiveLibrary[Utility & Helpers](/categories/utility) hosseinesteki/filament-editorjs =============================== This is my package filament-editorjs 2.3.1(3mo ago)01MITPHPPHP ^8.3 Since Feb 9Pushed 3mo agoCompare [ Source](https://github.com/HosseinEsteki/filament-editorjs)[ Packagist](https://packagist.org/packages/hosseinesteki/filament-editorjs)[ GitHub Sponsors](https://github.com/athphane)[ RSS](/packages/hosseinesteki-filament-editorjs/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (14)Versions (3)Used By (0) Filament EditorJS ================= [](#filament-editorjs) [![Latest Version on Packagist](https://camo.githubusercontent.com/435c71c16f1e6ea72cb0d8e8042a5eae07600c8e30252a737bac1a737e8f249a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6174687068616e652f66696c616d656e742d656469746f726a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/athphane/filament-editorjs)[![GitHub Tests Action Status](https://camo.githubusercontent.com/48f8a52d9974fa63202836ff037d227996f1986c8c60bd3e0460b718a244fc1d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6174687068616e652f66696c616d656e742d656469746f726a732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/athphane/filament-editorjs/actions?query=workflow%3Arun-tests+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/94d8a715be2c36f832768d6ebdfec20b99e4a064e66b99c5170bbace2e32ee3d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6174687068616e652f66696c616d656e742d656469746f726a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/athphane/filament-editorjs)[![MIT Licensed](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md) **A premium EditorJS field for Filament with seamless Spatie Media Library integration and a robust rendering system.** Filament EditorJS brings the power of [Editor.js](https://editorjs.io/) to your Filament admin panel, allowing you to create rich, block-based content with ease. It handles image uploads out of the box using Livewire and Spatie's Media Library, and provides a powerful rendering engine to display your content on the frontend with Tailwind CSS support. [![Filament EditorJS Hero](assets/img.png)](assets/img.png) โœจ Features ---------- [](#-features) - ๐Ÿš€ **Zero-Config Uploads**: Effortless image uploads using Filament's internal file attachment system. - ๐Ÿ“ฆ **Spatie Media Library**: Full integration for managing your content assets. - ๐Ÿ› ๏ธ **Dynamic Plugin System**: Easily add and configure both built-in and custom Editor.js tools. - ๐ŸŽจ **Tailwind Rendering**: Built-in support for rendering content with Tailwind Typography (`prose`). - โšก **Filament v5 Ready**: Fully compatible with the latest Filament v4 and v5 features. - ๐Ÿงฉ **Extensible Blocks**: Create custom renderers for your unique block types in PHP. - ๐Ÿ“ **Automatic Cleanup**: Automatically manages and cleans up unused media attachments. --- ๐Ÿš€ Installation -------------- [](#-installation) Install the package via composer: ``` composer require athphane/filament-editorjs ``` Publish the configuration file: ``` php artisan vendor:publish --tag="filament-editorjs-config" ``` ๐Ÿšฅ Quick Start ------------- [](#-quick-start) ### 1. Prepare your Model [](#1-prepare-your-model) Your model must implement Spatie's `HasMedia` interface and use the `ModelHasEditorJsComponent` trait provided by this package. ``` use Athphane\FilamentEditorjs\Traits\ModelHasEditorJsComponent; use Spatie\MediaLibrary\HasMedia; use Spatie\MediaLibrary\InteractsWithMedia; class Post extends Model implements HasMedia { use InteractsWithMedia; use ModelHasEditorJsComponent; // By default, it expects a 'content' column (json) // and registers a 'content_images' media collection. } ``` ### 2. Register the Plugin (Optional but recommended for v4/v5) [](#2-register-the-plugin-optional-but-recommended-for-v4v5) Add the plugin to your Filament Panel provider (usually `AdminPanelProvider.php`): ``` use Athphane\FilamentEditorjs\FilamentEditorjsPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentEditorjsPlugin::make(), ]); } ``` ### 3. Add to your Filament Resource [](#3-add-to-your-filament-resource) Simply use the `EditorjsTextField` in your form schema: ``` use Athphane\FilamentEditorjs\Forms\Components\EditorjsTextField; public static function form(Form $form): Form { return $form ->schema([ EditorjsTextField::make('content') ->placeholder('Start writing your masterpiece...') ->columnSpanFull(), ]); } ``` ### 4. Render on the Frontend [](#4-render-on-the-frontend) Displaying your content is just as easy: ``` {{-- In your Blade view --}} {!! \Athphane\FilamentEditorjs\FilamentEditorjs::renderContent($post->content) !!} ``` > **Note:** For the best experience, ensure you have the [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) plugin installed. --- ๐Ÿ› ๏ธ Dynamic Plugin System ------------------------ [](#๏ธ-dynamic-plugin-system) This package allows you to customize the editor tools dynamically. ### Adding Custom Tools [](#adding-custom-tools) You can add any Editor.js compatible tool by registering it in Javascript and then enabling it in PHP. #### 1. Register in Javascript [](#1-register-in-javascript) Add your custom tool to the global `window.filamentEditorJsTools` registry: ``` import LinkTool from '@editorjs/link'; window.filamentEditorJsTools = window.filamentEditorJsTools || {}; window.filamentEditorJsTools.linkTool = LinkTool; ``` #### 2. Enable in PHP [](#2-enable-in-php) Use the `addPlugin` method on your field: ``` EditorjsTextField::make('content') ->addPlugin('linkTool', [ 'endpoint' => route('editorjs.link-tool-parser'), ]) ``` --- ๐ŸŽจ Customizing Content Rendering ------------------------------- [](#-customizing-content-rendering) You can extend the rendering engine by adding custom renderers for specific block types. ### Creating a Custom Renderer [](#creating-a-custom-renderer) ``` use Athphane\FilamentEditorjs\Renderers\BlockRenderer; class CustomBlockRenderer extends BlockRenderer { public function render(array $block): string { return view('renderers.custom-block', [ 'data' => $block['data'], ])->render(); } public function getType(): string { return 'custom-block-type'; } } ``` ### Registering your Renderer [](#registering-your-renderer) Register it in your `AppServiceProvider`: ``` use Athphane\FilamentEditorjs\FilamentEditorjs; public function boot() { FilamentEditorjs::addRenderer(new CustomBlockRenderer()); } ``` --- โš™๏ธ Configuration ---------------- [](#๏ธ-configuration) The `config/filament-editorjs.php` file allows you to define different tool profiles: ``` 'profiles' => [ 'default' => [ 'header', 'image', 'delimiter', 'list', 'underline', 'quote', 'table', ], 'pro' => [ 'header', 'image', 'delimiter', 'list', 'underline', 'quote', 'table', 'raw', 'code', 'inline-code', 'style', 'checklist', ], ], ``` Switch between profiles in your form: ``` EditorjsTextField::make('content')->tools('pro') ``` --- ๐Ÿ”„ Upgrading ----------- [](#-upgrading) Please refer to the [Upgrade Guide](UPGRADE.md) when moving between major versions. ๐Ÿงช Testing --------- [](#-testing) ``` composer test ``` ๐Ÿค Contributing -------------- [](#-contributing) Contributions are welcome! Please see [CONTRIBUTING.md](.github/CONTRIBUTING.md) for details. ๐Ÿ“œ License --------- [](#-license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 37 โ€” LowBetter than 83% of packages Maintenance82 Actively maintained with recent releases Popularity1 Limited adoption so far Community11 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 81.7% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 92d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/7d015f9519b649129f440267633506be9ca34b7edb313857dba3fbd9579b79c2?d=identicon)[HosseinEsteki](/maintainers/HosseinEsteki) --- Top Contributors [![athphane](https://avatars.githubusercontent.com/u/13810742?v=4)](https://github.com/athphane "athphane (58 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (5 commits)")[![HosseinEsteki](https://avatars.githubusercontent.com/u/45480012?v=4)](https://github.com/HosseinEsteki "HosseinEsteki (2 commits)")[![evoart-studio](https://avatars.githubusercontent.com/u/75247931?v=4)](https://github.com/evoart-studio "evoart-studio (1 commits)") ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/hosseinesteki-filament-editorjs/health.svg) ``` [![Health](https://phpackages.com/badges/hosseinesteki-filament-editorjs/health.svg)](https://phpackages.com/packages/hosseinesteki-filament-editorjs) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[pxlrbt/filament-environment-indicator Indicator for the current environment inside Filament 151923.9k12](/packages/pxlrbt-filament-environment-indicator)[pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[stephenjude/filament-feature-flags Filament implementation of feature flags and segmentation with Laravel Pennant. 118126.9k](/packages/stephenjude-filament-feature-flags) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)