Form Components

Markdown

This component is powered by EasyMDE. It's automatically uploads images to local storage or s3 disks.

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Setup

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
</head>

If you're using local disk storage, remember to execute this command.

php artisan storage:link

# Basic usage

<x-markdown wire:model="content" />

Please note that image uploads are limited to authenticated users for security reasons.

# Image upload settings

By default, images are uploaded to the markdown/ folder on your local public disk. You can customize this setting.

<x-markdown disk="s3" folder="assets/markdown" />

# Customizing

You can also customize the default settings for the markdown component in the config/tallcraftui.php file.

@php
    $config = [
        'spellChecker' => true,
        'toolbar' => ['heading', 'bold', 'italic', '|', 'preview'],
        'maxHeight' => '150px',
    ];
@endphp
 
<x-markdown wire:model="content2" :config="$config" />

# Manage markdown image uploads

To manage markdown image uploads, use the HasMarkdownImages trait. This trait simplifies the process by automatically handling image updates and deletions based on content changes. The default configuration utilizes the content column for markdown and the public disk for image storage. You can override these settings by adding the following code to your model.

use Developermithu\Tallcraftui\Traits\HasMarkdownImages;
 
class Post extends Model
{
    use HasMarkdownImages;
 
    protected string $markdownColumn = 'description';
    protected string $markdownImageDisk = 's3';
 
    //
}
 
// <x-markdown wire:model="description" disk="s3" />