PHP code example of kamikx / laravel-jodit

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

kamikx / laravel-jodit example snippets

use KamikX\LaravelJodit\Filament\Forms\Components\JoditEditor;

JoditEditor::make('content')
    ->preset('article')
    ->config(['spellcheck' => true])
    ->profile('simple')
    ->disk('public')
    ->basePath('uploads/sales')
    ->extraButtons('visualBlocks')
    ->fileBrowser(true)
    ->height(800)
    ->columnSpanFull()
    ->

JoditEditor::make('content')
    ->disk(fn (): string => 'public')
    ->basePath(fn (): string => 'uploads/sales');

// config/jodit.php
'language_scripts' => [
    'js/jodit/langs/sk_sk.js',
    'https://cdn.example.com/jodit/langs/another_language.js',
],

'language' => 'sk_sk,

JoditEditor::make('content')
    ->language('sk_sk');

// config/jodit.php
'plugin_scripts' => [
    'js/jodit/plugins/statistics.js',
    'js/jodit/plugins/custom-buttons.js',
],

JoditEditor::make('content')
    ->disablePlugins(['statistics']);

// config/jodit.php
'default_preset' => null,

'presets' => [
    'article' => [
        'minHeight' => 400,
        'toolbarSticky' => true,
    ],
],

JoditEditor::make('content')
    ->preset(fn (): string => 'article')
    ->config(fn (): array => ['spellcheck' => true]);

// config/jodit.php
return [
    ...
    /*
    |--------------------------------------------------------------------------
    | Default Editor Options
    |--------------------------------------------------------------------------
    |
    | Any key/value pair here is merged into the Jodit config object before
    | the editor is instantiated.  See https://xdsoft.net/jodit/docs/ for all
    | available options.
    |
    */

    'defaults' => [
        'height'               => 'auto',
        'toolbarSticky'        => true,
        'toolbarButtonSize'    => 'middle',
        'showCharsCounter'     => true,
        'showWordsCounter'     => true,
        'showXPathInStatusbar' => true,
        'hidePoweredByJodit'   => true,
        'defaultActionOnPaste' => 'insert_clear_html',
        'beautifyHTML'          => true,
        'beautifyHTMLCDNUrlsJS' => [],
        'sourceEditor'          => 'ace',
        'sourceEditorCDNUrlsJS' => [],
        'sourceEditorNativeOptions' => [
            'mode'  => 'ace/mode/html',
            'theme' => 'ace/theme/idle_fingers',
            'wrap'  => true,
        ],
        // Example: Add base theme colors to pallet
        'colors' => [
            'full' => ['#EBAFCD', '#C8AA82','#6491C8','#B4EBFA','#E65A37','#c74e30']
        ],
        // Example define custom fonts(1)
        'controls' => [
            'font' => [
                'list' => [
                    '' => 'Default',
                    'Musette,sans-serif' => 'Musette',
                    'Panton-Light,sans-serif' => 'Panton-Light',
                    'Panton-Regular,sans-serif' => 'Panton-Regular',
                    'Panton-Bold,sans-serif' => 'Panton-Bold',
                    'Panton-SemiBold,sans-serif' => 'Panton- SemiBold',
                    'Panton-ExtraBold,sans-serif' => 'Panton-ExtraBold'
                ],
            ],
        ],
    ],

        /*
    |--------------------------------------------------------------------------
    | Atomic Editor Options
    |--------------------------------------------------------------------------
    |
    | Dot-notated paths listed here are wrapped in Jodit.atom() before the
    | editor is instantiated. Atomic values replace Jodit's built-in value
    | instead of being merged with it.
    |
    */
    'atomic_options' => [
        // Example define custom fonts(1)
        'controls.font.list',
    ],
    ...
];

// bootstrap/providers.php
return [
    App\Providers\AppServiceProvider::class,
    App\Providers\AuthServiceProvider::class,
    App\Providers\EventServiceProvider::class,
    App\Providers\Filament\AdminPanelProvider::class,
    ...
    App\Providers\JoditEditorServiceProvider::class,
];

// app/Providers/JoditEditorServiceProvider.php
namespace App\Providers;

use Illuminate\Foundation\Vite;
use Illuminate\Support\ServiceProvider;

class JoditEditorServiceProvider extends ServiceProvider
{
    private bool $configured = false;

    public function boot(Vite $vite): void
    {
        // The callback is triggered before rendering jodit component or jodit filament field
        View::composer([
            'jodit::components.editor',
            'jodit::filament.forms.components.jodit-editor',
        ], function () use ($vite): void {
            if ($this->configured) {
                return;
            }

            // Set iframe mode
            config()->set('jodit.defaults.iframe', true);
            // Set custom iframe css
            config()->set('jodit.defaults.iframeCSSLinks', [
                $vite->asset('resources/assets/scss/jodit-editor-content.scss'),
            ]);
            // Set custom plugin JS
            config()->set('jodit.plugin_scripts', [
                $vite->asset('resources/assets/js/jodit/plugins/visual-blocks/visual-blocks.js'),
            ]);

            $this->configured = true;
        });
    }
}

// config/jodit.php
'route' => [
    'enabled' => false,
],

// routes/web.php
use KamikX\LaravelJodit\Http\Controllers\JoditConnectorController;

Route::middleware(['web', 'auth', 'role:admin'])
    ->prefix('admin')
    ->group(function () {
        Route::any('jodit-connector', [JoditConnectorController::class, 'handle'])
            ->name('backend.jodit.connector');
    });

'route' => [
    'enabled' => false,
    'name'    => 'backend.jodit.connector',  // used by component when no connector-url prop
],

'buttons' => [
    'bold', 'italic', 'underline', 'strikethrough', 'eraser', '|',
    'ul', 'ol', '|',
    'paragraph', 'brush', '|',
    'link', 'image', '|',
    'undo', 'redo',
],

'buttons' => [
    'source', '|',
    'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'eraser', '|',
    'paragraph', 'font', 'fontsize', 'brush', 'classSpan', '|',
    'align', '|',
    'ul', 'ol', 'indent', 'outdent', '|',
    'cut', 'copy', 'paste', 'selectall', '|',
    'link', 'image', 'video', 'file', 'table', 'hr', 'symbols', '|',
    'undo', 'redo', '|',
    'find', 'spellcheck', 'speech', 'preview', 'print', 'fullsize',
],

// config/jodit.php
'file_manager' => [
    'backend' => 'builtin',
],

bash
php artisan vendor:publish --tag=jodit-assets --force
php artisan vendor:publish --tag=jodit-views --force

bash
php artisan vendor:publish --tag=jodit-config

blade
<x-jodit::editor name="content" :value="old('content', $post->content ?? '')" />

blade
<x-jodit::editor name="excerpt" :file-browser="false" />

blade
<x-jodit::editor name="body" />

blade
<x-jodit::editor
    name="body"
    :height="600"
    connector-url="{{ route('admin.jodit.connector') }}"
/>

blade
{{-- PHP array (recommended) --}}
<x-jodit::editor name="content" :buttons="['bold', 'italic', 'underline', '|', 'link', 'image']" />

{{-- PHP-style array string (no colon prefix needed) --}}
<x-jodit::editor name="content" buttons="['bold', 'italic', 'underline', '|', 'link', 'image']" />

{{-- JSON string --}}
<x-jodit::editor name="content" buttons='["bold", "italic", "underline", "|", "link", "image"]' />

js
// public/js/jodit/langs/sk_sk.js
Jodit.lang.sk_sk = {
    Bold: 'Tučné',
    Italic: 'Kurzíva',
    Cancel: 'Zrušiť',
    Apply: 'Použiť',
};