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.1.0(1mo ago)176MITPHP Since Apr 15Pushed 1mo 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 3w ago READMEChangelog (10)Dependencies (6)Versions (12)Used By (0) bs-markdown-editor ================== [](#bs-markdown-editor) `bs-markdown-editor` is a lightweight jQuery Markdown editor plugin that integrates seamlessly with Bootstrap 5. It not only uses Bootstrap for its UI but also leverages Bootstrap utility classes for features like text alignment and responsive images within the Markdown content. 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 `VERSION` with a release tag): ``` ``` Usage ----- [](#usage) ``` $('#editor').bsMarkdownEditor({ minHeight: 240, preview: true, mode: 'editor', modes: ['editor', 'preview'], resize: 'vertical', size: 'sm', btnClass: 'border-0', wrapperClass: null, actions: 'all', lang: 'en' }); ``` For a complete Markdown sample covering all standard toolbar actions, see [example.md](example.md). Options ------- [](#options) OptionTypeDefaultDetails`minHeight``number``220`Minimum editor height in pixels. Applied to all surfaces and used as a lower bound for `height`.`height``number | null``500`Initial editor height in pixels. If `null`, the editor follows the content.`preview``boolean``true`Legacy preview availability flag. If `false`, `preview` is removed from the resolved `modes` list.`mode``'editor' | 'html' | 'preview'``'editor'`Initial mode after initialization. Invalid values fall back to the first allowed `modes` entry.`modes``string | string[]``['editor', 'preview']`Allowed modes and dropdown order. Supported values are `editor`, `html`, and `preview`. A string may be a single mode or comma-separated list. If only one mode is allowed, no mode dropdown is rendered.`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`.`emojiPickerAutoLoad``boolean``false`Automatically loads the `bs-emoji-picker` script (via GitHub CDN as fallback) when the emoji action is rendered and the picker plugin is not already loaded.`emojiPickerSrc``string | string[] | null``null`Optional custom script URL(s) for `bs-emoji-picker`. When omitted, the editor tries the GitHub CDN automatically.`shortcuts``object``{...}`Keyboard shortcuts mapping action keys to shortcut strings (e.g., `'bold': 'ctrl+b'`). Supports `ctrl+` and `ctrl+shift+` modifiers.`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, callout labels/titles, 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`clearFormatting`Remove inline Markdown formatting from the selection`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`callout`Open the callout modal and insert a Markdown callout block`details`Insert a collapsible details block`definitionList`Insert an HTML definition list block`code`Inline code`codeBlock`Fenced code block`hr`Horizontal rule (`---`)`taskList`Task list (`- [ ] ...`)`toggleTask`Toggle selected task list items`table`Open table modal and insert markdown table`emoji`Open emoji picker`undo`Undo via plugin history`redo`Redo via plugin history`alignment`Insert alignment HTML tags using Bootstrap utility classes (`text-start`, `text-center`, `text-end` or inline style for justify)`preview`Legacy preview toggle action. Mode switching is rendered as a dropdown when `modes` allows more than one mode.### Shortcuts [](#shortcuts) The editor supports keyboard shortcuts for common actions. Default shortcuts are: ActionShortcutBold`Ctrl + B`Italic`Ctrl + I`List`Ctrl + L`Num list`Ctrl + Shift + O`Quote`Ctrl + Q`Code`Ctrl + K`Link`Ctrl + Shift + L`Image`Ctrl + Shift + I`Undo`Ctrl + Z`Redo`Ctrl + Y`Preview`Ctrl + P`Horizontal rule`Ctrl + H`Task list`Ctrl + Shift + T`Toggle task`Ctrl + Shift + M`Strikethrough`Ctrl + Shift + S`Underline`Ctrl + Alt + U`Callout`Ctrl + Shift + C`Details`Ctrl + Shift + D`Definition list`Ctrl + Shift + U`Subscript`Ctrl + Shift + B`Superscript`Ctrl + Shift + P`Code block`Ctrl + Shift + K`Emoji`Ctrl + E`Heading 1-6`Ctrl + Shift + 1-6`Align Left`Ctrl + Alt + L`Align Center`Ctrl + Alt + C`Align Right`Ctrl + Alt + R`Align Justify`Ctrl + Alt + J`Shortcuts can be customized or disabled via the `shortcuts` option. On macOS, `Cmd` is used instead of `Ctrl`. ``` $('#editor').bsMarkdownEditor({ shortcuts: { 'bold': 'ctrl+b', 'italic': 'ctrl+i' } }); ``` ### 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} !