PHPackages                             m-a-k-o/nova-editor-js - 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. m-a-k-o/nova-editor-js

ActiveLibrary[Utility & Helpers](/categories/utility)

m-a-k-o/nova-editor-js
======================

A Laravel Nova field bringing EditorJs to Nova.

1.0.1(4y ago)0112MITPHPPHP >=8.0

Since Apr 24Pushed 4y ago1 watchersCompare

[ Source](https://github.com/m-a-k-o/nova-editor-js)[ Packagist](https://packagist.org/packages/m-a-k-o/nova-editor-js)[ RSS](/packages/m-a-k-o-nova-editor-js/feed)WikiDiscussions main Synced today

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

Laravel Nova Editor JS Field
============================

[](#laravel-nova-editor-js-field)

[![Latest Version on Github](https://camo.githubusercontent.com/e5784ef68899254a66a77b1c60d4307d1fa37edb68edd9144484d5c78a675c33/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6d2d612d6b2d6f2f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/advoor/nova-editor-js)[![Total Downloads](https://camo.githubusercontent.com/6dafeea15421d247bf98140e4b50a2b227c2b4355725fe8d338cad7005a3a604/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d2d612d6b2d6f2f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/advoor/nova-editor-js)

A Laravel Nova 4 implementation of [Editor.js](https://github.com/codex-team/editor.js)

Based on package by [@advoor](https://github.com/advoor).

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

[](#installation)

Install via composer:

```
composer require advoor/nova-editor-js

```

Publish the config file

```
php artisan vendor:publish --provider="Advoor\NovaEditorJs\FieldServiceProvider"

```

Usage:
------

[](#usage)

Add this `use` statement to the top of your Nova resource file:

```
use Advoor\NovaEditorJs\NovaEditorJs;
```

Use the field as below:

```
NovaEditorJs::make('FieldName');
```

And boom!

You can configure what tools the Editor should use in the config file along with some other settings so make sure to have a look :)

You can use the built-in function to generate the response for the frontend:

```
NovaEditorJs::generateHtmlOutput($user->about);
```

Each 'block' has it own view which can be overwritten in `resources/views/vendor/nova-editor-js/`

Tools included
--------------

[](#tools-included)

-
-
-
-
-
-
-
-
-
-
-
-

Extending
---------

[](#extending)

**For the purpose of this section, we will use `editor-js/warning` as an example of extensibility.**

There are two steps to extending the editor. The first consists of creating a JavaScript file and passing it onto Nova. The second step allows you to create a blade view file and pass it to the field to allow your block to render in the Nova `show` page.

### Creating the Javascript file

[](#creating-the-javascript-file)

`resources/js/editor-js-plugins/warning.js`

```
/*
 * The editorConfig variable is used by you to add your tools,
 * or any additional configuration you might want to add to the editor.
 *
 * The fieldConfig variable is the VueJS field exposed to you. You may
 * fetch any value that is contained in your laravel config file from there.
 */
NovaEditorJS.booting(function (editorConfig, fieldConfig) {
    if (fieldConfig.toolSettings.warning.activated === true) {
        editorConfig.tools.warning = {
            class: require('@editorjs/warning'),
            shortcut: fieldConfig.toolSettings.warning.shortcut,
            config: {
                titlePlaceholder: fieldConfig.toolSettings.warning.titlePlaceholder,
                messagePlaceholder: fieldConfig.toolSettings.warning.messagePlaceholder,
            },
        }
    }
});
```

`webpack.mix.js`

```
const mix = require('laravel-mix');

mix.js('resources/js/editor-js-plugins/warning.js', 'public/js/editor-js-plugins/warning.js');
```

`app/Providers/NovaServiceProvider.php`

```
// ...
public function boot()
{
    parent::boot();

    Nova::serving(function () {
        Nova::script('editor-js-warning', public_path('js/editor-js-plugins/warning.js'));
    });
}
// ...
```

`config/nova-editor-js.php`

```
return [
    // ...
    'toolSettings' => [
        'warning' => [
            'activated' => true,
            'titlePlaceholder' => 'Title',
            'messagePlaceholder' => 'Message',
            'shortcut' => 'CMD+SHIFT+L'
        ],
    ]
    // ...
];
```

### Creating the blade view file

[](#creating-the-blade-view-file)

`resources/views/editorjs/warning.blade.php`

*CSS classes taken from [here](https://github.com/editor-js/warning/blob/master/src/index.css).*

```

        {{ $title }}
        {{ $message }}

```

`app/Providers/NovaServiceProvider.php`

```
use Advoor\NovaEditorJs\NovaEditorJs;

// ...
public function boot()
{
    parent::boot();

    NovaEditorJs::addRender('warning', function($block) {
        return view('editorjs.warning', $block['data'])->render();
    });

    // ...
}
// ...
```

That's it for extending the Nova EditorJS package!

###  Health Score

26

—

LowBetter than 40% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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

1575d ago

PHP version history (2 changes)1.0.0PHP 8.1

1.0.1PHP >=8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/fade825b355d4686e06258f5ed8a18c8e922b5f78935128358d982f54a080a77?d=identicon)[Mako](/maintainers/Mako)

---

Top Contributors

[![m-a-k-o](https://avatars.githubusercontent.com/u/6873535?v=4)](https://github.com/m-a-k-o "m-a-k-o (3 commits)")

---

Tags

laraveleditorwysiwygnovaeditorjs

### Embed Badge

![Health badge](/badges/m-a-k-o-nova-editor-js/health.svg)

```
[![Health](https://phpackages.com/badges/m-a-k-o-nova-editor-js/health.svg)](https://phpackages.com/packages/m-a-k-o-nova-editor-js)
```

###  Alternatives

[advoor/nova-editor-js

A Laravel Nova field bringing EditorJs magic to Nova.

92254.5k3](/packages/advoor-nova-editor-js)[outl1ne/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2852.2M9](/packages/outl1ne-nova-sortable)[optimistdigital/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2852.2M6](/packages/optimistdigital-nova-sortable)[markwalet/nova-modal-response

A Laravel Nova asset for Modal responses on an action.

17930.8k](/packages/markwalet-nova-modal-response)[outl1ne/nova-media-hub

A Laravel Nova tool for managing media.

4657.2k](/packages/outl1ne-nova-media-hub)[marshmallow/nova-tiptap

A Laravel Nova tiptap editor field.

19208.2k3](/packages/marshmallow-nova-tiptap)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)