PHPackages                             szaleq/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. szaleq/nova-editor-js

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

szaleq/nova-editor-js
=====================

A Laravel Nova field bringing EditorJs magic to Nova.

1.0.1(3y ago)02.5kMITPHPPHP >=8.1

Since May 22Pushed 3y agoCompare

[ Source](https://github.com/szaleq/nova-editor-js)[ Packagist](https://packagist.org/packages/szaleq/nova-editor-js)[ RSS](/packages/szaleq-nova-editor-js/feed)WikiDiscussions master Synced 4w ago

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

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

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

[![Latest Version on Github](https://camo.githubusercontent.com/eeef5697dda9a6d7c20a4a4d84387544d597cd270c7b5fb9243233c48e8eb607/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f737a616c65712f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/szaleq/nova-editor-js)[![Total Downloads](https://camo.githubusercontent.com/a7f5a931a69fbc76b853bee42d2eb047ab3862fa90423be079a0d7dfa328dda8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f737a616c65712f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/szaleq/nova-editor-js)

A Laravel Nova 4 field for [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 szaleq/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's 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

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity74

Established project with proven stability

 Bus Factor1

Top contributor holds 56.9% 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 ~5 days

Total

2

Last Release

1411d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/61a45e3ce3bfa72c3db86b1b70a7bf7ffa46cd20618af6f2a91c0697481fa749?d=identicon)[szaleq](/maintainers/szaleq)

---

Top Contributors

[![advoor](https://avatars.githubusercontent.com/u/4472195?v=4)](https://github.com/advoor "advoor (74 commits)")[![taylanunutmaz](https://avatars.githubusercontent.com/u/30219204?v=4)](https://github.com/taylanunutmaz "taylanunutmaz (20 commits)")[![szaleq](https://avatars.githubusercontent.com/u/25011639?v=4)](https://github.com/szaleq "szaleq (16 commits)")[![stickeerehan](https://avatars.githubusercontent.com/u/41327712?v=4)](https://github.com/stickeerehan "stickeerehan (6 commits)")[![techouse](https://avatars.githubusercontent.com/u/1174328?v=4)](https://github.com/techouse "techouse (3 commits)")[![TheDeadCode](https://avatars.githubusercontent.com/u/1714641?v=4)](https://github.com/TheDeadCode "TheDeadCode (3 commits)")[![lorado](https://avatars.githubusercontent.com/u/4480983?v=4)](https://github.com/lorado "lorado (2 commits)")[![Reflow1319](https://avatars.githubusercontent.com/u/6665500?v=4)](https://github.com/Reflow1319 "Reflow1319 (2 commits)")[![xamthor](https://avatars.githubusercontent.com/u/69559791?v=4)](https://github.com/xamthor "xamthor (1 commits)")[![RogierW](https://avatars.githubusercontent.com/u/9381528?v=4)](https://github.com/RogierW "RogierW (1 commits)")[![pravk](https://avatars.githubusercontent.com/u/926011?v=4)](https://github.com/pravk "pravk (1 commits)")[![bangnokia](https://avatars.githubusercontent.com/u/5652494?v=4)](https://github.com/bangnokia "bangnokia (1 commits)")

---

Tags

laraveleditorwysiwygnovaeditorjs

### Embed Badge

![Health badge](/badges/szaleq-nova-editor-js/health.svg)

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

###  Alternatives

[advoor/nova-editor-js

A Laravel Nova field bringing EditorJs magic to Nova.

92179.0k3](/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.

2861.8M9](/packages/outl1ne-nova-sortable)[unisharp/laravel-ckeditor

JavaScript WYSIWYG web text editor (for laravel).

377762.3k5](/packages/unisharp-laravel-ckeditor)[sbine/route-viewer

A Laravel Nova tool to view your registered routes.

57215.9k](/packages/sbine-route-viewer)[murdercode/nova4-tinymce-editor

Boost your Laravel Nova with the TinyMCE editor.

17165.2k](/packages/murdercode-nova4-tinymce-editor)[marshmallow/nova-tiptap

A Laravel Nova tiptap editor field.

19120.0k2](/packages/marshmallow-nova-tiptap)

PHPackages © 2026

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