A Laravel Nova implementation of Editor.js by @advoor.

Install via composer:

composer require advoor/nova-editor-js

Publish the config file

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

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.

Note 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.

See the upgrade guide.

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.

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.

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".

<article>
    <h1>About {{ $user->name }}</h1>
    {{ $user->about }}
</article>

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".

<article>
    <h1>About {{ $user->name }}</h1>
    {{ NovaEditorJs::generateHtmlOutput($user->about) }}
</article>

You can configure what tools the Editor should use, by updating the toolSettings property in the config file. By default, the following components are enabled:

• Header
• Image
• Link
• List
• Code block
• Inline code
• Checklist
• Marker
• Embeds
• Delimiter
• Table
• Raw

You can customize the views for each component, by changing the view in resources/views/vendor/nova-editor-js/.

Please refer to the extending Nova EditorJS guide on instructions on how to register custom components.