PHPackages                             clesson-de/silverstripe-markdown - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. clesson-de/silverstripe-markdown

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

clesson-de/silverstripe-markdown
================================

Markdown editor form field for Silverstripe CMS using react-markdown-editor-lite

1.0.1(2mo ago)088BSD-3-ClausePHP

Since Apr 26Pushed 2mo agoCompare

[ Source](https://github.com/clesson-de/silverstripe-markdown)[ Packagist](https://packagist.org/packages/clesson-de/silverstripe-markdown)[ RSS](/packages/clesson-de-silverstripe-markdown/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (2)Versions (4)Used By (0)

Silverstripe Markdown Editor
============================

[](#silverstripe-markdown-editor)

A Markdown editor form field for Silverstripe CMS, powered by [react-markdown-editor-lite](https://github.com/HarryChen0506/react-markdown-editor-lite).

Features
--------

[](#features)

- React-based Markdown editor with live preview in the CMS
- Custom `Markdown` database field type for DataObjects
- Automatic form scaffolding support
- Readonly mode renders Markdown as HTML
- Toolbar with common Markdown formatting options

Requirements
------------

[](#requirements)

- Silverstripe Framework ^6.0
- Silverstripe Admin ^3.0
- Node.js 20 (for frontend development)

Installation
------------

[](#installation)

```
composer require clesson-de/silverstripe-markdown
```

After installation, expose the vendor assets:

```
composer vendor-expose
```

Usage
-----

[](#usage)

### Database field

[](#database-field)

Use the `Markdown` field type in your DataObject's `$db` array:

```
use SilverStripe\ORM\DataObject;

class BlogPost extends DataObject
{
    private static array $db = [
        'Title'   => 'Varchar(255)',
        'Content' => 'Markdown',
    ];
}
```

The `Markdown` type will automatically scaffold a `MarkdownEditorField` in the CMS.

### Manual field usage

[](#manual-field-usage)

You can also use the field directly in `getCMSFields()`:

```
use Clesson\Silverstripe\Markdown\Forms\MarkdownEditorField;
use SilverStripe\ORM\FieldType\FieldList;

public function getCMSFields(): FieldList
{
    $fields = parent::getCMSFields();

    /** @var MarkdownEditorField $contentField */
    $contentField = MarkdownEditorField::create('Content', $this->fieldLabel('Content'));
    $contentField->setRows(20);

    $fields->addFieldToTab('Root.Main', $contentField);

    return $fields;
}
```

### Editor height

[](#editor-height)

Control the editor height with `setRows()`. The default is **15** rows:

```
$field = MarkdownEditorField::create('Content', 'Content')
    ->setRows(25);
```

### Preview-only mode

[](#preview-only-mode)

Use `setPreviewOnly()` to render only the HTML preview with the toolbar hidden. The editor becomes read-only:

```
$field = MarkdownEditorField::create('Content', 'Content')
    ->setPreviewOnly(true);
```

### Toolbar buttons

[](#toolbar-buttons)

By default, all toolbar buttons are shown. Use `setToolbarButtons()` with an array of `MarkdownToolbarButton` constants to control which buttons appear and in which order:

```
use Clesson\Silverstripe\Markdown\Constants\MarkdownToolbarButton;
use Clesson\Silverstripe\Markdown\Forms\MarkdownEditorField;

$field = MarkdownEditorField::create('Content', 'Content')
    ->setToolbarButtons([
        MarkdownToolbarButton::HEADER,
        MarkdownToolbarButton::BOLD,
        MarkdownToolbarButton::ITALIC,
        MarkdownToolbarButton::DIVIDER,
        MarkdownToolbarButton::LINK,
        MarkdownToolbarButton::TABLE,
    ]);
```

#### Available buttons

[](#available-buttons)

ConstantButtonDescription`HEADER`HeaderHeading levels (H1–H6)`BOLD`Bold**Bold** text`ITALIC`Italic*Italic* text`UNDERLINE`UnderlineUnderlined text`STRIKETHROUGH`StrikethroughStrikethrough text`LIST_UNORDERED`Unordered listBullet list`LIST_ORDERED`Ordered listNumbered list`BLOCK_QUOTE`Block quoteBlockquote`BLOCK_WRAP`Block wrapLine break / wrap`BLOCK_CODE_INLINE`Inline code`Inline code``BLOCK_CODE_BLOCK`Code blockFenced code block`TABLE`TableTable`IMAGE`ImageImage`LINK`LinkHyperlink`CLEAR`ClearClear formatting`LOGGER`Undo / RedoUndo and redo`MODE_TOGGLE`Mode toggleSwitch between edit/preview/split`FULL_SCREEN`Full screenToggle full-screen mode`TAB_INSERT`Tab insertInsert tab character`DIVIDER`—Visual separator between buttonsUse `MarkdownToolbarButton::all()` to get all available buttons as an array.

### Template output

[](#template-output)

In templates, the Markdown field automatically converts to HTML:

```
$Content
```

Frontend Development
--------------------

[](#frontend-development)

```
cd silverstripe-markdown
nvm use
npm install
npm run build
```

For development with file watching:

```
npm run watch
```

Acknowledgements
----------------

[](#acknowledgements)

This module uses [react-markdown-editor-lite](https://github.com/HarryChen0506/react-markdown-editor-lite) by [HarryChen0506](https://github.com/HarryChen0506) to render the Markdown editor in the CMS. Thank you for the great component!

The underlying library also supports [custom plugins](https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/docs/plugin.md) to extend the editor with additional functionality. This has not been tested in this module yet. If you have experience with custom plugins or ideas for improvements, I'd love to hear from you — feel free to open an issue!

License
-------

[](#license)

BSD-3-Clause. See [LICENSE](LICENSE).

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance86

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity36

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~20 days

Total

2

Last Release

69d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/52702628?v=4)[Clesson](/maintainers/clesson-de)[@clesson-de](https://github.com/clesson-de)

---

Top Contributors

[![clesson-de](https://avatars.githubusercontent.com/u/52702628?v=4)](https://github.com/clesson-de "clesson-de (1 commits)")

### Embed Badge

![Health badge](/badges/clesson-de-silverstripe-markdown/health.svg)

```
[![Health](https://phpackages.com/badges/clesson-de-silverstripe-markdown/health.svg)](https://phpackages.com/packages/clesson-de-silverstripe-markdown)
```

###  Alternatives

[silverstripe/cms

The SilverStripe Content Management System

5253.6M1.4k](/packages/silverstripe-cms)[symbiote/silverstripe-advancedworkflow

Adds configurable workflow support to the CMS, with a GUI for creating custom workflow definitions.

46302.4k9](/packages/symbiote-silverstripe-advancedworkflow)[silverstripe/userforms

UserForms enables CMS users to create dynamic forms via a drag and drop interface and without getting involved in any PHP code

1321.1M86](/packages/silverstripe-userforms)[dnadesign/silverstripe-elemental

Elemental pagetype and collection of Elements

1101.1M315](/packages/dnadesign-silverstripe-elemental)[silverstripe/sharedraftcontent

Share draft page content with non-CMS users

21424.1k12](/packages/silverstripe-sharedraftcontent)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)