PHPackages otago/silverstripe-tiptap - 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. otago/silverstripe-tiptap ActiveSilverstripe-vendormodule otago/silverstripe-tiptap ========================= SilverStripe Tiptap WYSIWYG editor 6.0.1(10mo ago)0301BSD-3-ClauseJavaScript Since Jul 14Pushed 5mo agoCompare [ Source](https://github.com/otago/silverstripe-htmleditor-tiptap)[ Packagist](https://packagist.org/packages/otago/silverstripe-tiptap)[ RSS](/packages/otago-silverstripe-tiptap/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (1)Versions (3)Used By (0) SilverStripe TipTap htmleditor WYSIWYG Editor ============================================= [](#silverstripe-tiptap-htmleditor-wysiwyg-editor) [![Preview](docs/preview.gif)](docs/preview.gif) A modern WYSIWYG editor for SilverStripe using the powerful and extensible [TipTap](https://tiptap.dev) editor. With SilverStripe 6 moving TinyMCE to an optional plugin, now's the perfect time to upgrade to something **better**. Install ======= [](#install) `composer remove silverstripe/htmleditor-tinymce` `composer require otago/silverstripe-tiptap` --- Configuration ------------- [](#configuration) For a full configuration guide, see the [configuration document](docs/CONFIGURATION.md). ### Available Toolbar Items [](#available-toolbar-items) - **bold** - Bold text button (Ctrl+B) - **italic** - Italic text button (Ctrl+I) - **underline** - Underline text button (Ctrl+U) - **strikethrough** - Strikethrough text button (Ctrl+Shift+X) - **code** - Inline code button (for `inline code` snippets) (Ctrl+E) - **subscript** - Subscript button (for X2 formatting) (Ctrl+,) - **superscript** - Superscript button (for X2 formatting) (Ctrl+.) - **highlight** - Text highlight button - **paragraph** - Paragraph button - **heading1** - Heading 1 button (Ctrl+Alt+1) - **heading2** - Heading 2 button (Ctrl+Alt+2) - **heading3** - Heading 3 button (Ctrl+Alt+3) - **heading4** - Heading 4 button (Ctrl+Alt+4) - **heading5** - Heading 5 button (Ctrl+Alt+5) - **heading6** - Heading 6 button (Ctrl+Alt+6) - **heading** - Heading dropdown (H1, H2, H3, Paragraph) - *Alternative to individual buttons* - **bulletList** - Bullet list button - **orderedList** - Numbered list button - **lists** - List dropdown (Bullet List, Numbered List) - *Alternative to individual buttons* - **alignLeft** - Align text left button (Ctrl+L) - **alignCenter** - Align text center button (Ctrl+E) - **alignRight** - Align text right button (Ctrl+R) - **alignJustify** - Justify text button (Ctrl+J) - **align** - Text alignment dropdown (Left, Center, Right, Justify) - *Alternative to individual buttons* - **styles** - Custom styles dropdown (configurable CSS classes) - **table** - Table dropdown (Insert Table, Add/Delete Rows/Columns, Merge/Split Cells, Toggle Headers) - **blockquote** - Blockquote button (Ctrl+Shift+B) - **horizontalRule** - Insert horizontal rule (``) button - **codeBlock** - Code block button (Ctrl+Alt+C) - **link** - Link button (basic prompt-based) (Ctrl+K) - **image** - Image button (basic prompt-based) - **undo** - Undo button (Ctrl+Z) - **redo** - Redo button (Ctrl+Y) - **fullscreen** - Toggle fullscreen mode button (F11) - **htmlSource** - Toggle HTML source view button (Ctrl+Shift+H) - **separator** - Visual separator between button groups - **newline** - Force toolbar to wrap to the next line - **dropdown** - Create grouped dropdowns with custom titles, icons, and actions There are also SilverStripe specific extensions. These also serves as examples if you want to customise TipTap: - **ss-link-site** - links to an exisiting page in the SilverStripe SiteTree - **ss-link-ext** - external links, anchor tags, routes etc. - **ss-link-file** - links to a SilverStripe file inside assets - **ss-link-media** - embeds an image --- ### 📐 TipTap-like Toolbar (recommended) [](#-tiptap-like-toolbar-recommended) To enable this, create a config file at `app/_config/tiptap.yml`: [![Preview](docs/preview1.png)](docs/preview1.png) ``` SilverStripe\Forms\HTMLEditor\HTMLEditorField: tiptap_config: toolbar: - 'undo' - 'redo' - 'separator' - 'dropdown': title: 'Heading and Paragraph' icon: 'headings' actions: - 'heading1' - 'heading2' - 'heading3' - 'paragraph' - 'dropdown': title: 'Lists' icon: 'lists' actions: - 'bulletList' - 'orderedList' - 'blockquote' - 'codeBlock' - 'separator' - 'bold' - 'italic' - 'strikethrough' - 'code' - 'underline' - 'highlight' - 'dropdown': title: 'Links' icon: 'links' actions: - 'ss-link-site': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-page-on-site.js' - 'ss-link-ext': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-external.js' - 'ss-link-file': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-file.js' - 'separator' - 'subscript' - 'superscript' - 'separator' - 'dropdown': title: 'Align' icon: 'align' actions: - 'alignLeft' - 'alignCenter' - 'alignRight' - 'alignJustify' - 'ss-link-media': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-media.js' ``` ### 🧩 SilverStripe-like Toolbar (minimalist) [](#-silverstripe-like-toolbar-minimalist) [![Preview](docs/preview2.png)](docs/preview2.png) This example replicates the traditional SilverStripe editor layout: ``` SilverStripe\Forms\HTMLEditor\HTMLEditorField: tiptap_config: toolbar: - 'bold' - 'italic' - 'strikethrough' - 'underline' - 'separator' - 'alignLeft' - 'alignCenter' - 'alignRight' - 'alignJustify' - 'separator' - 'bulletList' - 'orderedList' - 'separator' - 'blockquote' - 'horizontalRule' - 'newline' - 'dropdown': title: 'Heading and Paragraph' icon: 'headings' actions: - 'heading1' - 'heading2' - 'heading3' - 'paragraph' - 'separator' - 'table' - 'ss-link-media': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-media.js' - 'dropdown': title: 'Links' icon: 'links' actions: - 'ss-link-site': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-page-on-site.js' - 'ss-link-ext': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-external.js' - 'ss-link-file': 'otago/silverstripe-tiptap: client/ext/silverstripe-link-file.js' - 'separator' - 'fullscreen' - 'htmlSource' ``` ### Health Score 31 — LowBetter than 68% of packages Maintenance64 Regular maintenance activity Popularity10 Limited adoption so far Community7 Small or concentrated contributor base Maturity37 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 ~0 days Total 2 Last Release 301d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/67215?v=4)[torleif](/maintainers/torleif)[@torleif](https://github.com/torleif) --- Top Contributors [![torleif](https://avatars.githubusercontent.com/u/67215?v=4)](https://github.com/torleif "torleif (9 commits)") --- Tags tiptapsilverstripeeditorwysiwyg ### Embed Badge ![Health badge](/badges/otago-silverstripe-tiptap/health.svg) ``` [![Health](https://phpackages.com/badges/otago-silverstripe-tiptap/health.svg)](https://phpackages.com/packages/otago-silverstripe-tiptap) ``` ### Alternatives [awcodes/filament-tiptap-editor A Tiptap integration for Filament Admin/Forms. 399865.2k21](/packages/awcodes-filament-tiptap-editor)[silverstripe/cms The SilverStripe Content Management System 5163.4M1.3k](/packages/silverstripe-cms)[froala/wysiwyg-editor-php-sdk PHP SDK for Froala WYSIWYG Editor 431.5M](/packages/froala-wysiwyg-editor-php-sdk)[silverstripe/admin SilverStripe admin interface 262.6M325](/packages/silverstripe-admin)[nathancox/customhtmleditorfield Allows per-editor TinyMCE configurations and body classes in SilverStripe 168.7k](/packages/nathancox-customhtmleditorfield)[ktquez/laravel-tinymce TinyMCE editor for Laravel and Lumen Framework 2525.4k](/packages/ktquez-laravel-tinymce) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)