<div wire:ignore>
<textarea wire:model.debounce.999999ms="newCommentText"
wire:key="uniqueKey" name="content" class="form-control my-editor"></textarea>
</div>
how to i @this set value of it
<div wire:ignore>
<textarea wire:model.debounce.999999ms="newCommentText"
wire:key="uniqueKey" name="content" class="form-control my-editor"></textarea>
</div>
how to i @this set value of it
<div class="mb-2" wire:ignore>
<label class="block font-medium text-sm text-gray-700" for="page-text-editor">ТокŃŃ ŃŃŃаниŃŃ</label>
<textarea class="page_text form-input rounded-md shadow-sm mt-1 block w-full " id="page_text"
name="page_text" rows="20"
wire:model.debounce.9999999ms="page_text"
wire:key="page_text"
x-data
x-ref="page_text"
x-init="
tinymce.init({
path_absolute: '/',
selector: 'textarea.page_text',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen ',
'insertdatetime media nonbreaking save table directionality',
'emoticons template paste textpattern imagetools help '
],
toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help ',
relative_urls: false,
remove_script_host : false,
document_base_url: '{{config('app.url')}}/',
language: 'ru',
setup: function (editor) {
editor.on('init change', function () {
editor.save();
});
editor.on('change', function (e) {
@this.set('page_text', editor.getContent());
});
},
});
">
</textarea>
</div>
Hi this solution is doesânt work for me. Do you have maybe a working solution, please?
What a error happened? Do you included script src in head of a page?
Hi!
Thanky Yoi for your quick reaction.
My problem is, that the initial value (from Liwewire component comes from SQL) is not displayed in the editor. If I write something, then it is saved correctly.
Component:
relative_urls: false,
remove_script_host : false,
document_base_url: '{{config('app.url')}}/',
language: 'hu',
setup: function (editor) {
editor.on('init change', function () {
editor.save();
});
editor.on('change', function (e) {
@this.set('{{$id}}', editor.getContent());
});
},
});
">
</textarea>
from blae:
x-tinymce id=âexpectationsâ wire:model.lazy=âexpectationsâ placeholder=âexpectationsâŚâ /
Hi!
And additionally no JS error, but the editor is not initializing.
My code:
resources/views/layouts/app.blade.php
<head>
@livewireStyles
<!-- Scripts -->
{{-- AlpineJS--}}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
{{--TinyMCE--}}
<script src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
resources/views/livewire/sample.blade.php
<div class="mb-2">
<x-wysiwyg
wire:model.debounce.999999ms="page_text"
wire:model="page_text"
wire:key="uniqueKey"
id="page_text"
class="page_text form-input rounded-md shadow-sm mt-1 block w-full"
name="page_text"
rows="20"
autocomplete="page_text"
/>
</div>
resources/views/components/wysiwyg.blade.php:
<div wire:ignore>
<textarea
x-data
@wysiwyg-updated.window="tinyMCE.get('page_text').setContent(event.detail.content);"
x-ref="textarea"
x-init="
tinymce.init({
path_absolute: '/',
selector: 'textarea.page_text',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen ',
'insertdatetime media nonbreaking save table directionality',
'emoticons template paste textpattern imagetools help '
],
toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help ',
relative_urls: false,
remove_script_host : false,
document_base_url: '{{config('app.url')}}/',
language: 'ru',
setup: function (editor) {
editor.on('init change', function ()
{
editor.save();
});
editor.on('change', function (e)
{
@this.set('page_text', editor.getContent());
});
editor.on('init', function (e)
{
});
editor.on('dblclick', function (e)
{
});
},
init_instance_callback: function(editor) {
editor.on('ExecCommand', function(e) {
});
},
file_picker_callback : function(callback, value, meta) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = '/' + 'admin/laravel-filemanager?editor=' + meta.fieldname;
if (meta.filetype == 'image') {
cmsURL = cmsURL + '&type=Images';
} else {
cmsURL = cmsURL + '&type=Files';
}
tinyMCE.activeEditor.windowManager.openUrl({
url : cmsURL,
title : 'Filemanager',
width : x * 0.7,
height : y * 0.7,
resizable : 'yes',
close_previous : 'no',
onMessage: (api, message) => {
callback(message.content);
}
});
}
});
"
{{ $attributes }}
>
</textarea>
</div>
Hi! Thanks, but Iâm still suffering
On the NEW record I have the editor.
I hope you have any idea
Hye, @faxunil
You can do the following with CKEDITOR
<textarea name="content" wire:model.lazy="content"></textarea>
<script>
editor = CKEDITOR.replace( 'content' );
editor.on('blur', () => {
@this.set('content', CKEDITOR.instances.content.getData())
})
</script>
Thanks, i will check this too.
Thanks for Your help, but unfortunatelly I canât make it working.
I would need 5 different HTML editor, what i have ordered into tabs. Only 1 tab is active orhers are hidden.
But even with this one canât I reach the HTML editable field.
Do you have maybe a full sample with the JS includes too?
Do we donât need wire:ignore?
Thx
Gergely
I donât have honestly. But you can split the tabs onto livewire subcomponents and deal with them with call method and events to manage your parent component. And the example above remain the same just try to change the IDs on each editor.
For more information take a look here:
app\http\livewire\controller.php
public function edit_page($id)
{
// Browser's event for transmission content to wysiwyg editor
$this->dispatchBrowserEvent('wysiwyg-updated', ['content' => $this->page_text]);
}
Thanks, I will check. Actually, I could managed 99% to implement the trix editor. but I canât reach that the initial value will be appear.
Question
< x-trixeditor id=âaexpectationsâ wire:model.lazy=âaexpectationsâ :initialvalue="$aexpectations"/ >
could this work with HTML value?
I checked, if Iâm sending plain text in the variable $aexpectations then Iâm receiving that in nested component. but HTML is disapperingâŚ
This is my 99% solution, only the initial value (what should be important is not working )
<div id="div_{{$id}}"
class="rounded-md shadoe-sm"
wire:ignore
x-data
@trix-blur="$dispatch('change', $event.target.value); Livewire.emit('setvalue','{{$id}}',$event.target.value);"
>
{{$initialvalue}}
<input id="input{{$id}}"
name="{{$id}}"
wire:model="{{$id}}"
wire:key="wk{{$id}}"
value="{{ $initialvalue }}"
type="text"
name="{{$id}}"
/>
----
{{$initialvalue}} <<<< ===== nothing to show if HTML
----
<trix-editor input="input{{$id}}"
class="form-textarea block w-full transition duration-150 ease-in-out sm:text sm:leading">
</trix-editor>
Hi!
Thank You for your permanent help,
Now, I rebuilt with your code. Sorry It is not fully cleare how I have to implement this funtction.
I gues it should be used after it was rendered. But then I have to call it from alpine from the component?
Thanks
Ps: what is if I have 3 editors on the same page? Should it work too?
Hello,
Thanx @Schwan I have followed your comments and the TinyMCE works good.
But after saving or cancelling the modal window with the TinyMCE editor and then reopen another modal without refreshing the browser I get only a plain textarea.
Why is this happening?
Dear Sirs!
It works. (first page load )
The problem was, with Jetsream model, that it loaded as well if the modal was closed only hidden.
Of course the editor was initialised with null value.
Now i check in the blade is_open and if not i ignore the modalâs blade.
Thank You agan for yout help.
br.
Gergely
Ps: Iâm also trying to get working on second use too.
I found this but no result yet: https://github.com/turbolinks/turbolinks/issues/191
If sombody has working solution, please donât hasitate to share