PHPackages                             zakarialabib/livewire-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. zakarialabib/livewire-editorjs

ActiveLibrary

zakarialabib/livewire-editorjs
==============================

This Package aims for an easy integration of Editor.JS with Laravel Livewire

0.3-beta(2y ago)2132MITPHPPHP ^7.3|^8.0|^8.1|8.2

Since Jul 30Pushed 2y ago1 watchersCompare

[ Source](https://github.com/Zakarialabib/livewire-editorjs)[ Packagist](https://packagist.org/packages/zakarialabib/livewire-editorjs)[ Docs](https://github.com/zakarialabib/livewire-editorjs)[ RSS](/packages/zakarialabib-livewire-editorjs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (4)Versions (4)Used By (0)

Easy integration of Editor.js in Laravel Livewire
=================================================

[](#easy-integration-of-editorjs-in-laravel-livewire)

[![Latest Version on Packagist](https://camo.githubusercontent.com/309b68ab84483b3673038c5c41b69c595d925a9acfb2fe888bb9ae7a98ad48ff/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d617865636b656c2f6c697665776972652d656469746f726a732e7376673f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/maxeckel/livewire-editorjs)[![Total Downloads](https://camo.githubusercontent.com/a42af9c8dffb3201a87b3be065a9b4400880fa546e2444c803b6bedbf5ed31ad/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d617865636b656c2f6c697665776972652d656469746f726a732e7376673f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/maxeckel/livewire-editorjs)[![GitHub](https://camo.githubusercontent.com/b683c5a3fc99201ed7a14b4df88c7bd1ef76c866577cfdf535f1b92f14664638/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d617865636b656c2f6c697665776972652d656469746f726a733f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/b683c5a3fc99201ed7a14b4df88c7bd1ef76c866577cfdf535f1b92f14664638/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d617865636b656c2f6c697665776972652d656469746f726a733f7374796c653d666f722d7468652d6261646765)[![GitHub Workflow Status](https://camo.githubusercontent.com/53783bbed34b570801b47df7d4a1821dafdf12f2fbc32e56783e0281120b59b1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d617865636b656c2f6c697665776972652d656469746f726a732f72756e2d74657374732e796d6c3f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/53783bbed34b570801b47df7d4a1821dafdf12f2fbc32e56783e0281120b59b1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d617865636b656c2f6c697665776972652d656469746f726a732f72756e2d74657374732e796d6c3f7374796c653d666f722d7468652d6261646765)

This Package adds a Livewire component to your application, which will create an Editor.js instance for you.

Out of the box it already supports image uploads using Livewire and the Image plugin of Editor.js.

**Packaged version of Editor.js: 2.26.5**

Requirements
------------

[](#requirements)

This package requires you to have the following tools installed:

- [Laravel Livewire v2](https://laravel-livewire.com/docs/2.x/quickstart)
- [Alpine.JS v2 or v3](https://alpinejs.dev/)

Please refer to the linked guides on how to install these.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require maxeckel/livewire-editorjs
```

After composer downloaded the package, you will need to publish it's config & assets:

#### Config (optional)

[](#config-optional)

```
php artisan vendor:publish --tag=livewire-editorjs:config
```

#### Assets

[](#assets)

For the assets you have two options:

1. Already, for production, compiled assets including the above mentioned plugins:

```
php artisan vendor:publish --tag=livewire-editorjs:assets:compiled --force
```

This will copy the compiled assets into `public/vendor/livewire-editorjs`.

2. Publish the raw assets to include them in your own build chain:

```
php artisan vendor:publish --tag=livewire-editorjs:assets:raw
```

This will copy the raw assets into `resources/js/vendor/livewire-editorjs`.
Now you have to include these assets into your own build chain.

This method will be needed, if you want to further customize the editor, e.g. adding more plugins or
configure the installed ones in a different way.

#### IMPORTANT

[](#important)

**For this to work, you will need to install all the plugins you want to use yourself!**
**This also includes the ones already configured!**

The last step is to include the scripts within your views. You can do this how ever you prefer. If you have chosen option 1. you can include the scripts with a little blade directive:

`@livewireEditorjsScripts`

**Advice**

If you opted for option 1. of publishing the assets, you should make sure, that after a `composer update`the assets are published again to avoid them being outdated. In order to do so update your `composer.json` script configuration:

```
{
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --tag=livewire-editorjs:assets:compiled --force"
        ]
    }
}
```

If you opted for option 2. I wouldn't suggest to automatically republish the raw assets, as this would overwrite any changes you made. Please check the changelog after you updated this package.

Packaged Editor.js plugins
--------------------------

[](#packaged-editorjs-plugins)

- [Code](https://github.com/editor-js/code)
- [Header](https://github.com/editor-js/header)
- [Image](https://github.com/editor-js/image) Configured with Livewire Upload out of the box
- [Inline Code](https://github.com/editor-js/inline-code)
- [List](https://github.com/editor-js/list)
- [Quote](https://github.com/editor-js/quote)
- [Underline](https://github.com/editor-js/underline)

Usage
-----

[](#usage)

```
@livewire('editorjs', [
    'editorId' => "myEditor",
    'value' => $value,
    'uploadDisk' => 'public',
    'downloadDisk' => 'public',
    'class' => '...',
    'style' => '...',
    'readOnly' => true,
    'placeholder' => 'Lorem ipsum dolor sit amet'
])
```

```

```

### Properties / Parameters

[](#properties--parameters)

#### editorId

[](#editorid)

The `editorId` parameter is used to generate a unique events from the Livewire component, in order for you to be able to listen for events of specific editors (in case more than 1 is used on the same page)

**Important!**
**Don't use the passed id anywhere else as `id` attribute on an HTML element, as the `editorId` is internally used as `id` on the wrapper `div` in which Editor.js gets initialized!
If you use the `id` somewhere else, the instance will break!**

#### value

[](#value)

The `value` parameter sets the inital data for the editor instance.
This would be your stored JSON data of Editor.js

#### uploadDisk (optional)

[](#uploaddisk-optional)

The `uploadDisk` parameter defines the disk, to which uploaded images should be stored.
This parameter is optional. The default disk to store images in is defined within the packages config file:

`config/livewire-editorjs.php` => `default_upload_img_disk`

Default: `public`

#### downloadDisk (optional)

[](#downloaddisk-optional)

The `downloadDisk` parameter defines the disk, to which downloaded images should be stored. Images will be downloaded from the internet when a user pasts an image URL into the Editor (see [Editor.js image plugin](https://github.com/editor-js/image))
This parameter is optional. The default disk to store images in is defined within the packages config file:

`config/livewire-editorjs.php` => `default_download_img_disk`

Default: `public

#### class (optional)

[](#class-optional)

As the name suggests you can pass in CSS classes as you would with any other component.
For styling the Editor/Blocks, please refer to the [documentation](https://editorjs.io/styles) of Editor.js

Default: ""

#### style (optional)

[](#style-optional)

As the name suggest you can pass in inline styles as you would with any other component.

Default: ""

#### readOnly (optional)

[](#readonly-optional)

You can pass this parameter with an value of "true" to set the editor into read only mode. This might be useful, if you want to display articles the same way, as they have been created.

Default: `false`

#### placeholder (optional)

[](#placeholder-optional)

Using the `placeholder` property, you can pass a placeholder to the Editor.js instance, which will be displayed in an empty editor.

Default: '' (set through the corresponding config option `default_placeholder`)

### Events / Saving state

[](#events--saving-state)

The Editor is configured to save changes to the server using its built in `onChange` callback.
In this callback the editor will sync its state with Livewire.
When this happens, Livewire will `dispatch` a save event:

`editorjs-save:editorId`

The editorId is substituted, with the editorId parameter you passed to the component.
With this, you can listen for the event within your Livewire Page/Component you use the editor in, in order to save changes to your models.

```
use Livewire\Attributes\On;

#[On('editorjs-save:myEditor')]
public function saveEditorState($editorJsonData)
{
    $this->model->data = $editorJsonData;
}
```

### Config

[](#config)

In order to change the config, you'll first need to publish it:

`php artisan vendor:publish --provider="Maxeckel\LivewireEditorjs\LivewireEditorjsServiceProvider" --tag="livewire-editorjs:config"`

or

`php artisan vendor:publish` and select `livewire-editorjs:config` by entering its number.

#### Default config

[](#default-config)

```