Tuto's Laravel Corner•10mo ago

TinyMce in filamentphp as a customField

I want to use TinyMCE in my form builder, but I can't. When I use the script inside my custom view, TinyMCE loads, but it disappears when I use a reactive() or any real-time functionality like a wizard. Additionally, when I hit "create", it won't send the data and I get the error "title cannot be null". I also tried registering the TinyMCE script file as the Filament documentation suggests (https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files). I can see the script file when I inspect the page, but TinyMCE won't load. Here's my custom-textarea.blade.php file:

<textarea{{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"></textarea>
<script src="https://cdn.tiny.cloud/1/cet2a3k5g1bxun5sp9vc8cka2nxji3ts1xrt1sz4h1oazm1g/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: 'textarea',
        plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
        tinycomments_mode: 'embedded',
    });
</script>

<textarea{{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"></textarea>
<script src="https://cdn.tiny.cloud/1/cet2a3k5g1bxun5sp9vc8cka2nxji3ts1xrt1sz4h1oazm1g/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: 'textarea',
        plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
        tinycomments_mode: 'embedded',
    });
</script>

And this is my form function:

 return $form
        ->schema([
                            ViewField::make('title')
                                ->view('forms.components.custom-textarea'),
                        ])

 return $form
        ->schema([
                            ViewField::make('title')
                                ->view('forms.components.custom-textarea'),
                        ])

Assets - Core Concepts - Filament

13 Replies

samnaghavi•10mo ago

Okay guys I have been successfull on prventing it to disapear with "wire:ignore" but still get the error "title cannot be null". this is the updated textarea

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field" wire:ignore>
    <div>
        <!-- <textarea {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" wire:ignore></textarea> -->
        <textarea {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"></textarea>

    </div>
</x-dynamic-component>

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field" wire:ignore>
    <div>
        <!-- <textarea {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" wire:ignore></textarea> -->
        <textarea {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"></textarea>

    </div>
</x-dynamic-component>

tuto1902•10mo ago

I've been doing some research on this, but I haven't been able to come up with any solution. Might be worth taking the issue to either the creators or to the official filament server. Might be a good idea for a plugin. I'm sorry I can't be of more help

Virgil•10mo ago

I think there is already a plugin: https://github.com/mohamedsabil83/filament-forms-tinyeditor

GitHub

GitHub - mohamedsabil83/filament-forms-tinyeditor: A TinyMce Editor...

A TinyMce Editor component for filament. Contribute to mohamedsabil83/filament-forms-tinyeditor development by creating an account on GitHub.

tuto1902•10mo ago

https://giphy.com/gifs/Friends-episode-15-friends-tv-the-one-where-estelle-dies-W3a0zO282fuBpsqqyD

Friends

Giphy

tuto1902•10mo ago

@samnaghavi Give this plugin a whirl and let us know if it works for you

samnaghavi•10mo ago

Thanks for all who answerd my question. I Already tried this package before. the problem is it does not have all the features of TinyMce. that is why I was trying to use it as a custom field. you can compare it in these 2 photos

samnaghavi•10mo ago

I believe there might be a JavaScript or Livewire code solution to resolve my issue. The problem I'm experiencing is that when using TinyMCE, the data doesn't populate the <textarea></textarea> "I believe that is how tinyMce works but filament cant understand it and returns null" . As a temporary workaround, I've added another <textarea> below my custom TinyMCE field. After finishing editing my blog in TinyMCE, I click on the 'View Source' button (a TinyMCE feature that displays the HTML source of the edited text) and copy the entire HTML. Then, I paste it into the other textarea and proceed to upload the content😂 . this is my code now.

                        Forms\Components\Textarea::make('body')
                            ->required()
                            ->columnSpanFull(),
                        ViewField::make('body')
                            ->view('forms.components.custom-textarea'),

                        Forms\Components\Textarea::make('body')
                            ->required()
                            ->columnSpanFull(),
                        ViewField::make('body')
                            ->view('forms.components.custom-textarea'),

Virgil•10mo ago

Maybe you can try to fork the plugin and edit the options in the package. I haven't any experience with that. Maybe you contact the owner of the plugin.

samnaghavi•10mo ago

alright I try and contact him to see if we can come up with something it would be an amazing adition to filamentphp

tuto1902•10mo ago

If it's ok with everyone involved. I'll mark this as solved since there's no more work to be done.

samnaghavi•9mo ago

I got in contact with the creator of the package and he said he is waiting for the stable version so he can update his package so it supports current version of tinyMCE

Virgil•9mo ago

I think thats the best solution.

tuto1902•9mo ago

I concur

Gaming

Programming

TinyMce in filamentphp as a customField