Livewire enabled TinyMCE blade component

instructions.md

Instructions

This is a very basic TinyMCE component. It uses 'entangle'. This allows you to link a Livewire and Alpine property to eachother. If one value changes, the other does too.

Installation

Add tinymce.blade.php to views/components/input. This can be another component folder too if you prefer, but keep in mind that you should also change the x-input.tinymce structure accordingly.

Usage

Make sure you have added the TinyMCE library in the layout that you're extending. Although with some extra work the component should be able to do this for you, it doesn't right now.

After the TinyMCE library has been added, this is how you use it:

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

Note that all HTML attributes will propogate to the text area. In this case the placeholder will automatically be passed on to the input in the blade component.

In the example we link it to editor. This can be any wired property in the Livewire component.

tinymce.blade.php

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

Thankyou!

Thank you !

Check it out!

Reusable Alpine Component
in resources\js\app.js

TinyMCE Integration for Livewire with Alpine.js and CSP
Here's a reusable TinyMCE integration for Livewire while keeping Alpine.js and Content Security Policy (CSP) in mind.