clesson-de/silverstripe-markdown

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

dev-main 2026-04-26 14:48 UTC

Requires

• silverstripe/admin: ^3.0
• silverstripe/framework: ^6.0

BSD-3-Clause

README

A Markdown editor form field for Silverstripe CMS, powered by react-markdown-editor-lite.

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

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

Installation

composer require clesson-de/silverstripe-markdown

After installation, expose the vendor assets:

composer vendor-expose

Usage

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

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

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

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

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

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

Constant	Button	Description
HEADER	Header	Heading levels (H1–H6)
BOLD	Bold	Bold text
ITALIC	Italic	Italic text
UNDERLINE	Underline	Underlined text
STRIKETHROUGH	Strikethrough	Strikethrough text
LIST_UNORDERED	Unordered list	Bullet list
LIST_ORDERED	Ordered list	Numbered list
BLOCK_QUOTE	Block quote	Blockquote
BLOCK_WRAP	Block wrap	Line break / wrap
BLOCK_CODE_INLINE	Inline code	Inline code
BLOCK_CODE_BLOCK	Code block	Fenced code block
TABLE	Table	Table
IMAGE	Image	Image
LINK	Link	Hyperlink
CLEAR	Clear	Clear formatting
LOGGER	Undo / Redo	Undo and redo
MODE_TOGGLE	Mode toggle	Switch between edit/preview/split
FULL_SCREEN	Full screen	Toggle full-screen mode
TAB_INSERT	Tab insert	Insert tab character
DIVIDER	—	Visual separator between buttons

Use MarkdownToolbarButton::all() to get all available buttons as an array.

Template output

In templates, the Markdown field automatically converts to HTML:

<div class="content">$Content</div>

Frontend Development

cd silverstripe-markdown
nvm use
npm install
npm run build

For development with file watching:

npm run watch

Acknowledgements

This module uses react-markdown-editor-lite by HarryChen0506 to render the Markdown editor in the CMS. Thank you for the great component!

The underlying library also supports custom plugins 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

BSD-3-Clause. See LICENSE.