new
Livewire Volt extension for VSCode. Voltage →
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 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