PHPackages                             webcito/bs-markdown-editor - 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. [Parsing & Serialization](/categories/parsing)
4. /
5. webcito/bs-markdown-editor

ActiveLibrary[Parsing & Serialization](/categories/parsing)

webcito/bs-markdown-editor
==========================

A lightweight Bootstrap-styled jQuery Markdown editor with toolbar, preview mode, and configurable actions.

1.0.5(1w ago)131MITPHP

Since Apr 15Pushed 6d agoCompare

[ Source](https://github.com/ThomasDev-de/bs-markdown-editor)[ Packagist](https://packagist.org/packages/webcito/bs-markdown-editor)[ Docs](https://github.com/webcito/bs-markdown-editor)[ Fund](https://www.buymeacoffee.com/thomas81)[ RSS](/packages/webcito-bs-markdown-editor/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (7)Dependencies (3)Versions (7)Used By (0)

bs-markdown-editor
==================

[](#bs-markdown-editor)

`bs-markdown-editor` is a lightweight jQuery Markdown editor plugin styled with Bootstrap 5 and Bootstrap Icons.

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

[](#requirements)

- jQuery 3+
- Bootstrap 5 (CSS + JS bundle)
- Bootstrap Icons

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

[](#installation)

With Composer:

```
composer require webcito/bs-markdown-editor
```

Or include the files manually from `dist/`.

Or use a GitHub CDN (replace `x.y.z` with a release tag):

```

```

Usage
-----

[](#usage)

```

    $('#editor').bsMarkdownEditor({
        minHeight: 240,
        preview: true,
        mode: 'editor',
        resize: 'vertical',
        size: 'sm',
        btnClass: 'border-0',
        wrapperClass: null,
        actions: 'all',
        lang: 'en'
    });

```

Options
-------

[](#options)

OptionTypeDefaultDetails`minHeight``number``220`Minimum editor height in pixels. Applied to the textarea and used as a lower bound for preview height.`preview``boolean``true`Enables the preview toggle button in the toolbar. If `false`, preview mode is not available through the toolbar.`mode``'editor' | 'preview'``'editor'`Initial mode after initialization. Invalid values fall back to editor mode behavior.`resize``boolean | 'vertical' | 'both'``false`Enables mouse-based resizing on the visible `contenteditable` surface. `true` maps to `'vertical'`.`size``'sm' | 'lg' | null``null`Button group size variant. Maps to Bootstrap button-group size classes (`btn-group-sm`/`btn-group-lg`).`btnClass``string``'border-0'`Bootstrap button style class used by toolbar buttons (example: `btn-outline-dark`, `btn-secondary`).`wrapperClass``string | null``null`Additional class name(s) applied to the editor wrapper. The plugin always keeps its internal wrapper class `.bs-markdown-editor` and appends your classes on top.`actions``'all' | string[]``'all'`Toolbar action filter. `'all'` renders all actions. Array mode renders only matching action keys and keeps array order. Unknown keys are ignored.`customActions``object | array``{}`Additional toolbar actions. `run(context)` receives the editor context, including `textarea`, `editable`, and `helpers`.`lang``string``auto`Reserved for compatibility. Locale selection is now handled by preloaded locale files plus `translations` overrides.`translations``object``{}`Deep-merged text overrides for labels, prompts, placeholders, modal text, and preview messages. Merge order: built-in English defaults -> `window.bsMarkdownEditorTranslations` (if loaded) -> this option.### Action Keys (`actions` option)

[](#action-keys-actions-option)

KeyPurpose`bold`Wrap selection with `**...**``italic`Wrap selection with `_..._``textStyles`Dropdown: strikethrough / underline`heading`Dropdown: H1-H6`ul`Unordered list`ol`Ordered list`indent`Indent selected lines (sublists)`outdent`Outdent selected lines`quote`Prefix lines with `>``link`Insert markdown link`image`Open image modal and insert markdown image`code`Inline code`codeBlock`Fenced code block`hr`Horizontal rule (`---`)`taskList`Task list (`- [ ] ...`)`table`Open table modal and insert markdown table`undo`Undo via plugin history`redo`Redo via plugin history`preview`Toggle preview/editor mode### Custom Actions

[](#custom-actions)

`customActions` adds project-specific controls to the toolbar. It accepts either an object keyed by action name or an array of action objects.

```
$('#editor').bsMarkdownEditor({
    customActions: {
        spoiler: {
            title: 'Spoiler',
            icon: 'bi-eye-slash',
            run(context) {
                const selected = context.helpers.getSelection(context.textarea);
                const content = selected || 'spoiler text';
                context.helpers.replaceSelection(
                    context.textarea,
                    `>! ${content} !

```

Locale files set `window.bsMarkdownEditorTranslations`, which is deep-merged into the built-in English defaults.

Support this project
--------------------

[](#support-this-project)

If this project helps you, feel free to support its development:

[☕ Buy me a coffee via PayPal](https://paypal.me/thomaskirsch1529)

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance99

Actively maintained with recent releases

Popularity11

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

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 ~8 days

Total

6

Last Release

11d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (24 commits)")

---

Tags

bootstrap5composereditorfrontendjavascriptjqueryjquery-pluginmarkdownwysiwygwysiwyg-editormarkdownjqueryeditorbootstrapwysiwygfrontend

### Embed Badge

![Health badge](/badges/webcito-bs-markdown-editor/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-bs-markdown-editor/health.svg)](https://phpackages.com/packages/webcito-bs-markdown-editor)
```

###  Alternatives

[kartik-v/yii2-markdown

Advanced Markdown editing and conversion utilities for Yii Framework 2.0

88270.9k6](/packages/kartik-v-yii2-markdown)[kartik-v/krajee-markdown-editor

A Boostrap styled markdown editor that offers configurable toolbar, live preview, export, fullscreen mode, and more features.

431.1k](/packages/kartik-v-krajee-markdown-editor)[laravel-admin-ext/simplemde

Simplemde markdown editor extension for laravel-admin

3347.6k1](/packages/laravel-admin-ext-simplemde)[chenhua/laravel5-markdown-editor

The best Markdown Editor of Laravel 5

346.5k](/packages/chenhua-laravel5-markdown-editor)

PHPackages © 2026

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