Richeditor v4, set default height

Hi I am wondering if there is a good way to set the defualt height (rows) of a richeditor in v4? I tried doing

RichEditor::make('description')
            ->json()
            ->extraAttributes(['style' => 'min-height: 18em;'])

RichEditor::make('description')
            ->json()
            ->extraAttributes(['style' => 'min-height: 18em;'])

which works, but only the first line is clickable/focusable - so its a bit confusing for the user.

Solution:

 RichEditor::make('description')
    ->json()
    ->extraAttributes(['class' => 'custom-rich-editor'])

...

Jump to solution

7 Replies

JonasOP•4mo ago

Perhaps a bit difficult to see from the video, but only the first line is clickable

N@meless•4mo ago

Use the ->toolbarButtons() and ->maxHeight() or customize the editor content area directly via CSS targeting, not the outer wrapper. Unfortunately, Filament v4 does not expose a built-in rows or height option on the RichEditor, so we need to extend it a bit.

Solution

N@meless•4mo ago

 RichEditor::make('description')
    ->json()
    ->extraAttributes(['class' => 'custom-rich-editor'])

N@meless•4mo ago

 .custom-rich-editor .ProseMirror {
    min-height: 18em;
}

JonasOP•4mo ago

Thanks! That works 🙂 Would be cool if V4 had a method for min-height

N@meless•4mo ago

yes

Gabriel Henrique•4w ago

I came from the future to say that from version 4.0.5 onwards you can do it like this:

RichEditor::make('description')
  ->extraInputAttributes([
      'style' => 'height: 200px;'
  ])

RichEditor::make('description')
  ->extraInputAttributes([
      'style' => 'height: 200px;'
  ])

Gaming

Programming

Richeditor v4, set default height

Did you find this page helpful?