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>

<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'),
                        ])

 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

samnaghaviOP•8/21/23, 6:58 AM

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•8/22/23, 2:44 PM

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•8/22/23, 3:48 PM

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•8/22/23, 3:58 PM

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

GiphyFriends

tuto1902•8/22/23, 4:00 PM

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

samnaghaviOP•8/23/23, 5:17 AM

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

samnaghaviOP•8/23/23, 5:29 AM

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•8/23/23, 7:35 AM

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.

samnaghaviOP•8/23/23, 11:07 AM

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

tuto1902•9/1/23, 5:52 PM

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

samnaghaviOP•9/9/23, 12:19 PM

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•9/9/23, 12:58 PM

I think thats the best solution.

tuto1902•9/9/23, 3:23 PM

I concur

TinyMce in filamentphp as a customField

Similar Threads

Similar Threads

Similar Threads