/Nova4-TinymceEditor

A TinyMCE Field for Laravel Nova 4

Primary LanguageVue

Nova4 TinyMCE Editor

I'm proud to present a simple wrapper that allows you to use the excellent TinyMCE Editor within Laravel Nova 4. Dark mode support!

Preview

Versioning

This package follows the following versioning scheme:

  • v.0.x - TinyMCE version 5 (deprecated)
  • v.1.x - TinyMCE version 6

Prerequisites

How to install

Please note that this how-to is for TinyMCE 6. For TinyMCE 5, please see the v.0. branch.

In the root of your Laravel installation launch:

composer require murdercode/nova4-tinymce-editor

Then publish the config:

php artisan vendor:publish --provider="Murdercode\TinymceEditor\FieldServiceProvider"

A file in config/nova_tinymce_editor.php will appear as follows (you can change the default values):

<?php

return [
        'init' => [
            'menubar' => false,
            'autoresize_bottom_margin' => 40,
            'branding' => false,
            'image_caption' => true,
            'paste_as_text' => true,
            'autosave_interval' => '20s',
            'autosave_retention' => '30m',
            'browser_spellcheck' => true,
            'contextmenu' => false,
        ],
        'plugins' => [
            'advlist',
            'anchor',
            'autolink',
            'autosave',
            'fullscreen',
            'lists',
            'link',
            'image',
            'media',
            'table',
            'code',
            'wordcount',
            'autoresize',
        ],
        'toolbar' => [
            'undo redo restoredraft | h2 h3 h4 |
                 bold italic underline strikethrough blockquote removeformat |
                 align bullist numlist outdent indent | link anchor table | code fullscreen',
        ],
        'apiKey' => env('TINYMCE_API_KEY', ''),
];

In your .env file please add the key:

TINYMCE_API_KEY=[YOUR_PRECIOUS_PRIVATE_KEY]

Please make sure that you have added domain in your tiny.cloud account list.

Register the Field

In your Nova/Resource.php add the field as following:

<?php

use Murdercode\TinymceEditor\TinymceEditor;

class Article extends Resource
{
    //...
    public function fields(NovaRequest $request)
    {
        return [
            TinymceEditor::make(__('Content'), 'content')
                ->rules(['required', 'min:20'])
                ->help(__('The content of the article.')),
        ];
    }
}
                //...

Upgrade from 0.x to 1.x

In composer.json change the version of the package to

"murdercode/nova4-tinymce-editor": "^1.0"

and run composer update.

Also, you must change the format of the plugin snippet in nova-tinymce-editor as follows:

0.x

'plugins' => [
            'anchor advlist autolink autoresize autosave code fullscreen link lists image imagetools media
            paste wordcount',
        ],

1.x

'plugins' => [
            'anchor',
            'advlist',
            // etc...
        ],

Feedback and Support

Test, PR (also of this doc) are welcome.