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
- Laravel 9
- Laravel Nova 4
- TinyMCE API Key (get one here)
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.