Поле TinyMce в MoonShine

Приветствую всех поклонников админ-панели MoonShine!

Из всего разнообразия полей админ-панели, поле TinyMce выделяется многообразием настроек. Про то, как конфигурировать поле TinyMce, подробно написано в документации. Я же хочу в этой небольшой статье рассказать о некоторых особенностях.

Высота блока

Одной из неочевидных особенностей поля TinyMce является возможность задать высоту блока. Многие пытаются задать высоту через аттрибуты поля, но это не работает. Все дело в том, что по умолчанию используется плагин autoresize, который подстраивает высоту блока под содержимое поля. Для решения этой проблемы необходимо переопределить все плагины и задать, если требуется, высоту.

TinyMce::make('Text')
    ->plugins(
        'anchor autolink charmap codesample code emoticons image link lists advlist media searchreplace
        table visualblocks wordcount directionality fullscreen help nonbreaking pagebreak preview visualblocks
        visualchars'
    )
    ->customAttributes(['style' => 'height: 600px']),

Стили для контента

Основная цель визуального редактора - отображать контент в том виде, в котором он будет представлен пользователю. Но при использовании TinyMce с дефолтными настройками, мы этого не добьемся, более того, если мы используем bootstrap или tailwind, нам не доступны их классы.

Добавить свои стили для контента можно воспользовавшись content_css и content_style.

TinyMce::make('Text')
    ->addConfig('content_css', Illuminate\Support\Facades\Vite::asset('resources/scss/app.scss'))
    ->addConfig('content_style', 'body {margin: 5px}');,

Кастомное поле

Как уже упоминалось ранее, поле TinyMce имеет большое число настроек, и указывать их в каждом ресурсе неудобно, особенно когда необходимо применить какую-то настройку ко всем полям данного типа. Выход из сложившейся ситуации - создать кастомное поле.

Для этого воспользуемся командой:

php artisan moonshine:field

<?php

declare(strict_types=1);

namespace App\MoonShine\Fields;

use Illuminate\Support\Facades\Vite;
use MoonShine\Fields\TinyMce;

class TinyMceAdv extends TinyMce
{
    public string $plugins = 'anchor autolink charmap codesample code emoticons image link lists advlist media
                              searchreplace table visualblocks wordcount directionality fullscreen help nonbreaking
                              pagebreak preview visualblocks visualchars';

    protected function afterMake(): void
    {
        parent::afterMake();

        $this
            ->addConfig('valid_children', '+body[style]')
            ->addConfig('cleanup', false)
            ->addConfig('forced_root_block', 'div')
            ->addConfig('force_br_newlines', true)
            ->addConfig('force_p_newlines', false)
            ->addConfig('content_css', Vite::asset('resources/scss/app.scss'))
            ->addConfig('content_style', 'body {margin: 5px}');
    }
}

В итоге мы можем конфигурировать все поля TinyMce в одном месте.

Надеюсь, теперь вы сможете более гибко применятьTinyMce в MoonShine!