Hi!
I created a working solution:
In the controller file after saving, before close the modal:
$this->dispatchBrowserEvent('openjobsaved');
In the blade file
We are looking for active editors till we kill al of them…
please check it too!
How to setup tinymce with livewire
window.addEventListener('openjobsaved', function() {
tinymceActive=true;
while (tinymceActive) {
tinymceActive = (typeof tinyMCE != 'undefined') && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden();
if (tinymceActive) {
id=tinyMCE.activeEditor.id;
tinyMCE.activeEditor.remove();
alert('killed'+ id);
}
}
});
</ js>Hi!
Are You using jet-modal? in that case first enable the form only if the modal is openen
@if($isOpen)
@include(‘livewire.openjobs.create’)
@endif
For me was error that initialized with empty data all the time, becouse before filling with data was initialized. With this this error was eliminated.
On the controller after saving the data you should put the
$this->dispatchBrowserEvent(‘openjobsaved’);
and in the blade file you can with @push(‘at the end of file’) inject the javascript code what is checking the active editors and destroys them.
In my fomr I have 7 tabs with 5 editors. This JS is go from one to one and killing them.
After new opening the form thay will reinitialised an @ Schwan managed it perfectly.
JS code:
indent preformatted text by 4 spaces
window.addEventListener(‘closemodal’, function() {
tinymceActive=true;
while (tinymceActive) {
tinymceActive = (typeof tinyMCE != ‘undefined’) && tinyMCE.activeEditor && !tinyMCE.activeEditor.isHidden();
if (tinymceActive) {
id=tinyMCE.activeEditor.id;
tinyMCE.activeEditor.remove();
}
}
});
Yes I am using the jet-modal method with the $isOpen clause.
I have followed your example but put the code at the end of the livewire blade component as script /script and after I close the modal I get an error as image below and once I reopen the modal I get plain textarea.
How to put is as @push?
Before closing the modal did You fired the event to kill the editors?
after store and befor closing modal.
place alert into JS to see the while loop is finding any editor
In my case all for the textareas i give the same class “tinyeditor” and in any editor getting unique wire:key from the parent blade: wire:key=“fieldname{{Str::random(10)}}”
I have the tinymce js at the head section after app.js and the killer script at before tag.
If it is not the order i think you can get JS errors.
I’m using chrome, but now checked my page with Firefox & Edge too and works.
the js script you are using it on the modal blade or the component blade that calls the modal?
I think you can fix it to the layout’s end.
I have using it in the index.blade from them I’m calling the modal.
In may case is in the layout
@stack(‘modals’)
@livewireScripts
@stack(‘bottom’)
And I'm using in the index blade: @push('bottom') So at the end of the day my JS is at the end of the full rendered html I inject it, to have not on every page, only where I need the editorAlright, I found the mistake, now it’s working perfect.
I put the wire:key and removed id from the textarea.
it was for me 3 day with help of I had the same problem. Especially with switching between tabs.
My solution was to embed a page.
Note: The variable in this case is… $this->text_email
This code i placed in my form:
<div class="mb-3 row">
<label for="text_email" class="col-sm-2 col-form-label">Email message</label>
<div class="col-sm-10">
@php $wysiwygFieldName = 'text_email'; @endphp
@include('includes.wysiwyg')
</div>
</div>
This is the code in my include (resources/views/includes/wysiwyg.blade.php)
<div>
<script>
var tinyConfig{{ $wysiwygFieldName }} = {
path_absolute: '/',
selector: '#wysiwyg{{ $wysiwygFieldName }}',
plugins: 'paste print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern help code',
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor permanentpen formatpainter | link image media pageembed | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | addcomment',
schema: 'html5',
relative_urls: false,
remove_script_host: true,
document_base_url: '{{config('app.url')}}/',
min_height: 350,
autoresize_min_height: 350,
setup: function (editor) {
var toggleState = false;
editor.on('init change', function () {
editor.save();
});
editor.on('change', function (e) {
@this.set('{{ $wysiwygFieldName }}', editor.getContent());
});
},
};
tinymce.init(tinyConfig{{ $wysiwygFieldName }});
</script>
<div wire:ignore>
<textarea
id="wysiwyg{{ $wysiwygFieldName }}"
rows="20"
wire:model="{{ $wysiwygFieldName }}"
wire:key="wysiwyg{{ time().$wysiwygFieldName }}"></textarea>
</div>
<script>
if ((typeof tinyMCE != 'undefined') && (typeof tinyMCE.get("wysiwyg{{ $wysiwygFieldName }}").initialized !== null)) {
tinyMCE.get("wysiwyg{{ $wysiwygFieldName }}").remove();
tinyMCE.execCommand("mceToggleEditor", false, "wysiwyg{{ $wysiwygFieldName }}");
}
</script>
</div>