PHPackages everzel/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. everzel/nova-editor-js ActiveLibrary[Utility & Helpers](/categories/utility) everzel/nova-editor-js ====================== A Laravel Nova field bringing EditorJs magic to Nova. v2.0.7(3y ago)034MITPHPPHP >=7.1.0 Since Apr 2Pushed 3y agoCompare [ Source](https://github.com/everzel/nova-editor-js)[ Packagist](https://packagist.org/packages/everzel/nova-editor-js)[ RSS](/packages/everzel-nova-editor-js/feed)WikiDiscussions master Synced 1w ago READMEChangelog (4)Dependencies (4)Versions (32)Used By (0) Laravel Nova Editor JS Field ============================ [](#laravel-nova-editor-js-field) Installation ------------ [](#installation) Install via composer: ``` composer require everzel/nova-editor-js ``` Publish the config file ``` php artisan vendor:publish --provider="Everzel\NovaEditorJs\FieldServiceProvider" ``` Upgrade ------- [](#upgrade) If upgrading from v0.4.0, re-publish the config file! Usage: ------ [](#usage) Add this `use` statement to the top of the your nova resource file: ``` use Everzel\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 Everzel\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 29 — LowBetter than 59% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community14 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 72.5% 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 ~54 days Recently: every ~146 days Total 23 Last Release 1399d ago Major Versions v0.6.6 → v1.0.02020-07-03 v1.0.1 → v2.0.02020-08-03 ### Community Maintainers ![](https://www.gravatar.com/avatar/aed614ee80e0cf0c5f9889da3423c9ac36c679434dc0583016719fc1f2aeae00?d=identicon)[zelvad](/maintainers/zelvad) --- Top Contributors [![advoor](https://avatars.githubusercontent.com/u/4472195?v=4)](https://github.com/advoor "advoor (74 commits)")[![everzel](https://avatars.githubusercontent.com/u/91853349?v=4)](https://github.com/everzel "everzel (8 commits)")[![stickeerehan](https://avatars.githubusercontent.com/u/41327712?v=4)](https://github.com/stickeerehan "stickeerehan (6 commits)")[![TheDeadCode](https://avatars.githubusercontent.com/u/1714641?v=4)](https://github.com/TheDeadCode "TheDeadCode (3 commits)")[![techouse](https://avatars.githubusercontent.com/u/1174328?v=4)](https://github.com/techouse "techouse (3 commits)")[![Reflow1319](https://avatars.githubusercontent.com/u/6665500?v=4)](https://github.com/Reflow1319 "Reflow1319 (2 commits)")[![lorado](https://avatars.githubusercontent.com/u/4480983?v=4)](https://github.com/lorado "lorado (2 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)")[![xamthor](https://avatars.githubusercontent.com/u/69559791?v=4)](https://github.com/xamthor "xamthor (1 commits)") --- Tags laraveleditorwysiwygnovaeditorjs ### Embed Badge ![Health badge](/badges/everzel-nova-editor-js/health.svg) ``` [![Health](https://phpackages.com/badges/everzel-nova-editor-js/health.svg)](https://phpackages.com/packages/everzel-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)