PHP code example of cheinisch / markdown-editor

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

cheinisch / markdown-editor example snippets

 use cheinisch\MarkdownEditor\MarkdownEditor; 

<?= MarkdownEditor::render([
    // true  → uses the default key 'markdown-editor-content'
    // string → uses a custom key
    'localStorage' => 'my-blog-draft',
]) 

<?= MarkdownEditor::render([
    'field' => 'post_content',
]) 

<!-- Server-side: fetch the existing content from DB -->
 $post = getPostFromDatabase($id); 

<!-- No textarea needed in advance — the editor creates a hidden one -->
<form method="POST" action="/save">
    <?= MarkdownEditor::render(['field' => 'post_content']) 

// /save.php — receiving the content
$content = $_POST['post_content'] ?? '';
saveToDatabase($content);

<?= MarkdownEditor::render([
    'localStorage' => 'post-draft-' . $postId,
    'field'        => 'post_content',
]) 

<?= MarkdownEditor::render([

    // Visible toolbar buttons.
    // Possible values: 'bold', 'italic', 'underline', 'strikethrough',
    //                  'h1', 'h2', 'h3', 'list', 'quote', 'code',
    //                  'link', 'hr', 'table', 'image-url', 'library'
    // Default: all buttons
    'buttons' => ['bold', 'italic', 'h1', 'h2', 'list', 'link', 'hr', 'table', 'library'],

    // Editor height in pixels. Default: 700
    'height' => 500,

    // Auto-save content to localStorage.
    // true          → key 'markdown-editor-content'
    // 'custom-key'  → custom key
    'localStorage' => 'my-editor',

    // Sync content with an existing <textarea> by ID.
    // If the element already exists in the DOM it will be used as-is.
    // If it doesn't exist, the editor creates a hidden one automatically.
    'field' => 'post_content',

    // Directories for the image/file library modal.
    // Two modes are available — see "Image Library" below.
    'library' => [
        [
            'name' => 'All Images',
            'path' => '/api/media/images',
        ],
        [
            'name'   => 'Blog',
            'path'   => '/api/media/blog',
            'upload' => true,
        ],
        [
            'name'      => 'Archive',
            'path'      => '/api/media/archive',
            'recursive' => true,
        ],
        [
            'name'      => 'Downloads',
            'path'      => '/api/media/downloads',
            'upload'    => true,
            'recursive' => true,
        ],
    ],

]) 

<?= MarkdownEditor::render([
    'library' => [
        [
            'name'           => 'Uploads',
            'fsPath'         => __DIR__ . '/storage/uploads',
            'upload'         => true,
            'handlerOptions' => [
                'types'   => ['image/jpeg', 'image/png', 'image/webp'],
                'maxSize' => 8 * 1024 * 1024,
            ],
        ],
    ],
]) 

[
    'name'    => 'Uploads',
    'fsPath'  => __DIR__ . '/storage/uploads',
    'webPath' => '/storage/uploads',
    'upload'  => true,
]

<?= MarkdownEditor::render([
    'library' => [
        [
            'name'      => 'Blog Images',
            'path'      => '/api/media/blog',
            'upload'    => true,
            'recursive' => true,
        ],
    ],
]) 

// /api/media/blog.php

st(
    fsDirectory: __DIR__ . '/../../storage/media/blog',
    webPath:     '/storage/media/blog',
    options: [
        // Allowed MIME types for upload
        'types'          => ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],

        // File extensions shown in the library
        // Default: jpg, jpeg, png, gif, webp, avif, svg
        'listExtensions' => ['jpg', 'jpeg', 'png', 'gif', 'webp'],

        // Max upload size in bytes (default: PHP upload_max_filesize)
        // 'maxSize' => 5 * 1024 * 1024,
    ],
);

your-project/
├── public/
│   └── markdown-editor.js
└── src/
    └── MarkdownEditor.php