14 replies

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

TLC

Tuto's Laravel Corner•3y ago•

14 replies

samnaghavi

TinyMce in filamentphp as a customField

<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

TinyMce in filamentphp as a customField

Similar Threads

TinyMce in filamentphp as a customField

Similar Threads

Similar Threads

Similar Threads