前面我們講的比較多是在列表頁上面的客製化

今天我們講講進入到編輯頁面內的客製化

所見即所得編輯器

所見即所得編輯器，是編輯後台很常用的一個需求。每家都有每家的好處，並且也都有各自的設置困難。

Filament 已經有預設的所見即所得編輯器 RichEditor，底層是 TipTap。

我們將 app/Filament/Resources/Products/Schemas/ProductForm.php 內

Textarea::make('description')
    ->columnSpanFull(),

改成

RichEditor::make('description')
    ->columnSpanFull(),

就可以看到所見即所得編輯器了

編輯器客製化

其實到這邊，編輯器的內容已經可以滿足多數客戶的需求了。

不過有的客戶還是會要求一些細部的客製化。像是針對哪些按鈕要放在前面，哪些按鈕不需要顯示

這部分 Filament 也有考慮到，所以我們可以使用 toolbarButtons() 針對按鈕的位置跟顯示與否進行調整

RichEditor::make('description')
    ->toolbarButtons([
        'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'link'
    ])
    ->columnSpanFull(),

可以看到按鈕變少了，位置也改變了

我們甚至可以用 extraInputAttributes 增加 input 欄位的 css attribute

RichEditor::make('description')
    ->toolbarButtons([
        'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'link'
    ])
    ->extraInputAttributes([
        'style' => 'min-height: 300px;'
    ])
    ->columnSpanFull(),

可以看到編輯區的空間整個被拉高了

今天的客製化部分就先提到這邊，我們明天見！