如何更改 Laravel Filament 中 awcodes TiptapEditor 的大小？

Question

我的问题

我希望将字段 content 扩展为至少 2 列宽和 2 列高。我希望更改 RelationManager 中内容字段的大小，但是我也在资源中尝试了以下操作，但没有结果。 我用于 DataRelationManager.php 的代码：

<?php

namespace App\Filament\Resources\OnderwerpResource\RelationManagers;

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\RelationManagers\RelationManager;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use FilamentTiptapEditor\TiptapEditor;
use FilamentTiptapEditor\Enums\TiptapOutput;

class DataRelationManager extends RelationManager
{
    protected static string $relationship = 'Data';

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->label('Title')
                    ->required(),
                Forms\Components\Select::make('language_id')
                    ->label('Language')
                    ->options(
                        \App\Models\Language::pluck('name', 'id')->toArray()
                    )
                    ->required(),
                TiptapEditor::make('content')
                    ->label('Content')
                    ->required(),
            ]);
    }

    public function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('title')
                    ->searchable()
                    ->sortable(),
                Tables\Columns\TextColumn::make('language.name')
                    ->sortable(),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }
}

我尝试过的

我更改内容字段大小的所有尝试都导致错误或大小未更改。

我尝试使用 ->modalWidth()

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->modalWidth('7xl'),

但这导致了以下错误：

Method FilamentTiptapEditor\TiptapEditor::modalWidth does not exist.

我尝试使用 ->maxContentWidth() 在 TiptapEditor 内部使用 MaxWidth::Full

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->maxContentWidth(MaxWidth::Full),

导致错误：

FilamentTiptapEditor\TiptapEditor::maxContentWidth(): Argument #1 ($width) must be of type Closure|string, Filament\Support\Enums\MaxWidth given, called in C:\Users\user\Documents\home\filament2\app\Filament\Resources\OnderwerpResource\RelationManagers\DataRelationManager.php on line 36

这促使我将其更改为字符串'Full'

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->maxContentWidth('Full'),

将参数更改为字符串解决了错误，但没有更改大小。

在 TiptapEditor 之外和 $form 上使用 ->maxContentWidth() 会导致错误。

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->label('Title')
                    ->required(),
                Forms\Components\Select::make('language_id')
                    ->label('Language')
                    ->options(
                        \App\Models\Language::pluck('name', 'id')->toArray()
                    )
                    ->required(),
                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
            ])->maxContentWidth(MaxWidth::Full);
    }

Method Filament\Forms\Form::maxContentWidth does not exist.

我尝试使用 ->columns() 但这也没有改变大小。

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->columns(2),

Answer 1

要调整 Laravel 中

TiptapEditor

的宽度和高度，可以使用

->columnSpan()

方法调整宽度，使用

->extraInputAttributes()

方法调整高度。这是我解决问题的方法：

TiptapEditor::make('content')
    ->label('Content')
    ->columnSpan(2) // This sets the width
    ->extraInputAttributes([
        'style' => 'height: 500px', // This sets the height
    ])
    ->required();

在此代码中，

columnSpan(2)

将编辑器跨越两列，有效地增加了其宽度。

extraInputAttributes

方法向输入元素添加额外的 HTML 属性。在本例中，它用于将编辑器的高度设置为 500px。