PHPackages hl2m-coding/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. hl2m-coding/nova-editor-js ActiveLibrary[Utility & Helpers](/categories/utility) hl2m-coding/nova-editor-js ========================== A Laravel Nova field bringing EditorJs magic to Nova. Forked from advoor/nova-editor-js 073PHP Since Feb 15Pushed 1y agoCompare [ Source](https://github.com/hl2m-coding/nova-editor-js)[ Packagist](https://packagist.org/packages/hl2m-coding/nova-editor-js)[ RSS](/packages/hl2m-coding-nova-editor-js/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)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) Forked for Laravel Nova 5.x compatibility. 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 advoor/nova-editor-js ``` Publish the config file ``` php artisan vendor:publish --provider="Advoor\NovaEditorJs\FieldServiceProvider" ``` Version Compatibility --------------------- [](#version-compatibility) Laravel Nova 4.x isn't backwards compatible with 3.x, so we had to make a version split. Please use the below table to find which versions are suitable for your installation. Package versionNova VersionLaravel VersionPHP version`4.x`4.x10.x - 11.x8.2+`3.x`4.x8.x - 10.x8.1+`2.x`2.x - 3.x5.x - 8.x5.6 - 7.4Note that we really pushed the PHP version up. If you're staying on new versions of Laravel and Nova, we're expecting your PHP version to match that behaviour. Upgrade ------- [](#upgrade) See [the upgrade guide](./UPGRADING.md). Usage ----- [](#usage) To add EditorJS to your application, you'll need to modify your Nova resource. For ease-of-use we also recommend to update your models, but that's optional. ### Updating your Nova resource [](#updating-your-nova-resource) This package exposes a `NovaEditorJsField` that takes care of displaying the HTML contents and providing the user with the EditorJS field. To use it, simply import the field, ``` use Advoor\NovaEditorJs\NovaEditorJsField; ``` use it in your fields array, ``` return [ // … NovaEditorJsField::make('about'), ]; ``` And boom, you've got yourself a fancy editor. ### Updating your models (optional) [](#updating-your-models-optional) For ease-of-use, we recommend you add the `NovaEditorJsCast` to the `$casts` on your models. This will map the value to a `NovaEditorJsData` model, which can be returned in Blade (rendering HTML), or sent via API calls (rendering JSON, unless you call `toHtml` on it or cast it to a string). ``` use Advoor\NovaEditorJs\NovaEditorJsCast; class User extends Model { protected $casts = [ 'about' => NovaEditorJsCast::class, ]; } ``` Since the `NovaEditorJsData` model is an `Htmlable`, Blade will recognize it as safe HTML. This means you don't have to use Blade "unescaped statements". ``` About {{ $user->name }} {{ $user->about }} ``` ### Rendering HTML without model changes [](#rendering-html-without-model-changes) You can also use the `NovaEditorJs` facade to render HTML from stored data. ``` NovaEditorJs::generateHtmlOutput($user->about); ``` The return value of `generateHtmlOutput` is an `HtmlString`, which is treated as safe by Blade. This means you don't have to use Blade "unescaped statements". ``` About {{ $user->name }} {{ NovaEditorJs::generateHtmlOutput($user->about) }} ``` Customizing ----------- [](#customizing) You can configure the editor settings and what tools the Editor should use, by updating the `editorSettings` and `toolSettings` property in the config file respectively. From the config, you can define the following editor settings: - `placeholder` ([docs](https://editorjs.io/configuration#placeholder)) - The placeholder to show in an empty editor - `defaultBlock` ([docs](https://editorjs.io/configuration#change-the-default-block)) - The block that's used by default - `autofocus` ([docs](https://editorjs.io/configuration#autofocus)) - If the editor should auto-focus, only use if you never have multiple editors on a page and after considering the [accessibility implications](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations) - `rtl` ([docs](https://editorjs.io/i18n#rtl-support)) - Set to true to enable right-to-left mode, for languages like Arabic and Hebrew Furthermore, you can customize the tools the editor should use. The following tools are enabled by default: - [Header](https://github.com/editor-js/header) - [Image](https://github.com/editor-js/image) - [Link](https://github.com/editor-js/link) - [List](https://github.com/editor-js/list) - [Code block](https://github.com/editor-js/code) - [Inline code](https://github.com/editor-js/inline-code) - [Checklist](https://github.com/editor-js/checklist) - [Marker](https://github.com/editor-js/marker) - [Embeds](https://github.com/editor-js/embed)† - [Delimiter](https://github.com/editor-js/delimiter) - [Table](https://github.com/editor-js/table) - [Raw](https://github.com/editor-js/raw) You can customize the views for each component, by changing the view in `resources/views/vendor/nova-editor-js/`. † The *Embeds* tool is triggered by pasting URLs to embeddable content. It does not have an entry in the "Add" menu. ### Registering custom components [](#registering-custom-components) Please refer to the [extending Nova EditorJS](./EXTENDING.md) guide on instructions on how to register custom components. ### Health Score 17 — LowBetter than 6% of packages Maintenance31 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community16 Small or concentrated contributor base Maturity16 Early-stage or recently created project Bus Factor2 2 contributors hold 50%+ of commits 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. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/25033233?v=4)[Marc Leonhard](/maintainers/marcleonhard)[@marcleonhard](https://github.com/marcleonhard) --- Top Contributors [![advoor](https://avatars.githubusercontent.com/u/4472195?v=4)](https://github.com/advoor "advoor (77 commits)")[![roelofr](https://avatars.githubusercontent.com/u/1771026?v=4)](https://github.com/roelofr "roelofr (57 commits)")[![stickeerehan](https://avatars.githubusercontent.com/u/41327712?v=4)](https://github.com/stickeerehan "stickeerehan (22 commits)")[![Woeler](https://avatars.githubusercontent.com/u/18422096?v=4)](https://github.com/Woeler "Woeler (5 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)")[![marcleonhard](https://avatars.githubusercontent.com/u/25033233?v=4)](https://github.com/marcleonhard "marcleonhard (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)")[![Harrk](https://avatars.githubusercontent.com/u/2372590?v=4)](https://github.com/Harrk "Harrk (1 commits)")[![pravk](https://avatars.githubusercontent.com/u/926011?v=4)](https://github.com/pravk "pravk (1 commits)")[![anstapol](https://avatars.githubusercontent.com/u/33395021?v=4)](https://github.com/anstapol "anstapol (1 commits)")[![RogierW](https://avatars.githubusercontent.com/u/9381528?v=4)](https://github.com/RogierW "RogierW (1 commits)")[![waelelsawy](https://avatars.githubusercontent.com/u/10009971?v=4)](https://github.com/waelelsawy "waelelsawy (1 commits)")[![bangnokia](https://avatars.githubusercontent.com/u/5652494?v=4)](https://github.com/bangnokia "bangnokia (1 commits)") ### Embed Badge ![Health badge](/badges/hl2m-coding-nova-editor-js/health.svg) ``` [![Health](https://phpackages.com/badges/hl2m-coding-nova-editor-js/health.svg)](https://phpackages.com/packages/hl2m-coding-nova-editor-js) ``` ### Alternatives [dyusha/laravel-html-editor Laravel package that allows inline editing of HTML blocks 241.2k](/packages/dyusha-laravel-html-editor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)