How to setup tinymce with livewire

<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

2 Likes
<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>
2 Likes

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:


<textarea class="{{$id}} form-input rounded-md shadow-sm mt-1 block w-full "
id="{{$id}}"
name="{{$id}}" rows=“20”
wire:model.debounce.9999999ms="{{$id}}"
wire:key="{{$id}}"
x-data
x-ref="{{$id}}"
x-init="
tinymce.init({
path_absolute: ‘/’,
selector: ‘textarea.{{$id}}’,
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: '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>
1 Like

Hi! Thanks, but I’m still suffering :frowning:
On the NEW record I have the editor.


But If I want to modify any I’m receiving the editor without the layout and with HTML text in textarea.
Not any JS error…

Bit I have the JS
after the modal at the end of Layout:

I hope you have any idea :slight_smile:

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… :frowning:

This is my 99% solution, only the initial value (what should be important is not working :frowning: )

<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 :slight_smile: )
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 :slight_smile: