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>