Tinymce with livewire

Hello I don't know how to make it possible. Tinymce and livewire together. I found this answer from https://forum.laravel-livewire.com/t/how-to-setup-tinymce-with-livewire/1148/2 but the result is just simple textarea. I don't get the tinymce. I did put this code in the body too:

<script src="{{ asset('vendors/tinymce/tinymce.js') }}"></script>

The web console doesn't give error, so I don't know what can be the problem. How can I put tinymce with livewire and get the tinymce value?

This livewire started to be fun to learn for me but sometimes I stuck with some parts such as this problem. Thanks in advance for the answers.

Ajvanho

5 years ago

Level 14

I think you should use Alpine.js, something like this, for LW v2.0

<div x-data="{tiny: @entangle('content').defer }">	   // 'content' is public $content from LW class
     <div wire:ignore> 
         <textarea x-model="tiny" input="content">
		...
         </textarea>
     </div>
</div>

I dont know exactly how tinymce work, but LW & Alpine logic is this...

BeginnerSoul

5 years ago

Level 2

It is high level. If you are not using tinymce, then can you recommend something else? I can't find on the google other answers than what I found in the first post. Maybe I should change editor or I don't know. I wanted to stuck with tinymce because it has many functions and free.

Ajvanho

5 years ago

Level 14

<div x-data="{ trix: @entangle('content').defer }">
    <input id="content" name="content" type="hidden" value="{{$content}}" />
     <div wire:ignore>
         <trix-editor x-model="trix" input="content">
         </trix-editor>
     </div>
</div>

in head:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/trix.css">
in body
<script src="https://unpkg.com/[email protected]/dist/trix.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

1 like

shawnyv

5 years ago

Level 13

There may be better ways to do it, but this is working for me:

First, I created a custom component to house all the mce logic, and call that from my livewire component like so. Note that it's in this custom component that I'm attaching the livewire variable I want it responsible for

 <x-input.tinymce
                    wire:model.lazy="your_livewire_variable"
                    class="h-screen"
            />

That component looks like this:

<div
        wire:ignore
        x-data
        {{ $attributes }}
>
    <script src='https://cdn.tiny.cloud/1/d2eyrcjk5emsow4ou6uvrn3bwn2y91axba4csr8wlm940lzj/tinymce/5/tinymce.min.js'
            referrerpolicy="origin">
    </script>
    <script>
        tinymce.init({
            // All your init stuff here, then the super important part at the bottom
            setup: function (editor) {
                editor.on('init change', function () {
                    editor.save();
                });

                // This section says that when you leave the text edit area, it will set whatever livewire variable you like to the currnt contents
                editor.on('blur', function (e) {
                    @this.set('your_livewire_variable', editor.getContent());
                });
            },
        });
    </script>
    <textarea class="h-screen p-2"
              id="mytextarea"
              name="mytextarea"
    > </textarea>
</div>

This is working like a charm for me - hope it helps (either you, or whoever googles this next! :D )

1 like

migsAV

5 years ago

Level 31

Thank you, it works like a charm.

If you would like to make the wire:model dynamic you can add the following at the top of the component

@php
    $model = $attributes->wire('model')->value();
@endphp

And then where you have

@this.set('your_livewire_variable', editor.getContent());

you can set it to

@this.set( '{{ $model }}', editor.getContent());

Please or to participate in this conversation.