How to accurately render RichEditor in Vuejs?

hello, i have a RichEditor in my Filamentphp like so

RichEditor::make('description_en')->label("Description (English)")->columnSpanFull(),

RichEditor::make('description_en')->label("Description (English)")->columnSpanFull(),

and in my Vuejs project's app.css i import the filamentphp css per the documentation

@import "../../vendor/filament/support/resources/css/index.css";

@import "../../vendor/filament/support/resources/css/index.css";

inside my Vuejs page, i render it like so:

<div class="w-full bg-white mt-8 px-4 py-2 rounded-xl" dir="ltr">
    <div class="w-full fi-prose" v-html="item.description_en"></div>
</div>

<div class="w-full bg-white mt-8 px-4 py-2 rounded-xl" dir="ltr">
    <div class="w-full fi-prose" v-html="item.description_en"></div>
</div>

but it's very inaccurate, it doesn't look like the filamentphp's form. what else can i do?

Solution:

it could definitely do with tidying up on our end, but its not supposed to look 100% identical because ours is an editing experience, so we need more borders etc to allow things to be moved and resized

Jump to solution

5 Replies

HediOP•5d ago

here's my filamentphp rich editor

HediOP•5d ago

and this is what it looks like when i render it, in vuejs

Dan Harrin•5d ago

write some CSS to make it look how you want

Solution

Dan Harrin•5d ago

HediOP•4d ago

thank you Dan, i'll do that. and i appreciate what you've gone have built, Filament is the best thing that has happened to me💀

Gaming

Programming

How to accurately render RichEditor in Vuejs?

Did you find this page helpful?