v2 beta docs. Upgrade guide Back to v1
maryUI

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

Description
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" />

Dark mode

Unfortunately, TinyMCE does not support dark mode toggle on the fly. But, if you refresh the page the editor will respect the user's preference.

Please, make sure you have configured the dark mode through the Theme Toggle component.
Made with by Robson Tenório and contributors.