How do I create 3 WYSIWYG editors ? is it possible?

I am trying to replicate this page in filament, is it possible to create 3 richeditors at the same page?

24 Replies

Dhru•4mo ago

Wouldn’t this just be a simple matter of having RichEditor::make('content1') RichEditor::make('content2’) etc

RichEditor: https://filamentphp.com/docs/3.x/forms/fields/rich-editor#overview If you are using a resource:

public static function form(Form $form): Form
{
    return $form
        ->columns(null)
        ->schema([
            RichEditor::make('content1'),
            RichEditor::make('content2'),
            RichEditor::make('content3'),
        ]);
}

public static function form(Form $form): Form
{
    return $form
        ->columns(null)
        ->schema([
            RichEditor::make('content1'),
            RichEditor::make('content2'),
            RichEditor::make('content3'),
        ]);
}

If you are using a custom livewire component, follow this section

Adding a form to a Livewire component - Forms - Filament

Rich editor - Forms - Filament

o.mOP•4mo ago

I see, that was just a simple implementation Sorry bout that Question whats the difference between Form and getFormSchema ? Is form usually for a resource?

LeandroFerreira•4mo ago

I think getFormSchema is deprecated

o.mOP•4mo ago

I am still able to used it on the other forms though..

LeandroFerreira•4mo ago

you can still use this method, but form() is recommended https://github.com/filamentphp/filament/blob/3.x/packages/forms/src/Concerns/InteractsWithForms.php

/**
 * @deprecated Override the `form()` method to configure the default form.
 *
 * @return array<Component>
 */
protected function getFormSchema(): array
{
    return [];
}

/**
 * @deprecated Override the `form()` method to configure the default form.
 *
 * @return array<Component>
 */
protected function getFormSchema(): array
{
    return [];
}

GitHub

filament/packages/forms/src/Concerns/InteractsWithForms.php at 3.x ...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

o.mOP•4mo ago

Do you know why my forms are getting undefined even though thr queryies have values?

o.mOP•4mo ago

public $option_slugs = [
        'get_started_content',
        'company_page_text',
        'assignments_page_content',
    ];


    public function mount(): void
    {
        $options = Option::query()
            ->whereIn('slug', $this->option_slugs)
            ->where('optionable_type', 'vendor')
            ->get();

//        dump($options);
//        dump($options->where('slug', 'get_started_content')->first());
//        dump($options->where('slug', 'company_page_text')->first());
        dump($options->where('slug', 'assignments_page_content')->first());

        $this->form->fill([
            'get_started_content' => $options->where('slug', 'get_started_content')->first() ?? '',
            'people_text' => $options->where('slug', 'company_page_text')->first() ?? '',
            'assignment_page_content' => $options->where('slug', 'assignments_page_content')->first() ?? '',
        ]);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                RichEditor::make('get_started_content')
                ->label('Get Started Content')
                ->default($this->option_slugs['get_started_content'] ?? ''),

            RichEditor::make('company_page_text')
                ->label('Company Page Text')
                ->default($this->option_slugs['company_page_text'] ?? ''),

            RichEditor::make('assignments_page_content')
                ->label('Assignments Page Content')
                ->default($this->option_slugs['assignments_page_content'] ?? ''),

        ]);
    }

public $option_slugs = [
        'get_started_content',
        'company_page_text',
        'assignments_page_content',
    ];


    public function mount(): void
    {
        $options = Option::query()
            ->whereIn('slug', $this->option_slugs)
            ->where('optionable_type', 'vendor')
            ->get();

//        dump($options);
//        dump($options->where('slug', 'get_started_content')->first());
//        dump($options->where('slug', 'company_page_text')->first());
        dump($options->where('slug', 'assignments_page_content')->first());

        $this->form->fill([
            'get_started_content' => $options->where('slug', 'get_started_content')->first() ?? '',
            'people_text' => $options->where('slug', 'company_page_text')->first() ?? '',
            'assignment_page_content' => $options->where('slug', 'assignments_page_content')->first() ?? '',
        ]);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                RichEditor::make('get_started_content')
                ->label('Get Started Content')
                ->default($this->option_slugs['get_started_content'] ?? ''),

            RichEditor::make('company_page_text')
                ->label('Company Page Text')
                ->default($this->option_slugs['company_page_text'] ?? ''),

            RichEditor::make('assignments_page_content')
                ->label('Assignments Page Content')
                ->default($this->option_slugs['assignments_page_content'] ?? ''),

        ]);
    }

I already fixed the keys to the fill([]) But still same issue

 $this->form->fill([
            'get_started_content' => $options->where('slug', 'get_started_content')->first() ?? '',
            'company_page_text' => $options->where('slug', 'company_page_text')->first() ?? '',
            'assignments_page_content' => $options->where('slug', 'assignments_page_content')->first() ?? '',
        ]);

 $this->form->fill([
            'get_started_content' => $options->where('slug', 'get_started_content')->first() ?? '',
            'company_page_text' => $options->where('slug', 'company_page_text')->first() ?? '',
            'assignments_page_content' => $options->where('slug', 'assignments_page_content')->first() ?? '',
        ]);

LeandroFerreira•4mo ago

console errors? Did you config a statePath?

o.mOP•4mo ago

console errors

LeandroFerreira•4mo ago

https://filamentphp.com/content/leandrocfe-form-builder-common-errors-to-avoid#error-5-forgetting-key-steps-in-standalone-mode

Filament

Form Builder - Common Errors to Avoid by Leandro Ferreira - Filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.

o.mOP•4mo ago

I get a different outcome

o.mOP•4mo ago

LeandroFerreira•4mo ago

You should check the values that are being filled into the editors 🤷‍♂️ $this->form->fill(['get_started_content' => 'xxxx']) should work

o.mOP•4mo ago

You are right

o.mOP•4mo ago

I am now able to displa y this value

o.mOP•4mo ago

Hi how do I properly implement the save/update function?

LeandroFerreira•4mo ago

https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form

Adding a form to a Livewire component - Forms - Filament

o.mOP•4mo ago

Yeah this is the only problem I have is that the tw arent working correectly but thaanks for the solution

<form wire:submit="update">
    {{ $this->form }}

    <button type="submit" class="background-red-500 hover:background-red-600 text-white font-bold py-2 px-4 rounded">
        Submit
    </button>
</form>

<form wire:submit="update">
    {{ $this->form }}

    <button type="submit" class="background-red-500 hover:background-red-600 text-white font-bold py-2 px-4 rounded">
        Submit
    </button>
</form>

o.mOP•4mo ago

LeandroFerreira•4mo ago

you can also add an action as submit button https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#adding-the-action or use a blade component https://filamentphp.com/docs/3.x/support/blade-components/button

Button Blade component - Core Concepts - Filament

Adding an action to a Livewire component - Actions - Filament

o.mOP•4mo ago

is the Action at deleteAction required here? for it to be acknowledege as an action btn

o.mOP•4mo ago

That worked, thank you. just a bit of alighments and im good to go

Gaming

Programming

How do I create 3 WYSIWYG editors ? is it possible?

Did you find this page helpful?