TinyMCE Integration with Laravel Livewire

Alpine JS Livewire

Demo

TinyMCE Editor Integration Example

This is a free component. Login to your account to view / download the component code.

Component Class


<?php

namespace App\Http\Livewire\Pro;

use Livewire\Component;

class TinymceIntegrationComponent extends Component
{
    public $editor;

    public function render()
    {
        return view('livewire.pro.tinymce-integration-component');
    }
}

Component View File


<div class="py-5">
    <div class="container">
        <div class="row justify-content-center mb-4">
            <div class="col-12 col-md-10 col-lg-8 text-center">
                <!-- Heading -->
                <h2 class="fw-bold blue-heading">
                    TinyMCE Editor Integration Example
                </h2>
            </div>
        </div> <!-- / .row -->
    </div>

    <x-input.tinymce wire:model="editor" placeholder="Type anything you want..." />
</div>

@section('scripts')
    <script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
@endsection

Blade Component


<div x-data="{ value: @entangle($attributes->wire('model')) }" x-init="tinymce.init({
    target: $refs.tinymce,
    themes: 'modern',
    height: 200,
    menubar: false,
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    setup: function(editor) {
        editor.on('blur', function(e) {
            value = editor.getContent()
        })

        editor.on('init', function(e) {
            if (value != null) {
                editor.setContent(value)
            }
        })

        function putCursorToEnd() {
            editor.selection.select(editor.getBody(), true);
            editor.selection.collapse(false);
        }

        $watch('value', function(newValue) {
            if (newValue !== editor.getContent()) {
                editor.resetContent(newValue || '');
                putCursorToEnd();
            }
        });
    }
})" wire:ignore>
    <div>
        <input x-ref="tinymce" type="textarea" {{ $attributes->whereDoesntStartWith('wire:model') }}>
    </div>
</div>