包简介

It's a simple Markdown editor (HTML/JS/CSS) packaged for easy embedding in PHP apps via Composer.

README 文档

README

A simple Markdown editor (HTML/JS/CSS) for easy embedding in PHP apps.

Editor view

Editor with active preview

Requirements

PHP >= 8.1

Installation

Copy src/MarkdownEditor.php and public/markdown-editor.js into your project — no further dependencies required.

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

Composer

install via composer composer require cheinisch/markdown-editor

Usage

<?php require_once __DIR__ . '/src/MarkdownEditor.php'; ?>
<!DOCTYPE html>
<html lang="de">
<head>
    <?= MarkdownEditor::renderHead() ?>
</head>
<body>
    <?= MarkdownEditor::render() ?>
    <?= MarkdownEditor::renderFoot() ?>
</body>
</html>

if you using the composer version

<?php use cheinisch\MarkdownEditor\MarkdownEditor; ?>
<!DOCTYPE html>
<html lang="de">
<head>
    <?= MarkdownEditor::renderHead() ?>
</head>
<body>
    <?= MarkdownEditor::render() ?>
    <?= MarkdownEditor::renderFoot() ?>
</body>
</html>

render() Options

All options are optional.

<?= MarkdownEditor::render([

    // Visible toolbar buttons.
    // Possible values: 'bold', 'italic', 'underline', 'h1', 'list',
    //                  'quote', 'code', 'link', 'table', 'library'
    // Default: all buttons
    'buttons' => ['bold', 'italic', 'h1', 'list', 'link', 'table', 'library'],

    // 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.
    // path     – URL endpoint (GET = list files, POST = upload).
    //            Relative paths are resolved from the current PHP file.
    // upload   – true: enables drag & drop and upload button.
    // recursive– true: includes subdirectories (?recursive=1).
    '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,
            // Non-image files (PDF, DOCX …) are inserted as links: [name.pdf](…)
            // Image files are inserted as: ![name.jpg](…)
        ],
    ],

]) ?>

Library API Endpoint

Use MarkdownEditor::handleRequest() to handle image listing and uploads in a single file.

// e.g. /api/media/blog.php
<?php
require_once __DIR__ . '/../../src/MarkdownEditor.php';

MarkdownEditor::handleRequest(
    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,
    ],
);

GET /api/media/blog returns a JSON array:

[
  { "src": "/storage/media/blog/photo.jpg", "name": "photo.jpg", "width": 1280, "height": 720, "type": "image" }
]

POST /api/media/blog accepts a multipart/form-data request with a file field and returns the saved file as JSON.

cheinisch/markdown-editor 适用场景与选型建议

cheinisch/markdown-editor 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 14 次下载、GitHub Stars 达 1，最近一次更新时间为 2025 年 09 月 21 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 cheinisch/markdown-editor 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 cheinisch/markdown-editor 我们能提供哪些服务？

定制开发 / 二次开发

基于 cheinisch/markdown-editor 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

cheinisch/markdown-editor

包简介