pandao/editor.md
Editor.md
Editor.md is an embeddable Markdown editor component for web applications that provides a real-time, dual-pane live preview alongside the raw source as the user types. It is designed as a plugin-based Markdown editor with a plugin architecture for extending functionality through custom modules, and it supports rendering LaTeX mathematical expressions using KaTeX as well as converting flowchart and sequence diagram syntax into visual diagrams within the preview.
The editor distinguishes itself through its plugin-based extension system, which allows loading additional functionality through external modules or custom plugins without modifying the core component. It supports asynchronous module loading via RequireJS or SeaJS for dependency management, and includes synchronized scrolling between the editor and preview panes with optional one-way synchronization. The editor also handles cross-origin image uploads through an iframe-based mechanism, supports drag-and-drop image uploads, and provides dialog-driven media insertion for images, links, tables, and other rich media elements.
Additional capabilities include customizable keyboard shortcuts, localization support through language packs, and theming options that allow independent customization of the editor, preview pane, and toolbar appearance. The editor can generate a clickable table of contents from heading tags, collapse and expand sections of the Markdown source, and includes HTML sanitization to filter unsafe content from rendering. It also supports text manipulation operations such as search and replace, and inserting page breaks, code blocks, emoji, and task lists through toolbar actions or syntax.
Features
- Markdown Editors - Embeds a full-featured Markdown editor with live preview into web applications as a reusable component.
- Embeddable Components - Provides an embeddable Markdown editor component for web applications with live preview and toolbar customization.
- Plugin-Based Editors - Provides a plugin architecture for extending Markdown editor functionality through custom modules and features.
- Diagram Renderers - Embeds flowchart and sequence diagram syntax that renders as visual diagrams in the preview.
- Mathematical Notation Renderers - Renders LaTeX mathematical expressions inline or as blocks using KaTeX within the Markdown preview.
- KaTeX Renderers - Renders LaTeX mathematical expressions inline and as blocks using KaTeX within the Markdown preview.
- Markdown Previewers - Ships a real-time dual-pane live preview that updates as the user types Markdown content.
- Diagramming Engines - Converts flowchart and sequence diagram syntax embedded in Markdown into visual diagrams in the preview.
- LaTeX Math Rendering - Renders LaTeX mathematical expressions inline or as blocks within the preview using the KaTeX library.
- Plugin Extenders - Loads additional functionality through modules or custom plugins to add new features.
- Plugin-Based Editor Extensibility - Provides a plugin architecture for extending Markdown editor functionality without modifying the core component.
- Editor Live Previews - Renders a real-time preview alongside the source editor, updating as the user types Markdown content.
- KaTeX-Enabled Editors - Displays LaTeX and TeX mathematical expressions using KaTeX in the rendered Markdown preview.
- Flowchart and Sequence - Converts flowchart and sequence diagram syntax embedded in Markdown into visual diagrams in the preview.
- Drag-and-Drop File Upload - Accepts image files dropped onto the editor and uploads them, inserting the resulting URL into the document.
- Scroll Synchronization - Links the scroll positions of the editor and preview panes, with optional one-way synchronization.
- Rich Media Insertions - Opens modal dialogs for inserting images, links, tables, and other rich media elements into the Markdown source.
- Dialog-Driven Insertions - Opens dialog boxes for inserting images, links, tables, emoji, and HTML entities into the Markdown source.
- Table of Contents Generators - Generates a clickable table of contents from heading tags, displayed as a dropdown menu.
- Markdown 编辑器 - Listed in the “Markdown 编辑器” section of the Great Open Source Project awesome list.
- 富文本编辑器/Markdown编辑器/Markdown解析器 - Listed in the “富文本编辑器/Markdown编辑器/Markdown解析器” section of the Awesome Frontend awesome list.
