PHPackages taylanunutmaz/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. taylanunutmaz/nova-editor-js ActiveLibrary taylanunutmaz/nova-editor-js ============================ A Laravel Nova field bringing EditorJs magic to Nova. 2.1.4(4y ago)13982MITPHPPHP >=7.1.0 Since Apr 2Pushed 4y agoCompare [ Source](https://github.com/taylanunutmaz/nova-editor-js)[ Packagist](https://packagist.org/packages/taylanunutmaz/nova-editor-js)[ RSS](/packages/taylanunutmaz-nova-editor-js/feed)WikiDiscussions master Synced today READMEChangelog (10)Dependencies (4)Versions (40)Used By (0) Laravel Nova Editor JS Field ============================ [](#laravel-nova-editor-js-field) [![Latest Version on Github](https://camo.githubusercontent.com/4222aacd933a45ad16bb88677a32f578598f693f2978a5e5bd0db6b4de48f91d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6164766f6f722f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/advoor/nova-editor-js)[![Total Downloads](https://camo.githubusercontent.com/7bca1cb93d4edcb6a51030571fe707bcedc24596a55ad9c5358f4cbb363fb0e6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6164766f6f722f6e6f76612d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/advoor/nova-editor-js) A Laravel Nova implementation of [Editor.js](https://github.com/codex-team/editor.js) by [@advoor](https://github.com/advoor). Installation ------------ [](#installation) Install via composer: ``` composer require taylanunutmaz/nova-editor-js ``` Publish the config file ``` php artisan vendor:publish --provider="Advoor\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 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 32 — LowBetter than 72% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity15 Limited adoption so far Community16 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 64.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 ~28 days Recently: every ~13 days Total 30 Last Release 1775d 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/7da525b0622ffc6a51b3f1e431f9e0b205c14e4940be5dd0b306d709d3e1e20b?d=identicon)[taylanunutmaz](/maintainers/taylanunutmaz) --- 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)")[![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)")[![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)")[![xamthor](https://avatars.githubusercontent.com/u/69559791?v=4)](https://github.com/xamthor "xamthor (1 commits)")[![bangnokia](https://avatars.githubusercontent.com/u/5652494?v=4)](https://github.com/bangnokia "bangnokia (1 commits)")[![pravk](https://avatars.githubusercontent.com/u/926011?v=4)](https://github.com/pravk "pravk (1 commits)")[![RogierW](https://avatars.githubusercontent.com/u/9381528?v=4)](https://github.com/RogierW "RogierW (1 commits)") --- Tags laraveleditorwysiwygnovaeditorjs ### Embed Badge ![Health badge](/badges/taylanunutmaz-nova-editor-js/health.svg) ``` [![Health](https://phpackages.com/badges/taylanunutmaz-nova-editor-js/health.svg)](https://phpackages.com/packages/taylanunutmaz-nova-editor-js) ``` ### Alternatives [advoor/nova-editor-js A Laravel Nova field bringing EditorJs magic to Nova. 92179.0k3](/packages/advoor-nova-editor-js)[whitecube/nova-page Static pages content management for Laravel Nova 23995.2k1](/packages/whitecube-nova-page)[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)