包简介

A modern, modular rich text editor built with pure JavaScript

README 文档

README

A modern, modular, CKEditor-like rich text editor built with pure JavaScript.

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

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="src/styles/rte.css">
</head>
<body>
    <div id="editor"></div>
    
    <script type="module">
        import RTE from './src/index.js';
        
        const editor = new RTE('#editor', {
            placeholder: 'Start typing...',
            minHeight: 300
        });
    </script>
</body>
</html>

With Textarea

<textarea id="my-editor"></textarea>

<script type="module">
    import RTE from './src/index.js';
    
    const editor = new RTE('#my-editor');
    
    // The textarea will be synced automatically
</script>

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

Item	Description
`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
`\|`	Separator

API Reference

Getting/Setting Content

// Get HTML content
const html = editor.getContent();

// Get sanitized HTML content
const safeHtml = editor.getContent(true);

// Set HTML content
editor.setContent('<p>Hello World</p>');

// 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

// 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 the editor
editor.focus();

// Blur the editor
editor.blur();

// Check if focused
const hasFocus = editor.hasFocus();

Readonly Mode

// Set readonly
editor.setReadonly(true);

// Check readonly state
const isReadonly = editor.isReadonly();

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 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 the editor
editor.destroy();

Keyboard Shortcuts

Shortcut	Action
Ctrl+B	Bold
Ctrl+I	Italic
Ctrl+U	Underline
Ctrl+K	Insert link
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+Shift+Z	Redo

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

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

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

MIT License - feel free to use in personal and commercial projects.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

rondinabrybry/rich-text-editor 适用场景与选型建议

rondinabrybry/rich-text-editor 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 3 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 03 月 02 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「wysiwyg」「editor」「formatting」「contenteditable」「rich-text-editor」「text-editor」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 rondinabrybry/rich-text-editor 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 rondinabrybry/rich-text-editor 我们能提供哪些服务？

定制开发 / 二次开发

基于 rondinabrybry/rich-text-editor 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 rondinabrybry/rich-text-editor 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

markup/addressing 1

A library that can render international postal addresses in different formats.

surgiie/transformer 126

A data transforming/formatting package for php.

litalino/flarum-more-bbcode 2

Adds more BBCode

mnapoli/pretty 108

Run all code formatting tools with one command: pretty

martincamen/laravel-file-size 0

Eloquent file size calculations and formatting for Laravel

sijad/flarum-ext-spoiler-alert 1

Spoiler plugin for Flarum using spoiler-alert jQuery plugin

rondinabrybry/rich-text-editor

包简介

关键字：