Rich Text Editor

This component is a wrapper around TinyMCE. It automatically uploads images and files to local or S3 disks.

Also see the Markdown Editor component.

Setup

Create an account on TinyMCE site and replace YOUR-KEY-HERE on url bellow. If you don't want to rely on cloud setup, just download TinyMCE SDK and self-host the source code.

Also remember to add your local and production addresses on the allowed domains list.

<head>
...
{{-- Make sure you have this --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
 
{{-- TinyMCE --}}
<script src="https://cdn.tiny.cloud/1/YOUR-KEY-HERE/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>

If you are using the local disk remember to run this.

php artisan storage:link

Example

For security reasons, images and files uploads only works for authenticated users. On all examples we already have a random user logged in.

The full product description
@php
$text = $this->text;
@endphp
<x-editor wire:model="text" label="Description" hint="The full product description" />

Upload settings

By default, this component automatically uploads images and files to local public disk into "editor/" folder. You can change it like this.

<x-editor ... disk="s3" folder="super/cool/images" />

Customizing

You can add or override any setting provided by TinyMCE. Check its docs for more.

@php
$config = [
'plugins' => 'autoresize',
'min_height' => 150,
'max_height' => 250,
'statusbar' => false,
'toolbar' => 'undo redo | quickimage quicktable',
'quickbars_selection_toolbar' => 'bold italic link',
];
@endphp
 
<x-editor wire:model="text2" :config="$config" />

maryUI
Sponsor