Markdown
This component is a wrapper around EasyMDE. It automatically uploads images to local or S3 disks.
Setup
<head> ... {{-- Make sure you have this --}} <meta name="csrf-token" content="{{ csrf_token() }}"> {{-- EasyMDE --}} <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css"> <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script></head>
If you are using the local disk remember to run this.
php artisan storage:link
Example
For security reasons, uploads only works for authenticated users. On all examples we already have a random user logged in.
<x-markdown wire:model="text" label="Blog post" />
Upload settings
By default, this component automatically uploads images to local public disk into "markdown/" 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 EasyMDE. Check its docs for more.
@php $config = [ 'spellChecker' => true, 'toolbar' => ['heading', 'bold', 'italic', '|', 'upload-image', 'preview'], 'maxHeight' => '200px' ];@endphp <x-markdown wire:model="text2" :config="$config" />
Preview style
Remember that Tailwind get rid of the basic styles of H1, H2, H3
...
So, you need to put it back on your app.css
to make the preview and side-by-side buttons work nice.
We have applied these style on this demo. Feel free to change it.
.EasyMDEContainer h1 { @apply text-4xl font-bold mb-5} .EasyMDEContainer h2 { @apply text-2xl font-bold mb-3} .EasyMDEContainer h3 { @apply text-lg font-bold mb-3}