v4 RichEditor h1,h2,... not work when rendering

v4 RichEditor h1,h2,h3 not work when rendering , it show all as one size
RichContentRenderer::make($record->body)
RichContentRenderer::make($record->body)
Solution:
in an info list you can do this: ```php TextEntry::make('body') ->html()...
Jump to solution
10 Replies
Oscar Carvajal Mora
How are you storing the RichEditor content in your database column?. If is JSON, it's probably because the output is no being rendered as HTML. Try RichContentRenderer::make($record->body)->toHtml(). https://filamentphp.com/docs/4.x/forms/rich-editor#rendering-rich-content
awcodes
awcodes2w ago
When you render out the html content you have to provide your own styling. Editing the content and displaying the content isn’t the same thing. And by default tailwind has its own css reset. That’s why tailwind has the typography plugin.
Darnes
DarnesOP2w ago
Ok , what is required of me to be displaying the same editing ? and is that mean that I will work twice ? No , I storing it as text.
awcodes
awcodes2w ago
let's start with where you are rendering the content?
Darnes
DarnesOP2w ago
Now I want to display the content in filament page using RichContentRenderer in InfoList and later in Blade If I understood that mean I must provide h1,h2... in css theme
Solution
awcodes
awcodes2w ago
in an info list you can do this:
TextEntry::make('body')
->html()
->extraAttributes(['class' => 'fi-prose fi-prose-invert'])
->state(fn ($record): string => RichContentRenderer::make($record->body)->toHtml()),
TextEntry::make('body')
->html()
->extraAttributes(['class' => 'fi-prose fi-prose-invert'])
->state(fn ($record): string => RichContentRenderer::make($record->body)->toHtml()),
outside of filament you will need to either use tailwind's typography plugin and wrap the output in a prose class or provide you own html styling. So, it really comes down to what you want the rendered content to look like. You will often need a separate styling for the html than what is used in the editor, since the editor doesn't match branding specific styles and some elements have to look different in the editor vs when they are rendered.
Darnes
DarnesOP2w ago
yes , it work well in infolist , I hope that this idea is on filamnet doc I am very thank
Hussain4real
Hussain4real2w ago
you could do this instead
TextEntry::make('body')
->state(fn ($record): string => RichContentRenderer::make($record->body)->toHtml())
->prose(),
TextEntry::make('body')
->state(fn ($record): string => RichContentRenderer::make($record->body)->toHtml())
->prose(),
awcodes
awcodes2w ago
Forgot about prose(). Good call.
Hussain4real
Hussain4real2w ago
Though images uploaded using Spatie media Library are not showing But on edit it appears

Did you find this page helpful?