Markdown

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

Also see the Rich Text Editor component.

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.

Blog post

<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
}

maryUI

Sponsor