nhn/tui.editor
Tui.editor
This project is a web-based rich text editor designed for markdown content authoring. It provides a dual-mode interface that synchronizes raw markdown syntax with a visual WYSIWYG editing experience, allowing users to toggle between modes while maintaining a consistent document state.
The editor distinguishes itself through a modular architecture that supports custom content blocks and plugin extensions. This system enables the integration of specialized features such as code syntax highlighting, chart rendering, diagram generation, and complex table formatting. It also includes a live preview mode that coordinates the vertical scroll position between raw input and rendered output for real-time feedback.
Beyond core editing, the project offers a read-only viewer mode for displaying formatted content and supports interface localization for global accessibility. It is built to be embedded into web applications through specialized wrapper components that facilitate integration with various frontend frameworks.
Features
- Markdown Editors - Delivers a dual-mode text editor that synchronizes raw markdown syntax with a visual interface for real-time document creation.
- Markdown-Based Content Authoring - Provides a dual-mode interface for creating and editing structured markdown documents with real-time visual feedback.
- Rich Text Editors - Implements a modular rich text editing interface supporting custom content blocks, plugins, and live previewing.
- Markdown Abstract Syntax Trees - Parses raw markdown text into structured tree representations to enable consistent document manipulation and rendering.
- Plugin Systems - Extends core functionality through a modular plugin system for features like syntax highlighting and diagram rendering.
- Text Editing Modes - Provides a synchronized dual-mode interface for toggling between raw markdown and visual WYSIWYG editing.
- Plugin-Based Architectures - Supports a modular hook system for injecting custom rendering logic and document nodes into the core.
- Live Preview Systems - Visualizes rendered output alongside raw markdown with synchronized scrolling for real-time formatting feedback.
- jQuery Editors - Extensible Markdown-based WYSIWYG editor.
- Project Documentation Examples - Uses colorful icons and demo GIFs.
- Content Block Editors - Allows defining unique document nodes and parsing rules for specialized content types beyond standard markdown.
- Framework Plugins - Ships as a web-based editing tool with framework-specific integration plugins and read-only viewer modes.
- Frontend Frameworks - Integrates rich text editing capabilities into web applications using framework-specific wrapper components.
- State Synchronization Handlers - Maintains a single internal document model that synchronizes state between raw markdown and visual editing interfaces.
- Read-Only Data Views - Includes a dedicated viewer mode for displaying formatted content without interactive editing tools.
- Scroll Event Handlers - Coordinates vertical scroll positions between raw input and rendered output panes for real-time feedback.
- Virtual DOM Reconciliation - Updates the visual editing interface by calculating minimal changes between the document model and the rendered view.
- Document Formatting Frameworks - Supports specialized content types like diagrams and charts through an extensible document formatting architecture.
- Framework UI Wrappers - Provides framework-specific adapters to integrate the editor into modern component-based web applications.
- User Interface Localization - Supports interface localization to enable language support for a global user base.
