Rich Editor - Displaying to Front-end
I am using Rich Editor in Filament to create a blog. I have a model called Blog and the rich editor is used to build the content of the blog ($blog -> content) from the admin panel.
For example, the preview is in the attachment.
How do I display in the front-end the way it is ordered in the preview (admin panel). Like the texts of the content in the field "content" in the table called blogs and the image is stored in s3.
I am confused how to put the text and the image all together in the front-end the way I put it up in the admin panel.
I hope my question makes sense,
2 Replies
{!! $blog->content !!} that will output the html, but you’re still going to need styling for the html.
I usually have a prose blade component that wraps the html in a Div with the tailwind prose class from the tailwind typography plugin.
Thats basically what I did. The image is what I am looking and putting it in the right spot when I display them. How Filament know which $blog model the images belong to and how do you call those images when you display them?. When you do {!! $blog->content !!} its only calling the text (at least ony my side)
I appreciate the response
Switched back my storage to public local storage. {!! $blog->content !!} actually works. But when I switch to s3 thats when the images are not showing up.
This is the code in the BlogResource
RichEditor::make('content')
->fileAttachmentsDisk('s3')
->fileAttachmentsDirectory('attachments')
What happens is that the image is stored in livewire-tmp folder in s3 but its not going to the folder 'attachments' . The image is not being displayed in the blade view, not even like the the attribute specified in 'alt'
@awcodes
I notice that when I use the public local storage with
RichEditor::make('content')
In the 'content' field of blog table the following element exists:
<figure data-trix-attachment="" data-trix-content-type="image/png"></figure>
And that is why when I do {!! $blog->content !!} it is showing the image in the front-end. The element is responsible for referring to the location of the image in the storage.
However when I use s3 and modify the code as follows
RichEditor::make('content')
->fileAttachmentsDisk('s3')
->fileAttachmentsDirectory('attachments'),
The <figure></figure> element does not exist in the 'content' field of blog table and so no image is being displayed
Again the image is being stored in the folder livewire-tmp in S3 it is not being displayed on front-end
Kindly help bro. Thanks