Download the PHP package athphane/filament-editorjs without Composer

Filament EditorJS

An EditorJS field for Filament, with support for image uploads using Spatie's Media Library package.

Installation

You can install the package via composer:

You can publish the config file with:

Optionally, you can publish the views using

This is the contents of the published config file:

Usage

This package requires you to do some initial setup before you can use it.

This package uses EditorJS and integrates the Image Upload Plugin with Spatie's Media Library package. For this reason, you will need to set up your models to use the Media Library package.

Setting up models

First of all, you need somewhere to store the content for the editorjs field itself. This package assumes that you will have a NULLABLE content column of type json in your database table. This column will be used to store the content for the editorjs field.

Your model must implement the Spatie\MediaLibrary\HasMedia interface, and use the Spatie\MediaLibrary\InteractsWithMedia trait.

Next, you must use this package's Athphane\FilamentEditorjs\Traits\ModelHasEditorJsComponent trait in your model. This trait offers a couple of methods to help you set up your model to work with the editorjs field.

Changing the default column name for the content field

The package assumes that you will use a column named content to store the content. If you want to use a different column name, you can go ahead and change the column name. Then on your model, you must override the editorJsContentFieldName method to return the new name of the column.

Registering the media collections and conversions

As this packages main aim is to integrate with Spatie's Media Library package, you will need to register the media collections for the editorjs media collection. Normally, you would do this in your model's own registerMediaCollections and registerMediaConversions methods. However, this package offers a convenience method to do that for you.

The ModelHasEditorJsComponent trait offers the methods registerEditorJsMediaCollections and registerEditorjsMediaConversions. This method can be used in the registerMediaCollection and registerMediaConversions method of your own model as follows:

Settings up allowed mime types for the editorjs media collection

By default, the package will allow a set of mime types defined in the config file of the package. You can change this by updating the config file values, or by programmatically setting the mime types on the registerEditorJsMediaCollections

`

Enabling/Disabling the responsive images generation

By default, the package will generate responsive images for the editorjs media collection. You can disable this by passing false on the $generate_responsive_images argument to the registerEditorJsMediaCollections method.

Modifying the default media collection name

By default, the package will use the content_images media collection name. You can change this by overriding the editorjsMediaCollectionName method.

Setting up the editorjs field

Now that you have set up your model to work with the editorjs field, you can set up the editorjs field itself.

This package provides a EditorjsTextField component. You can use that directly in your form definition like this:

Configuring axios to successfully upload images

This package comes with some javascript code that will upload the image to the server. Usually you would have something like this in your boostrap.js file:

This piece of javascript code, as far as I know, allows frontend code to upload files to the Laravel backend. Something to do with CSRF protection.

Because of this, you will need to define the following Filament Render hook in your application's AppServiceProvider;

This also assumes that you have set up your project's vite configuration correctly.

We're using the app.js file cause the bootstrap.js file is simply included in the app.js file.

Testing

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

• athphane
• All Contributors

License

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