margox/braft-editor

Braft Editor is a rich text editor component for React, a popular JavaScript library for building web interfaces. A rich text editor is the kind of text input area where users can format their writing, insert images, change font sizes, add links, and produce styled content rather than plain text. This one is intended for Chinese-language projects primarily, though the interface supports multiple languages including English, Korean, Japanese, Polish, and Turkish. The component is built on top of draft-js, which is a lower-level text editing framework. One important thing the README spells out clearly: draft-js does not store content as HTML internally. It uses its own data format called EditorState. This means that if you need to take existing HTML from elsewhere and load it into the editor, or if your project depends on preserving specific HTML tags and attributes exactly, this editor may not handle that well. The conversion between external HTML and the editor's internal format is imperfect by design. If precise HTML fidelity matters, the README explicitly recommends not using this editor. For new content created entirely within the editor, the feature set covers standard text formatting, color and font controls, image and video insertion with drag-to-resize support for images, image float positioning (so text wraps around images), nested lists, and embedded media playback in a modal overlay. The toolbar buttons and their order are configurable, and custom buttons can be added. A form extension module and other extensions are available in a companion repository. Installation is via npm or yarn. The component works like a standard React controlled input: you pass it a value and an onChange handler. The README links to a full usage document and an online demo for seeing it in action before integrating it into a project.