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'),
])
No description
No description
13 Replies
samnaghavi
samnaghavi12mo 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
tuto190212mo 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
Virgil12mo ago
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
tuto190212mo ago
@samnaghavi Give this plugin a whirl and let us know if it works for you
samnaghavi
samnaghavi12mo 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
No description
No description
samnaghavi
samnaghavi12mo 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
Virgil12mo 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
samnaghavi12mo 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
tuto190211mo ago
If it's ok with everyone involved. I'll mark this as solved since there's no more work to be done.
samnaghavi
samnaghavi11mo 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
Virgil11mo ago
I think thats the best solution.
tuto1902
tuto190211mo ago
I concur