My issue, I have a modal form that shows when a button is clicked. The modal is showing but the description field is not rendering the tinymce editor. I have simplified my initial design down to a simple livewire component:
<?php
namespace App\Http\Livewire;
use App\Models\Job;
use Livewire\Component;
class TestModal extends Component
{
public bool $showingModal = false;
public bool $showButton = true;
public string $description;
public function render()
{
return view('livewire.test-modal');
}
public function showModal()
{
$this->showingModal = true;
}
public function hideModal()
{
$this->showingModal = false;
$this->dispatchBrowserEvent('modalClosed');
}
public function submit()
{
$this->hideModal();
}
}
and the blade:
<form wire:submit.prevent="submit()">
<a
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition"
wire:click="showModal()"
>
{{ __( 'Test' ) }}
</a>
<x-dialog-modal wire:model="showingModal" maxWidth="2xl" class="flex items-center">
<x-slot name="title">
Test Modal
</x-slot>
<x-slot name="content">
<div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-50">Test Modal</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-200">
Please complete the fields.
</p>
</div>
<div class="col-span-6 sm:col-span-4">
<label class="block font-medium text-sm text-gray-700" for="description">
Job Description
</label>
<textarea
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full dark-input"
id="description"
name="description"
wire:model.defer="description"
cols="40"
rows="5"
>
</textarea>
@error('description') <span class="text-danger">A Description is required</span> @enderror
</div>
<script src="https://cdn.tiny.cloud/1/xfigwgf559yj5t06awl1m42ptr8ubbr12sy00wtf1od3uh5p/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea#description', // Replace this CSS selector to match the placeholder element for TinyMCE
plugins: 'powerpaste advcode table lists checklist',
toolbar: 'undo redo | blocks| bold italic | bullist numlist checklist | code | table'
});
document.addEventListener('focusin', (e) => {
if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
e.stopImmediatePropagation();
}
});
</script>
</div>
</x-slot>
<x-slot name="footer">
<button class="text-off-white bg-green-500 dark:bg-green-700 focus:border-green-700 focus:ring-green-300 hover:bg-white dark:hover:bg-white hover:text-green-700 dark:hover:text-green-700 hover:shadow-md dark:hover:shadow-md border-solid border dark:border-off-white border-off-black ml-2 rounded-md font-semibold dark:font-bold text-xs uppercase inline-flex mb-4 items-center px-4 py-2 form-action-btn tracking-widest dark:pl-5 focus:outline-none focus:ring disabled:opacity-25 transition cursor-pointer" style="" type="submit">
<span wire:loading.remove="" wire:target="formSubmit">
Submit
</span>
<span wire:loading="" wire:target="formSubmit">
Submitting...
</span>
</button>
</x-slot>
</x-dialog-modal>
</form>
So the modal is shown but the text area does not have any tinymce content. I do have bootstrap installed but this is not using that method being alpine and livewire.
Any ideas why it doesn't show? I have also tried to achieve this with ckeditor (same issue) and trix (showed but didn't allow more than one line so no use at all for this). If i render the description box on its own page it does work just not inside this modal. Has anyone managed to get something like this to work?
