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 Maintenance56 Moderate activity, may be stable Popularity3 Limited adoption so far Community6 Small or concentrated contributor base Maturity12 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 [wapmorgan/morphos A morphological solution for Russian and English language written completely in PHP. Provides classes to inflect personal names, geographical names, decline and pluralize nouns, generate cardinal and ordinal numerals, spell out money amounts and time. 8351.3M7](/packages/wapmorgan-morphos)[mcp/sdk Model Context Protocol SDK for Client and Server applications in PHP 1.4k423.9k30](/packages/mcp-sdk)[hackzilla/password-generator Password Generator Library 3035.2M15](/packages/hackzilla-password-generator)[alibaba/nacos ้˜ฟ้‡Œๅทดๅทดnacos้…็ฝฎไธญๅฟƒphpๅฎขๆˆท็ซฏ 19340.8k1](/packages/alibaba-nacos)[bvdputte/kirby-fingerprint Cache-busting utility to fingerprint assets (JS/CSS) in Kirby 3 1610.0k](/packages/bvdputte-kirby-fingerprint) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)