PHPackages rondinabrybry/rich-text-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. [Utility & Helpers](/categories/utility) 4. / 5. rondinabrybry/rich-text-editor ActiveLibrary[Utility & Helpers](/categories/utility) rondinabrybry/rich-text-editor ============================== A modern, modular rich text editor built with pure JavaScript 03↓100%JavaScript Since Mar 2Pushed 2mo agoCompare [ Source](https://github.com/rondinabrybry/rich-text-editor)[ Packagist](https://packagist.org/packages/rondinabrybry/rich-text-editor)[ RSS](/packages/rondinabrybry-rich-text-editor/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) RTE - Rich Text Editor ====================== [](#rte---rich-text-editor) A modern, modular, CKEditor-like rich text editor built with pure JavaScript. [![RTE Demo](demo/screenshot.png)](demo/screenshot.png) Features -------- [](#features) - 🎨 **Rich Text Formatting** - Bold, italic, underline, strikethrough, subscript, superscript - 📝 **Block Formatting** - Headings (H1-H6), paragraphs, blockquotes, code blocks - 📋 **Lists** - Ordered and unordered lists with indent/outdent - đŸŽ¯ **Text Alignment** - Left, center, right, justify - 🔗 **Links & Media** - Insert links and images - 🎨 **Colors** - Text color and background color pickers - ↩ī¸ **History** - Undo/redo with keyboard shortcuts - 🔌 **Plugin System** - Extensible architecture for custom features - ⚡ **Zero Dependencies** - Pure vanilla JavaScript - â™ŋ **Accessible** - Keyboard navigation and ARIA attributes - 📱 **Responsive** - Works on desktop and mobile devices Quick Start ----------- [](#quick-start) ### Basic Usage [](#basic-usage) ``` > import RTE from './src/index.js'; const editor = new RTE('#editor', { placeholder: 'Start typing...', minHeight: 300 }); ``` ### With Textarea [](#with-textarea) ``` import RTE from './src/index.js'; const editor = new RTE('#my-editor'); // The textarea will be synced automatically ``` Configuration Options --------------------- [](#configuration-options) ``` const editor = new RTE('#editor', { // Toolbar configuration toolbar: [ 'bold', 'italic', 'underline', '|', 'heading', '|', 'bulletList', 'orderedList', '|', 'link', 'image', '|', 'undo', 'redo' ], // Placeholder text placeholder: 'Start typing...', // Height settings height: 'auto', // or number in pixels minHeight: 200, // minimum height maxHeight: 500, // maximum height (enables scrolling) // Readonly mode readonly: false, // Auto focus on init autofocus: false, // Sanitize content (XSS protection) sanitize: true, // Additional plugins plugins: [] }); ``` Toolbar Items ------------- [](#toolbar-items) ItemDescription`bold`Bold text (Ctrl+B)`italic`Italic text (Ctrl+I)`underline`Underline text (Ctrl+U)`strikethrough`Strikethrough text`subscript`Subscript text`superscript`Superscript text`heading`Heading dropdown (H1-H6)`paragraph`Paragraph format`blockquote`Block quote`codeBlock`Code block`horizontalRule`Horizontal line`bulletList`Unordered list`orderedList`Ordered list`indent`Increase indent`outdent`Decrease indent`alignLeft`Align left`alignCenter`Align center`alignRight`Align right`alignJustify`Justify`link`Insert/edit link`unlink`Remove link`image`Insert image`textColor`Text color picker`backgroundColor`Background color picker`undo`Undo (Ctrl+Z)`redo`Redo (Ctrl+Y)`clearFormatting`Remove formatting`|`SeparatorAPI Reference ------------- [](#api-reference) ### Getting/Setting Content [](#gettingsetting-content) ``` // Get HTML content const html = editor.getContent(); // Get sanitized HTML content const safeHtml = editor.getContent(true); // Set HTML content editor.setContent('Hello World'); // Get plain text const text = editor.getText(); // Set plain text editor.setText('Hello World'); // Clear content editor.clear(); // Check if empty const isEmpty = editor.isEmpty(); ``` ### Word & Character Count [](#word--character-count) ``` // Get word count const words = editor.getWordCount(); // Get character count const chars = editor.getCharacterCount(); // Get character count without spaces const charsNoSpaces = editor.getCharacterCount(true); ``` ### Focus Management [](#focus-management) ``` // Focus the editor editor.focus(); // Blur the editor editor.blur(); // Check if focused const hasFocus = editor.hasFocus(); ``` ### Readonly Mode [](#readonly-mode) ``` // Set readonly editor.setReadonly(true); // Check readonly state const isReadonly = editor.isReadonly(); ``` ### Events [](#events) ``` // Content changed editor.on('content:change', () => { console.log('Content changed'); }); // Editor focused editor.on('focus', () => { console.log('Editor focused'); }); // Editor blurred editor.on('blur', () => { console.log('Editor blurred'); }); // Editor ready editor.on('ready', () => { console.log('Editor is ready'); }); // Remove listener const unsubscribe = editor.on('content:change', handler); unsubscribe(); // Remove the listener ``` ### Execute Commands [](#execute-commands) ``` // Execute a formatting command editor.execute('bold'); editor.execute('italic'); // Execute with value editor.execute('heading', 'h2'); editor.execute('textColor', '#ff0000'); // Register custom command editor.registerCommand('myCommand', { execute: (value) => { // Your command logic }, isActive: () => { // Return true if command is active return false; }, isEnabled: () => { // Return true if command is enabled return true; } }); ``` ### Destroy [](#destroy) ``` // Destroy the editor editor.destroy(); ``` Keyboard Shortcuts ------------------ [](#keyboard-shortcuts) ShortcutActionCtrl+BBoldCtrl+IItalicCtrl+UUnderlineCtrl+KInsert linkCtrl+ZUndoCtrl+YRedoCtrl+Shift+ZRedoTheming ------- [](#theming) The editor uses CSS custom properties for easy theming: ``` :root { /* Colors */ --rte-primary-color: #3b82f6; --rte-primary-hover: #2563eb; --rte-bg-color: #ffffff; --rte-text-color: #1f2937; --rte-border-color: #e5e7eb; /* Toolbar */ --rte-toolbar-bg: #f9fafb; /* Buttons */ --rte-button-hover: #e5e7eb; --rte-button-active: #dbeafe; /* Spacing */ --rte-spacing-sm: 8px; --rte-spacing-md: 12px; --rte-spacing-lg: 16px; /* Border radius */ --rte-radius-sm: 4px; --rte-radius-md: 6px; --rte-radius-lg: 8px; } ``` Browser Support --------------- [](#browser-support) - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) Project Structure ----------------- [](#project-structure) ``` RTE Package/ ├── src/ │ ├── core/ │ │ ├── rte.js # Main editor class │ │ ├── event-manager.js # Event system │ │ ├── plugin-manager.js # Plugin management │ │ ├── command-manager.js # Command handling │ │ ├── selection-manager.js # Selection utilities │ │ ├── data-manager.js # Content management │ │ └── toolbar-manager.js # Toolbar creation │ ├── icons/ │ │ └── icons.js # SVG icons │ ├── styles/ │ │ └── rte.css # Editor styles │ └── index.js # Main entry point ├── demo/ │ └── index.html # Demo page ├── package.json └── README.md ``` License ------- [](#license) MIT License - feel free to use in personal and commercial projects. Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ### Health Score 19 — LowBetter than 10% of packages Maintenance57 Moderate activity, may be stable Popularity3 Limited adoption so far Community6 Small or concentrated contributor base Maturity11 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/596ae4e4fd70506623485e51183c8cbadbdb55cb50b26d3f519f8ce0e695a87a?d=identicon)[rondinabrybry](/maintainers/rondinabrybry) --- Top Contributors [![rondinabrybry](https://avatars.githubusercontent.com/u/71830788?v=4)](https://github.com/rondinabrybry "rondinabrybry (28 commits)") ### Embed Badge ![Health badge](/badges/rondinabrybry-rich-text-editor/health.svg) ``` [![Health](https://phpackages.com/badges/rondinabrybry-rich-text-editor/health.svg)](https://phpackages.com/packages/rondinabrybry-rich-text-editor) ``` ### Alternatives [ammadeuss/laravel-html-dom-parser Laravel wrapper for the PHP Simple HTML DOM Parser package 37365.0k1](/packages/ammadeuss-laravel-html-dom-parser) PHPackages Š 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)