The real time chat demo: Ping →

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.


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.

{{-- Make sure you have this --}}
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- TinyMCE --}}
<script src="" referrerpolicy="origin"></script>

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

php artisan storage:link


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
$text = $this->text;
<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" />


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

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