NOTEGEN.Markdown Editor
Built with Vditor, this editor provides powerful Markdown editing capabilities, supporting multiple editing modes and rich extended syntax.
Editing Modes
The editor supports three editing modes, switchable via the toolbar:
| Mode | Icon | Description |
|---|---|---|
| Instant Rendering | Default | Similar to Typora, auto-renders as you type, integrated editing and preview |
| WYSIWYG | Toggle selection | Edit like Microsoft Word, friendly for users unfamiliar with Markdown |
| Split View | Toggle selection | Traditional mode with editor on left, preview on right |
Tip: Mobile devices use instant rendering mode by default
Toolbar Features
Basic Formatting
| Button | Shortcut | Function | Syntax Example |
|---|---|---|---|
| Undo/Redo | Ctrl+Z / Ctrl+Y | Undo/redo operations | - |
| Heading | - | Insert heading | ## Heading |
| Bold | Ctrl+B | Bold text | **text** |
| Italic | Ctrl+I | Italic text | *text* |
| Strikethrough | - | Strikethrough | ~~text~~ |
| Horizontal Rule | - | Insert horizontal line | --- |
| Quote | Ctrl+Shift+9 | Quote block | > quote |
Lists & Code
| Button | Function | Syntax Example |
|---|---|---|
| Bullet List | Bulleted list | - item |
| Ordered List | Numbered list | 1. item |
| Task List | Todo items | - [ ] task |
| Code Block | Code area | ```js\ncode\n``` |
| Inline Code | Inline code | `code` |
Insert Content
| Button | Function | Usage |
|---|---|---|
| Upload | Upload images/files | Supports drag & drop, paste upload |
| Link | Insert link | [text](url) |
| Table | Insert table | Supports Markdown table syntax |
View Switching
| Button | Function |
|---|---|
| Edit Mode | Switch editing mode |
| Preview | Preview-only mode |
Floating Toolbar
Automatically displays when text is selected, providing AI-assisted features:
| Feature | Description |
|---|---|
| Quote | Add quote formatting to selected content |
| Polish | AI polish selected text |
| Erase | AI remove redundant content |
| Expand | AI expand selected content |
| Read | Read selected text aloud |
Bottom Toolbar
Left Side
| Feature | Description |
|---|---|
| Word Count | Display current document word count |
| AI Completion Toggle | Enable/disable AI auto-completion |
| Copy | Copy Markdown content |
| Export | Export document |
Right Side
| Feature | Description |
|---|---|
| Vector Calculate | Vector calculation feature |
| Sync | Sync to remote |
| History | View edit history |
| Pull | Pull remote updates |
Keyboard Shortcuts
| Shortcut | Function |
|---|---|
Ctrl+Z | Undo |
Ctrl+Y / Ctrl+Shift+Z | Redo |
Ctrl+B | Bold |
Ctrl+I | Italic |
Ctrl+Shift+9 | Quote |
Ctrl+Enter | Submit/Publish |
Ctrl+F | Open search |
Tab | Accept AI completion |
Esc | Cancel AI completion |
Markdown Syntax
The editor supports standard Markdown syntax and various extended syntax:
- Basic Formatting: Headings, bold, italic, strikethrough, inline code
- Lists: Unordered lists, ordered lists, task lists
- Quotes & Links: Quote blocks, hyperlinks, images
- Code Blocks: Syntax highlighting for
js,ts,python,go,java,html,css,bash,json,sql, and more - Tables: Standard Markdown tables
- Math Formulas: Inline formulas
$...$and multi-line formulas$$...$$ - Diagrams: Mermaid flowcharts, sequence diagrams, Gantt charts, and Mindmap mind maps
- Footnotes:
[^1]syntax - Emojis: Type
:to trigger emoji completion
Image Upload
Supported Upload Methods
- Drag & Drop: Drag images directly into the editor
- Paste Upload: Copy images and paste into the editor
- Click Upload: Click the upload button in the toolbar
Image Hosting Support
- GitHub
- SM.MS
- PicGo
- AWS S3
Image hosting services can be configured in settings.
Outline Feature
The left outline panel automatically displays document structure:
- Click outline to jump to corresponding section
- Supports collapsing/expanding
- Follows current editing position
Themes
The editor supports light/dark theme switching, automatically following system settings.
Search Function
Press Ctrl+F to open the search panel, supporting:
- Text search
- Replace content
- Case sensitivity
- Previous/next navigation
Auto Save
The editor automatically saves content locally to prevent accidental loss.
Hint Features
| Input | Trigger |
|---|---|
... | Continue writing (AI) |
??? | Ask question (AI) |
File Manager
The file manager is a core module of the note-taking application, providing complete file and folder management capabilities, supporting local storage, cloud sync, vector retrieval, and other advanced features.
General Settings
Configure application appearance, language, zoom level, and other basic interface settings.