README

A custom Laravel Nova field that integrates TinyMCE editor with your local TinyMCE installation.

Features

Uses local TinyMCE from /public/tinymce/ directory
Fully customizable toolbar and plugins
Support for images, tables, code, and fullscreen editing
No external CDN dependencies
Dark mode compatible
Paste handling with image support
Laravel Package Tools integration
Comprehensive test coverage

Installation

You can install the package via Composer:

composer require gregsphotography/tinymce-nova

Publish Configuration

After installation, publish the configuration file:

php artisan vendor:publish --provider="Greg\TinymceNova\TinymceNovaServiceProvider" --tag="config"

This will create config/tinymce-nova.php with all available configuration options.

Configuration

Environment Variables

Add these to your .env file:

# TinyMCE Source (local or cdn)
TINYMCE_SOURCE=local

# For Local Installation
TINYMCE_LOCAL_URL=/tinymce
TINYMCE_SCRIPT_PATH=/js/tinymce/tinymce.min.js
TINYMCE_LICENSE_KEY=gpl

# For CDN Installation
TINYMCE_CDN_URL=https://cdn.tiny.cloud/1
TINYMCE_API_KEY=your-api-key-here
TINYMCE_VERSION=7

Configuration File

The published config/tinymce-nova.php file contains all available options:

return [
    'source' => env('TINYMCE_SOURCE', 'local'),
    
    'local' => [
        'base_url' => env('TINYMCE_LOCAL_URL', '/tinymce'),
        'script_path' => env('TINYMCE_SCRIPT_PATH', '/js/tinymce/tinymce.min.js'),
        'license_key' => env('TINYMCE_LICENSE_KEY', 'gpl'),
    ],
    
    'cdn' => [
        'base_url' => env('TINYMCE_CDN_URL', 'https://cdn.tiny.cloud/1'),
        'api_key' => env('TINYMCE_API_KEY', 'no-api-key'),
        'license_key' => env('TINYMCE_LICENSE_KEY', 'gpl'),
        'version' => env('TINYMCE_VERSION', '7'),
    ],
    
    'defaults' => [
        'height' => 400,
        'toolbar' => 'undo redo | blocks | bold italic...',
        'plugins' => 'lists link image code table',
        // ... more options
    ],
];

Usage

Basic Usage

use Greg\TinymceNova\Tinymce;

Tinymce::make('Content')
    ->rules('required')

With Configuration

Tinymce::make('Content')
    ->rules('required')
    ->alwaysShow()
    ->height(500)
    ->plugins(['lists', 'link', 'image', 'paste', 'code', 'table', 'fullscreen', 'wordcount'])
    ->toolbar('undo redo | blocks | bold italic | link image')

Using CDN

Tinymce::make('Content')
    ->useCdn()
    ->apiKey('your-api-key')
    ->licenseKey('your-license-key')

Using Local Installation

Tinymce::make('Content')
    ->useLocal()
    ->baseUrl('/tinymce')
    ->scriptPath('/js/tinymce/tinymce.min.js')
    ->licenseKey('gpl') // or your commercial license

Available Methods

`height(int $height)`

Set the editor height in pixels.

Tinymce::make('Content')->height(600)

`toolbar(string $toolbar)`

Customize the toolbar buttons.

Tinymce::make('Content')->toolbar('undo redo | bold italic | link')

`plugins(string|array $plugins)`

Set the TinyMCE plugins to use.

Tinymce::make('Content')->plugins(['lists', 'link', 'image', 'code'])

`menubar(bool $menubar)`

Show or hide the menubar.

Tinymce::make('Content')->menubar(false)

`statusbar(bool $statusbar)`

Show or hide the status bar.

Tinymce::make('Content')->statusbar(false)

`branding(bool $branding)`

Show or hide TinyMCE branding.

Tinymce::make('Content')->branding(true)

`resize(bool $resize)`

Enable or disable editor resizing.

Tinymce::make('Content')->resize(false)

`options(array $options)`

Pass custom TinyMCE configuration options.

Tinymce::make('Content')->options([
    'content_css' => '/css/custom-editor.css',
    'body_class' => 'my-editor-class'
])

`useLocal()`

Force the field to use local TinyMCE installation.

Tinymce::make('Content')->useLocal()

`useCdn()`

Force the field to use TinyMCE from CDN.

Tinymce::make('Content')->useCdn()

`licenseKey(string $licenseKey)`

Set the TinyMCE license key (GPL or commercial).

Tinymce::make('Content')->licenseKey('your-license-key')

`apiKey(string $apiKey)`

Set the TinyMCE API key for CDN usage.

Tinymce::make('Content')->apiKey('your-api-key')

`baseUrl(string $baseUrl)`

Set the base URL for TinyMCE (local or CDN).

Tinymce::make('Content')->baseUrl('/tinymce')

`scriptPath(string $scriptPath)`

Set the script path for local TinyMCE installation.

Tinymce::make('Content')->scriptPath('/js/tinymce/tinymce.min.js')

`version(string $version)`

Set the TinyMCE version for CDN usage.

Tinymce::make('Content')->version('7')

Available Plugins

lists - Bulleted and numbered lists
link - Insert/edit links
image - Insert/edit images
paste - Paste from Word with formatting
code - Edit HTML source code
table - Insert/edit tables
fullscreen - Fullscreen editing mode
wordcount - Word and character count

Default Configuration

[
    'height' => 400,
    'toolbar' => 'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat | code',
    'plugins' => 'lists link image code table',
    'menubar' => true,
    'statusbar' => true,
    'branding' => false,
    'resize' => true,
]

Example: Article Resource

<?php

declare(strict_types=1);

namespace App\Nova;

use Greg\TinymceNova\Tinymce;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Slug;
use Laravel\Nova\Fields\Textarea;
use Laravel\Nova\Fields\Image;
use Laravel\Nova\Http\Requests\NovaRequest;

final class Article extends Resource
{
    public function fields(NovaRequest $request)
    {
        return [
            ID::make()->sortable(),

            Text::make('Title')
                ->sortable()
                ->rules('required', 'max:255'),

            Slug::make('Slug')
                ->from('Title')
                ->separator('-')
                ->rules('required', 'max:255')
                ->hideFromIndex(),

            Textarea::make('Excerpt')
                ->alwaysShow()
                ->rules('required', 'max:500'),

            Tinymce::make('Content')
                ->rules('required')
                ->alwaysShow()
                ->height(500)
                ->plugins(['lists', 'link', 'image', 'paste', 'code', 'table', 'fullscreen', 'wordcount']),

            Image::make('Image')
                ->disk('public')
                ->rules('required', 'image', 'mimes:jpeg,png,jpg,gif,webp', 'max:5120'),
        ];
    }
}

TinyMCE Installation

The field expects TinyMCE to be installed at:

/public/tinymce/js/tinymce/tinymce.min.js

Installing TinyMCE

Download TinyMCE from tinymce.com
Extract the files to your public/tinymce/ directory
Ensure the structure is: public/tinymce/js/tinymce/tinymce.min.js

Development

Building Assets

If you make changes to the Vue components or JavaScript:

npm install
npm run production

Testing

composer test

Code Style

The package follows PSR-12 coding standards and uses PHPStan for static analysis.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email security@gbrown.ch instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

Laravel Package Tools

This package uses Laravel Package Tools to provide a clean and consistent package development experience.

gregsphotography / tinymce-nova

Maintainers

Details