margox/braft-editor
Braft Editor
Braft Editor is a React-based rich text editor built on Draft.js that provides a framework for content creation and formatting. It functions as a reusable UI component that allows users to compose formatted documents in a WYSIWYG interface and export the resulting content as HTML strings.
The project features built-in localization support for multiple languages, including Chinese, Japanese, and Korean. It provides a modular system for extending editor functionality through plugins, custom toolbar mappings, and specialized media entities.
The editor covers a broad range of content capabilities, including rich text formatting, paragraph and block styling, and the organization of nested lists. It supports the embedding of multimedia content such as images, audio, video, and formatted code blocks. Document state is managed through a controlled component pattern, allowing for synchronization between the editor and the application state.
Features
- Rich Text Editors - Provides a full-featured, React-based rich text editing interface for creating formatted web content.
- State to HTML Converters - Transforms internal immutable state into HTML strings for storage and restoration.
- Rich Text Editors - Built on Draft.js to provide a robust document model and framework for rich text editing experiences.
- Rich Text WYSIWYG Editors - Provides a visual editor for formatted text and media that exports content as HTML strings.
- WYSIWYG Editors - Offers a visual editing interface where output matches the final published HTML version in real-time.
- Draft.js Integrations - Built as a comprehensive wrapper and framework around the Draft.js core for React environments.
- Editor Toolkits - Provides a modular framework for building custom rich text editing experiences with configurable toolbars and plugins.
- Editor State Syncing - Allows for clearing content, checking empty states, and extracting data as plain text or HTML.
- Paragraph Formatting - Provides controls for text alignment, line height, indentation, and block-level layout.
- Multi-Language Content Authoring - Enables authoring of content in multiple languages through a localized visual editor interface.
- Editor State Management - Provides mechanisms to synchronize document content with application state and manage read-only modes.
- Editor Functionality Plugins - Enables the addition of custom components and behaviors through a flexible plugin architecture.
- Plugin-Based Extensibility - Offers a modular plugin system to add custom entities and conversion rules to the editor.
- Command-Mapped Toolbars - Provides a mapping system that binds toolbar UI components to internal programmatic editor commands.
- Editor Toolbar Configurations - Allows modification of button visibility and layout to customize the editor's toolbar.
- React Components - Ships as a reusable interface element designed for seamless integration within the React ecosystem.
- State Management Patterns - Implements patterns for synchronizing internal editor state with external React props and callbacks.
- Drag-and-Drop Asset Insertion - Enables image insertion via upload, drag-and-drop, or pasting, with adjustable dimensions and alignment.
- Entity-Based Content Models - Handles images and videos as distinct entities mapped to metadata and specialized renderers.
- Customizable Code Block Renderers - Includes formatted code blocks that support tab-based indentation and custom visual rendering.
- Multilingual Locale Detection - Supports localization of the editor interface across multiple languages including Chinese, Japanese, and Korean.
- Multimedia Embeds - Supports embedding third-party videos and webpages within the editor interface.
- Rich Text Styling - Includes a comprehensive suite of rich text styling for bold, italic, underline, and background colors.
- Rich Media Insertions - Provides commands for inserting images, audio, and video with configurable upload interfaces.
- Hyperlink Management - Supports inserting and modifying hyperlinks within the document content.
- Controlled Component State - Implements a controlled component pattern to synchronize document state with the application state.
- Nested Lists - Supports the creation of ordered and unordered lists with hierarchical nesting.
- Rich Text Editors - Extensible rich text editor component.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
