Insolita / nova-toast-ui-editor-field

Toast UI Editor field for Laravel Nova.

Laravel Nova Toast UI Editor field

A Toast UI Editor field for Laravel Nova.

Contents

• Installation
• Usage
• Advanced usage
  • Toast UI Editor configuration
    • initialEditType
    • options
    • height
    • previewStyle
  • Allow iframe in markdown/html
  • Use Cloudinary as image picker
• Changelog
• Security
• Contributing
• Credits
• License

Installation

You can install the package via composer:

composer require bbs-lab/nova-toast-ui-editor-field

The package will automatically register itself.

You can publish the config-file with:

php artisan vendor:publish --provider="BbsLab\NovaToastUiEditorField\FieldServiceProvider" --tag="config"

This is the contents of the published config file:

<?php

use BbsLab\NovaToastUiEditorField\ToastUiEditor;

return [

    'initialEditType' => ToastUiEditor::EDIT_TYPE_WYSIWYG,

    'options' => [
        'minHeight' => '200px',
        'language' => 'en-US',
        'useCommandShortcut' => true,
        'usageStatistics' => false,
        'hideModeSwitch' => false,
        'toolbarItems' => [
            'heading',
            'bold',
            'italic',
            'strike',
            'divider',
            'hr',
            'quote',
            'divider',
            'ul',
            'ol',
            'task',
            'indent',
            'outdent',
            'divider',
            'table',
            'image',
            'link',
            'divider',
            'code',
            'codeblock',
        ],
    ],

    'height' => '300px',

    'previewStyle' => ToastUiEditor::PREVIEW_STYLE_TAB,

    'allowIframe' => false,

    'useCloudinary' => false,

    'cloudinary' => [
        'cloud_name' => env('CLOUDINARY_CLOUD_NAME', ''),
        'api_key' => env('CLOUDINARY_API_KEY', ''),
        'api_secret' => env('CLOUDINARY_API_SECRET', ''),
        'username' => env('CLOUDINARY_USERNAME', ''),
    ],

];

Usage

You can use the BBSLab\NovaToastUiEditorField\ToastUiEditor field in your Nova resource:

<?php

namespace App\Nova;

use BBSLab\NovaToastUiEditorField\ToastUiEditor;
use Illuminate\Http\Request;

class BlogPost extends Resource
{
    // ...
    
    public function fields(Request $request)
    {
        return [
            // ...

            ToastUiEditor::make('Content'),

            // ...
        ];
    }
    
}

Advanced usage

Toast UI Editor configuration

You may configure the underlying Toast UI Editor instance with the following field's methods. Checkout Toast UI - Vue Editor documentation.

You may also configure defaults in config-file.

initialEditType

initialEditTypeMarkdown()

initialEditTypeWYSIWYG()

options

minHeight(string $minHeight)

language(string $language)

useCommandShortcut(bool $useCommandShortcut = true)

hideModeSwitch(bool $hideModeSwitch = true)

toolbarItems(array $toolbarItems)

height

height(string $height)

previewStyle

previewStyleVertical()

previewStyleTab()

Allow iframe in markdown/html

allowIframe(bool $allowIframe = true)

Use Cloudinary as image picker

useCloudinary(bool $useCloudinary = true)

You must configure your Cloudinary credentials as described in nova-toast-ui-editor-field config file.

Changelog

Please see CHANGELOG for more information on recent changes.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Contributing

Please see CONTRIBUTING for details.

Credits

• Mikaël Popowicz
• All Contributors

License

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