From c91ef5aac9364d5cbd33bd30dd5459e5eb98cbf0 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Thu, 10 Sep 2026 20:46:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5=20CodeMirror=20?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=90=8E=E5=8F=B0=20Markdown=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/MarkdownEditor.svelte    | 419 ++++++++++++++++++
 src/routes/admin/pages/[id]/+page.svelte      |  37 +-
 src/routes/admin/pages/new/+page.svelte       |  37 +-
 src/routes/admin/posts/[id]/+page.svelte      | 339 +-------------
 src/routes/admin/posts/new/+page.svelte       | 339 +-------------
 5 files changed, 427 insertions(+), 744 deletions(-)
 create mode 100644 src/lib/components/admin/MarkdownEditor.svelte

diff --git a/src/lib/components/admin/MarkdownEditor.svelte b/src/lib/components/admin/MarkdownEditor.svelte
new file mode 100644
index 0000000..deb560f
--- /dev/null
+++ b/src/lib/components/admin/MarkdownEditor.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { EditorView, basicSetup } from 'codemirror';
+	import { EditorState } from '@codemirror/state';
+	import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+	import { languages } from '@codemirror/language-data';
+	import { placeholder as cmPlaceholder } from '@codemirror/view';
+
+	let { value = $bindable(''), placeholderText = '支持 Markdown 格式...' } = $props();
+
+	let editorContainer: HTMLDivElement;
+	let view: EditorView;
+	let isUpdating = false;
+
+	const customTheme = EditorView.theme({
+		'&': {
+			color: 'var(--text-color)',
+			backgroundColor: 'rgba(0, 0, 0, 0.015)',
+			fontFamily: 'inherit',
+			fontSize: '1.05rem',
+			border: '1px solid rgba(0, 0, 0, 0.12)',
+			transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
+			minHeight: '400px',
+			height: '100%'
+		},
+		'&.cm-focused': {
+			outline: 'none',
+			borderColor: 'var(--accent-color, #419b38)',
+			boxShadow: '0 0 0 3px rgba(65, 155, 56, 0.08)'
+		},
+		'.cm-content': {
+			minHeight: '400px',
+			padding: '12px 14px',
+			lineHeight: '1.8'
+		},
+		'.cm-scroller': {
+			overflow: 'auto',
+			minHeight: '400px'
+		},
+		'.cm-gutters': {
+			backgroundColor: 'rgba(0, 0, 0, 0.03)',
+			color: 'rgba(0, 0, 0, 0.4)',
+			borderRight: '1px solid rgba(0, 0, 0, 0.12)',
+			borderTopLeftRadius: '0',
+			borderBottomLeftRadius: '0'
+		},
+		'.cm-activeLineGutter': {
+			backgroundColor: 'rgba(0, 0, 0, 0.08)'
+		}
+	});
+
+	onMount(() => {
+		const state = EditorState.create({
+			doc: value,
+			extensions: [
+				basicSetup,
+				cmPlaceholder(placeholderText),
+				markdown({
+					base: markdownLanguage,
+					codeLanguages: languages
+				}),
+				customTheme,
+				EditorView.lineWrapping,
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) {
+						isUpdating = true;
+						value = update.state.doc.toString();
+						isUpdating = false;
+					}
+				})
+			]
+		});
+
+		view = new EditorView({
+			state,
+			parent: editorContainer
+		});
+	});
+
+	onDestroy(() => {
+		if (view) {
+			view.destroy();
+		}
+	});
+
+	$effect(() => {
+		if (view && value !== view.state.doc.toString() && !isUpdating) {
+			view.dispatch({
+				changes: { from: 0, to: view.state.doc.length, insert: value }
+			});
+		}
+	});
+
+	function insertAtCursor(before: string, after: string = '', defaultText: string = '') {
+		if (!view) return;
+
+		const selection = view.state.selection.main;
+		const selectedText = view.state.sliceDoc(selection.from, selection.to);
+		const textToInsert = selectedText
+			? before + selectedText + after
+			: before + defaultText + after;
+
+		view.dispatch({
+			changes: {
+				from: selection.from,
+				to: selection.to,
+				insert: textToInsert
+			},
+			selection: {
+				anchor: selection.from + textToInsert.length
+			}
+		});
+
+		view.focus();
+
+		if (!selectedText && defaultText) {
+			view.dispatch({
+				selection: {
+					anchor: selection.from + before.length,
+					head: selection.from + before.length + defaultText.length
+				}
+			});
+		}
+	}
+
+	function insertMore() {
+		insertAtCursor('\n<!--more-->\n', '', '');
+	}
+
+	let showAdmonitionMenu = $state(false);
+	const admonitionTypes = [
+		{ type: 'note', title: '注意', label: '注意 (Note)' },
+		{ type: 'abstract', title: '摘要', label: '摘要 (Abstract)' },
+		{ type: 'info', title: '信息', label: '信息 (Info)' },
+		{ type: 'tip', title: '技巧', label: '技巧 (Tip)' },
+		{ type: 'success', title: '成功', label: '成功 (Success)' },
+		{ type: 'question', title: '问题', label: '问题 (Question)' },
+		{ type: 'warning', title: '警告', label: '警告 (Warning)' },
+		{ type: 'failure', title: '失败', label: '失败 (Failure)' },
+		{ type: 'danger', title: '危险', label: '危险 (Danger)' },
+		{ type: 'bug', title: 'Bug', label: 'Bug' },
+		{ type: 'example', title: '示例', label: '示例 (Example)' },
+		{ type: 'quote', title: '引用', label: '引用 (Quote)' }
+	];
+
+	function insertAdmonition(type: string, title: string) {
+		const openTag = `{{< admonition ${type} "${title}" >}}\n`;
+		const closeTag = `\n{{< /admonition >}}`;
+		insertAtCursor('\n' + openTag, closeTag, '在这里输入提示内容...');
+		showAdmonitionMenu = false;
+	}
+</script>
+
+<div class="editor-wrapper">
+	<div class="md-toolbar">
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('**', '**', '粗体')}
+			title="加粗"
+		>
+			<svg viewBox="0 0 24 24"
+				><path d="M6 4h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path
+					d="M6 12h10a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"
+				></path></svg
+			>
+		</button>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('*', '*', '斜体')}
+			title="斜体"
+		>
+			<svg viewBox="0 0 24 24"
+				><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"
+				></line><line x1="15" y1="4" x2="9" y2="20"></line></svg
+			>
+		</button>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('~~', '~~', '删除线')}
+			title="删除线"
+		>
+			<svg viewBox="0 0 24 24"
+				><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"></path><line
+					x1="4"
+					y1="12"
+					x2="20"
+					y2="12"
+				></line></svg
+			>
+		</button>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('### ', '', '标题')}
+			title="标题"
+		>
+			<svg viewBox="0 0 24 24"><path d="M4 12h16M4 18V6M20 18V6"></path></svg>
+		</button>
+		<div class="md-divider"></div>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('- ', '', '列表项')}
+			title="无序列表"
+		>
+			<svg viewBox="0 0 24 24"
+				><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line
+					x1="8"
+					y1="18"
+					x2="21"
+					y2="18"
+				></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"
+				></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg
+			>
+		</button>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('[', '](https://)', '链接文字')}
+			title="链接"
+		>
+			<svg viewBox="0 0 24 24"
+				><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
+					d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+				></path></svg
+			>
+		</button>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('![', '](https://)', '图片描述')}
+			title="图片"
+		>
+			<svg viewBox="0 0 24 24"
+				><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
+					points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
+					style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
+				></polygon></svg
+			>
+		</button>
+		<button
+			type="button"
+			class="md-btn"
+			onclick={() => insertAtCursor('```\n', '\n```', 'code')}
+			title="代码块"
+		>
+			<svg viewBox="0 0 24 24"
+				><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"
+				></polyline></svg
+			>
+		</button>
+		<div class="md-divider"></div>
+		<div class="toolbar-dropdown-wrapper">
+			{#if showAdmonitionMenu}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_interactive_supports_focus -->
+				<div
+					class="dropdown-overlay"
+					onclick={() => (showAdmonitionMenu = false)}
+					role="button"
+				></div>
+			{/if}
+			<button
+				type="button"
+				class="md-btn"
+				onclick={() => (showAdmonitionMenu = !showAdmonitionMenu)}
+				title="提示框 (Admonition)"
+			>
+				<svg viewBox="0 0 24 24"
+					><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"
+					></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg
+				>
+			</button>
+			{#if showAdmonitionMenu}
+				<div class="toolbar-dropdown">
+					{#each admonitionTypes as item (item.type)}
+						<button
+							type="button"
+							class="dropdown-item"
+							onclick={() => insertAdmonition(item.type, item.title)}
+						>
+							{item.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+		<button type="button" class="md-btn" onclick={insertMore} title="插入摘要分割线">
+			<svg viewBox="0 0 24 24"
+				><polyline points="5 5 5 9 19 9 19 5"></polyline><polyline points="5 19 5 15 19 15 19 19"
+				></polyline><line
+					x1="4"
+					y1="12"
+					x2="20"
+					y2="12"
+					stroke-dasharray="3 3"
+					stroke-linecap="butt"
+				></line></svg
+			>
+		</button>
+	</div>
+
+	<!-- hidden textarea for form submission -->
+	<textarea name="content" style="display:none;" {value}></textarea>
+	<div bind:this={editorContainer} class="editor-container"></div>
+</div>
+
+<style>
+	.editor-wrapper {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.editor-container {
+		width: 100%;
+	}
+
+	.md-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		margin-bottom: 8px;
+	}
+
+	.md-btn {
+		background: transparent;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: var(--text-color);
+		opacity: 0.65;
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border-radius: 2px;
+	}
+
+	.md-btn:hover {
+		opacity: 1;
+		color: var(--accent-color, #419b38);
+		background-color: rgba(0, 0, 0, 0.03);
+	}
+
+	.md-btn svg {
+		width: 18px;
+		height: 18px;
+		stroke: currentColor;
+		stroke-width: 1.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		fill: none;
+	}
+
+	.md-divider {
+		width: 2px;
+		height: 16px;
+		background: var(--text-color);
+		opacity: 0.15;
+		margin: 0 4px;
+	}
+
+	.toolbar-dropdown-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 99;
+	}
+
+	.toolbar-dropdown {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		margin-top: 4px;
+		background: var(--bg-color, #ffffff);
+		border: 1px solid var(--text-color);
+		z-index: 100;
+		width: 140px;
+		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.dropdown-item {
+		background: transparent;
+		border: none;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		padding: 8px 12px;
+		text-align: left;
+		font-family: inherit;
+		font-size: 0.85rem;
+		color: var(--text-color);
+		cursor: pointer;
+		font-weight: 600;
+		transition: all 0.2s ease;
+	}
+
+	.dropdown-item:last-child {
+		border-bottom: none;
+	}
+
+	.dropdown-item:hover {
+		background: var(--text-color);
+		color: var(--bg-color, #ffffff);
+	}
+</style>
diff --git a/src/routes/admin/pages/[id]/+page.svelte b/src/routes/admin/pages/[id]/+page.svelte
index 949ace7..c2e0b31 100644
--- a/src/routes/admin/pages/[id]/+page.svelte
+++ b/src/routes/admin/pages/[id]/+page.svelte
@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import type { PageData, ActionData } from './$types';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+	import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte';
 	import TextInput from '$lib/components/admin/TextInput.svelte';
 	import Button from '$lib/components/admin/Button.svelte';
 	import Alert from '$lib/components/admin/Alert.svelte';
@@ -70,14 +71,7 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<textarea
-							id="content"
-							name="content"
-							bind:value={content}
-							rows="16"
-							style="min-height: 400px;"
-							placeholder="支持 Markdown 格式..."
-							required></textarea>
+						<MarkdownEditor bind:value={content} />
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -220,33 +214,6 @@
 		letter-spacing: 0.5px;
 	}
 
-	.form-group textarea {
-		width: 100%;
-		padding: 12px 14px;
-		border: 1px solid rgba(0, 0, 0, 0.12);
-		border-radius: 0;
-		background: rgba(0, 0, 0, 0.015);
-		font-family: inherit;
-		font-size: 1.05rem;
-		color: var(--text-color);
-		box-sizing: border-box;
-		transition:
-			border-color 0.3s ease,
-			box-shadow 0.3s ease;
-	}
-
-	.form-group textarea {
-		resize: vertical;
-		line-height: 1.8;
-		min-height: 120px;
-	}
-
-	.form-group textarea:focus {
-		outline: none;
-		border-color: var(--accent-color, #419b38);
-		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
-	}
-
 	.sidebar-box {
 		background: transparent;
 		border: none;
diff --git a/src/routes/admin/pages/new/+page.svelte b/src/routes/admin/pages/new/+page.svelte
index e8140d5..c66741d 100644
--- a/src/routes/admin/pages/new/+page.svelte
+++ b/src/routes/admin/pages/new/+page.svelte
@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import type { ActionData } from './$types';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+	import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte';
 	import TextInput from '$lib/components/admin/TextInput.svelte';
 	import Button from '$lib/components/admin/Button.svelte';
 	import Alert from '$lib/components/admin/Alert.svelte';
@@ -79,14 +80,7 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<textarea
-							id="content"
-							name="content"
-							bind:value={content}
-							rows="16"
-							style="min-height: 400px;"
-							placeholder="支持 Markdown 格式..."
-							required></textarea>
+						<MarkdownEditor bind:value={content} />
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -235,33 +229,6 @@
 		letter-spacing: 0.5px;
 	}
 
-	.form-group textarea {
-		width: 100%;
-		padding: 12px 14px;
-		border: 1px solid rgba(0, 0, 0, 0.12);
-		border-radius: 0;
-		background: rgba(0, 0, 0, 0.015);
-		font-family: inherit;
-		font-size: 1.05rem;
-		color: var(--text-color);
-		box-sizing: border-box;
-		transition:
-			border-color 0.3s ease,
-			box-shadow 0.3s ease;
-	}
-
-	.form-group textarea {
-		resize: vertical;
-		line-height: 1.8;
-		min-height: 120px;
-	}
-
-	.form-group textarea:focus {
-		outline: none;
-		border-color: var(--accent-color, #419b38);
-		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
-	}
-
 	.sidebar-box {
 		background: transparent;
 		border: none;
diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte
index 6f6183c..9b49931 100644
--- a/src/routes/admin/posts/[id]/+page.svelte
+++ b/src/routes/admin/posts/[id]/+page.svelte
@@ -6,6 +6,7 @@
 	import type { PageData, ActionData } from './$types';
 	import { deserialize } from '$app/forms';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+	import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte';
 	import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
 	import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
 	import { parseHugoMarkdown } from '$lib/hugoParser';
@@ -105,60 +106,6 @@
 		}
 	}
 
-	// Markdown 工具栏功能
-	function insertAtCursor(before: string, after: string = '', defaultText: string = '') {
-		const textarea = document.getElementById('content') as HTMLTextAreaElement;
-		if (!textarea) return;
-
-		const start = textarea.selectionStart;
-		const end = textarea.selectionEnd;
-		const selectedText = textarea.value.substring(start, end);
-
-		const insertion = selectedText ? before + selectedText + after : before + defaultText + after;
-
-		content = textarea.value.substring(0, start) + insertion + textarea.value.substring(end);
-
-		// 恢复焦点并选中文字
-		setTimeout(() => {
-			textarea.focus();
-			if (selectedText) {
-				textarea.setSelectionRange(start, start + insertion.length);
-			} else {
-				textarea.setSelectionRange(
-					start + before.length,
-					start + before.length + defaultText.length
-				);
-			}
-		}, 0);
-	}
-
-	function insertMore() {
-		insertAtCursor('\n<!--more-->\n', '', '');
-	}
-
-	let showAdmonitionMenu = $state(false);
-	const admonitionTypes = [
-		{ type: 'note', title: '注意', label: '注意 (Note)' },
-		{ type: 'abstract', title: '摘要', label: '摘要 (Abstract)' },
-		{ type: 'info', title: '信息', label: '信息 (Info)' },
-		{ type: 'tip', title: '技巧', label: '技巧 (Tip)' },
-		{ type: 'success', title: '成功', label: '成功 (Success)' },
-		{ type: 'question', title: '问题', label: '问题 (Question)' },
-		{ type: 'warning', title: '警告', label: '警告 (Warning)' },
-		{ type: 'failure', title: '失败', label: '失败 (Failure)' },
-		{ type: 'danger', title: '危险', label: '危险 (Danger)' },
-		{ type: 'bug', title: 'Bug', label: 'Bug' },
-		{ type: 'example', title: '示例', label: '示例 (Example)' },
-		{ type: 'quote', title: '引用', label: '引用 (Quote)' }
-	];
-
-	function insertAdmonition(type: string, title: string) {
-		const openTag = `{{< admonition ${type} "${title}" >}}\n`;
-		const closeTag = `\n{{< /admonition >}}`;
-		insertAtCursor('\n' + openTag, closeTag, '在这里输入提示内容...');
-		showAdmonitionMenu = false;
-	}
-
 	async function handleImportMarkdown(e: Event) {
 		const target = e.target as HTMLInputElement;
 		const file = target.files?.[0];
@@ -306,151 +253,6 @@
 					<label for="content">正文 *</label>
 
 					<div class="editor-header-right">
-						{#if mode === 'edit'}
-							<div class="md-toolbar">
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('**', '**', '粗体')}
-									title="加粗"
-									><svg viewBox="0 0 24 24"
-										><path d="M6 4h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path
-											d="M6 12h10a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"
-										></path></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('*', '*', '斜体')}
-									title="斜体"
-									><svg viewBox="0 0 24 24"
-										><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"
-										></line><line x1="15" y1="4" x2="9" y2="20"></line></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('~~', '~~', '删除线')}
-									title="删除线"
-									><svg viewBox="0 0 24 24"
-										><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"
-										></path><line x1="4" y1="12" x2="20" y2="12"></line></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('### ', '', '标题')}
-									title="标题"
-									><svg viewBox="0 0 24 24"><path d="M4 12h16M4 18V6M20 18V6"></path></svg></button
-								>
-								<div class="md-divider"></div>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('- ', '', '列表项')}
-									title="无序列表"
-									><svg viewBox="0 0 24 24"
-										><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"
-										></line><line x1="8" y1="18" x2="21" y2="18"></line><line
-											x1="3"
-											y1="6"
-											x2="3.01"
-											y2="6"
-										></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line
-											x1="3"
-											y1="18"
-											x2="3.01"
-											y2="18"
-										></line></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('[', '](https://)', '链接文字')}
-									title="链接"
-									><svg viewBox="0 0 24 24"
-										><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-										></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-										></path></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('![', '](https://)', '图片描述')}
-									title="图片"
-									><svg viewBox="0 0 24 24"
-										><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
-											points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
-											style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
-										></polygon></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('```\n', '\n```', 'code')}
-									title="代码块"
-									><svg viewBox="0 0 24 24"
-										><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"
-										></polyline></svg
-									></button
-								>
-								<div class="md-divider"></div>
-								<div class="toolbar-dropdown-wrapper">
-									{#if showAdmonitionMenu}
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
-										<!-- svelte-ignore a11y_interactive_supports_focus -->
-										<div
-											class="dropdown-overlay"
-											onclick={() => (showAdmonitionMenu = false)}
-											role="button"
-										></div>
-									{/if}
-									<button
-										type="button"
-										class="md-btn"
-										onclick={() => (showAdmonitionMenu = !showAdmonitionMenu)}
-										title="提示框 (Admonition)"
-										><svg viewBox="0 0 24 24"
-											><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"
-											></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg
-										></button
-									>
-									{#if showAdmonitionMenu}
-										<div class="toolbar-dropdown">
-											{#each admonitionTypes as item (item.type)}
-												<button
-													type="button"
-													class="dropdown-item"
-													onclick={() => insertAdmonition(item.type, item.title)}
-												>
-													{item.label}
-												</button>
-											{/each}
-										</div>
-									{/if}
-								</div>
-								<button type="button" class="md-btn" onclick={insertMore} title="插入摘要分割线"
-									><svg viewBox="0 0 24 24"
-										><polyline points="5 5 5 9 19 9 19 5"></polyline><polyline
-											points="5 19 5 15 19 15 19 19"
-										></polyline><line
-											x1="4"
-											y1="12"
-											x2="20"
-											y2="12"
-											stroke-dasharray="3 3"
-											stroke-linecap="butt"
-										></line></svg
-									></button
-								>
-							</div>
-						{/if}
 						<div class="editor-tabs">
 							<button
 								type="button"
@@ -468,14 +270,7 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<textarea
-							id="content"
-							name="content"
-							bind:value={content}
-							rows="16"
-							style="min-height: 400px;"
-							placeholder="支持 Markdown 格式..."
-							required></textarea>
+						<MarkdownEditor bind:value={content} />
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -723,39 +518,6 @@
 		text-transform: uppercase;
 	}
 
-	.form-group textarea {
-		width: 100%;
-		padding: 12px 14px;
-		border: 1px solid rgba(0, 0, 0, 0.12);
-		border-radius: 0;
-		background: rgba(0, 0, 0, 0.015);
-		font-family: inherit;
-		font-size: 1.05rem;
-		color: var(--text-color);
-		box-sizing: border-box;
-		transition:
-			border-color 0.3s ease,
-			box-shadow 0.3s ease;
-	}
-
-	.form-group textarea {
-		resize: vertical;
-		line-height: 1.8;
-		min-height: 120px;
-	}
-
-	.form-group textarea:focus {
-		outline: none;
-		border-color: var(--accent-color, #419b38);
-		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
-	}
-
-	.form-group textarea:focus {
-		outline: none;
-		border-color: var(--accent-color, #419b38);
-		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
-	}
-
 	.sidebar-box {
 		background: transparent;
 		border: none;
@@ -854,101 +616,4 @@
 		align-items: center;
 		gap: 15px;
 	}
-
-	.md-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.md-btn {
-		background: transparent;
-		border: none;
-		padding: 4px;
-		cursor: pointer;
-		color: var(--text-color);
-		opacity: 0.65;
-		transition: all 0.2s ease;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: 2px;
-	}
-
-	.md-btn:hover {
-		opacity: 1;
-		color: var(--accent-color, #419b38);
-		background-color: rgba(0, 0, 0, 0.03);
-	}
-
-	.md-btn svg {
-		width: 18px;
-		height: 18px;
-		stroke: currentColor;
-		stroke-width: 1.5;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		fill: none;
-	}
-
-	.md-divider {
-		width: 2px;
-		height: 16px;
-		background: var(--text-color);
-		opacity: 0.15;
-		margin: 0 4px;
-	}
-
-	.toolbar-dropdown-wrapper {
-		position: relative;
-		display: inline-block;
-	}
-
-	.dropdown-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 99;
-	}
-
-	.toolbar-dropdown {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		margin-top: 4px;
-		background: var(--bg-color, #ffffff);
-		border: 1px solid var(--text-color);
-		z-index: 100;
-		width: 140px;
-		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
-		display: flex;
-		flex-direction: column;
-	}
-
-	.dropdown-item {
-		background: transparent;
-		border: none;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		padding: 8px 12px;
-		text-align: left;
-		font-family: inherit;
-		font-size: 0.85rem;
-		color: var(--text-color);
-		cursor: pointer;
-		font-weight: 600;
-		transition: all 0.2s ease;
-	}
-
-	.dropdown-item:last-child {
-		border-bottom: none;
-	}
-
-	.dropdown-item:hover {
-		background: var(--text-color);
-		color: var(--bg-color, #ffffff);
-	}
 </style>
diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte
index bf465d5..f60ce60 100644
--- a/src/routes/admin/posts/new/+page.svelte
+++ b/src/routes/admin/posts/new/+page.svelte
@@ -6,6 +6,7 @@
 	import type { PageData, ActionData } from './$types';
 	import { deserialize } from '$app/forms';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+	import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte';
 	import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
 	import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
 	import { parseHugoMarkdown } from '$lib/hugoParser';
@@ -122,60 +123,6 @@
 		}
 	}
 
-	// Markdown 工具栏功能
-	function insertAtCursor(before: string, after: string = '', defaultText: string = '') {
-		const textarea = document.getElementById('content') as HTMLTextAreaElement;
-		if (!textarea) return;
-
-		const start = textarea.selectionStart;
-		const end = textarea.selectionEnd;
-		const selectedText = textarea.value.substring(start, end);
-
-		const insertion = selectedText ? before + selectedText + after : before + defaultText + after;
-
-		content = textarea.value.substring(0, start) + insertion + textarea.value.substring(end);
-
-		// 恢复焦点并选中文字
-		setTimeout(() => {
-			textarea.focus();
-			if (selectedText) {
-				textarea.setSelectionRange(start, start + insertion.length);
-			} else {
-				textarea.setSelectionRange(
-					start + before.length,
-					start + before.length + defaultText.length
-				);
-			}
-		}, 0);
-	}
-
-	function insertMore() {
-		insertAtCursor('\n<!--more-->\n', '', '');
-	}
-
-	let showAdmonitionMenu = $state(false);
-	const admonitionTypes = [
-		{ type: 'note', title: '注意', label: '注意 (Note)' },
-		{ type: 'abstract', title: '摘要', label: '摘要 (Abstract)' },
-		{ type: 'info', title: '信息', label: '信息 (Info)' },
-		{ type: 'tip', title: '技巧', label: '技巧 (Tip)' },
-		{ type: 'success', title: '成功', label: '成功 (Success)' },
-		{ type: 'question', title: '问题', label: '问题 (Question)' },
-		{ type: 'warning', title: '警告', label: '警告 (Warning)' },
-		{ type: 'failure', title: '失败', label: '失败 (Failure)' },
-		{ type: 'danger', title: '危险', label: '危险 (Danger)' },
-		{ type: 'bug', title: 'Bug', label: 'Bug' },
-		{ type: 'example', title: '示例', label: '示例 (Example)' },
-		{ type: 'quote', title: '引用', label: '引用 (Quote)' }
-	];
-
-	function insertAdmonition(type: string, title: string) {
-		const openTag = `{{< admonition ${type} "${title}" >}}\n`;
-		const closeTag = `\n{{< /admonition >}}`;
-		insertAtCursor('\n' + openTag, closeTag, '在这里输入提示内容...');
-		showAdmonitionMenu = false;
-	}
-
 	async function handleImportMarkdown(e: Event) {
 		const target = e.target as HTMLInputElement;
 		const file = target.files?.[0];
@@ -323,151 +270,6 @@
 					<label for="content">正文 *</label>
 
 					<div class="editor-header-right">
-						{#if mode === 'edit'}
-							<div class="md-toolbar">
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('**', '**', '粗体')}
-									title="加粗"
-									><svg viewBox="0 0 24 24"
-										><path d="M6 4h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path
-											d="M6 12h10a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"
-										></path></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('*', '*', '斜体')}
-									title="斜体"
-									><svg viewBox="0 0 24 24"
-										><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"
-										></line><line x1="15" y1="4" x2="9" y2="20"></line></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('~~', '~~', '删除线')}
-									title="删除线"
-									><svg viewBox="0 0 24 24"
-										><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"
-										></path><line x1="4" y1="12" x2="20" y2="12"></line></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('### ', '', '标题')}
-									title="标题"
-									><svg viewBox="0 0 24 24"><path d="M4 12h16M4 18V6M20 18V6"></path></svg></button
-								>
-								<div class="md-divider"></div>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('- ', '', '列表项')}
-									title="无序列表"
-									><svg viewBox="0 0 24 24"
-										><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"
-										></line><line x1="8" y1="18" x2="21" y2="18"></line><line
-											x1="3"
-											y1="6"
-											x2="3.01"
-											y2="6"
-										></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line
-											x1="3"
-											y1="18"
-											x2="3.01"
-											y2="18"
-										></line></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('[', '](https://)', '链接文字')}
-									title="链接"
-									><svg viewBox="0 0 24 24"
-										><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-										></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-										></path></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('![', '](https://)', '图片描述')}
-									title="图片"
-									><svg viewBox="0 0 24 24"
-										><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
-											points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
-											style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
-										></polygon></svg
-									></button
-								>
-								<button
-									type="button"
-									class="md-btn"
-									onclick={() => insertAtCursor('```\n', '\n```', 'code')}
-									title="代码块"
-									><svg viewBox="0 0 24 24"
-										><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"
-										></polyline></svg
-									></button
-								>
-								<div class="md-divider"></div>
-								<div class="toolbar-dropdown-wrapper">
-									{#if showAdmonitionMenu}
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
-										<!-- svelte-ignore a11y_interactive_supports_focus -->
-										<div
-											class="dropdown-overlay"
-											onclick={() => (showAdmonitionMenu = false)}
-											role="button"
-										></div>
-									{/if}
-									<button
-										type="button"
-										class="md-btn"
-										onclick={() => (showAdmonitionMenu = !showAdmonitionMenu)}
-										title="提示框 (Admonition)"
-										><svg viewBox="0 0 24 24"
-											><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"
-											></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg
-										></button
-									>
-									{#if showAdmonitionMenu}
-										<div class="toolbar-dropdown">
-											{#each admonitionTypes as item (item.type)}
-												<button
-													type="button"
-													class="dropdown-item"
-													onclick={() => insertAdmonition(item.type, item.title)}
-												>
-													{item.label}
-												</button>
-											{/each}
-										</div>
-									{/if}
-								</div>
-								<button type="button" class="md-btn" onclick={insertMore} title="插入摘要分割线"
-									><svg viewBox="0 0 24 24"
-										><polyline points="5 5 5 9 19 9 19 5"></polyline><polyline
-											points="5 19 5 15 19 15 19 19"
-										></polyline><line
-											x1="4"
-											y1="12"
-											x2="20"
-											y2="12"
-											stroke-dasharray="3 3"
-											stroke-linecap="butt"
-										></line></svg
-									></button
-								>
-							</div>
-						{/if}
 						<div class="editor-tabs">
 							<button
 								type="button"
@@ -485,14 +287,7 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<textarea
-							id="content"
-							name="content"
-							bind:value={content}
-							rows="16"
-							style="min-height: 400px;"
-							placeholder="支持 Markdown 格式..."
-							required></textarea>
+						<MarkdownEditor bind:value={content} />
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -754,39 +549,6 @@
 		text-transform: uppercase;
 	}
 
-	.form-group textarea {
-		width: 100%;
-		padding: 12px 14px;
-		border: 1px solid rgba(0, 0, 0, 0.12);
-		border-radius: 0;
-		background: rgba(0, 0, 0, 0.015);
-		font-family: inherit;
-		font-size: 1.05rem;
-		color: var(--text-color);
-		box-sizing: border-box;
-		transition:
-			border-color 0.3s ease,
-			box-shadow 0.3s ease;
-	}
-
-	.form-group textarea {
-		resize: vertical;
-		line-height: 1.8;
-		min-height: 120px;
-	}
-
-	.form-group textarea:focus {
-		outline: none;
-		border-color: var(--accent-color, #419b38);
-		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
-	}
-
-	.form-group textarea:focus {
-		outline: none;
-		border-color: var(--accent-color, #419b38);
-		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
-	}
-
 	.sidebar-box {
 		background: transparent;
 		border: none;
@@ -885,101 +647,4 @@
 		align-items: center;
 		gap: 15px;
 	}
-
-	.md-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.md-btn {
-		background: transparent;
-		border: none;
-		padding: 4px;
-		cursor: pointer;
-		color: var(--text-color);
-		opacity: 0.65;
-		transition: all 0.2s ease;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: 2px;
-	}
-
-	.md-btn:hover {
-		opacity: 1;
-		color: var(--accent-color, #419b38);
-		background-color: rgba(0, 0, 0, 0.03);
-	}
-
-	.md-btn svg {
-		width: 18px;
-		height: 18px;
-		stroke: currentColor;
-		stroke-width: 1.5;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		fill: none;
-	}
-
-	.md-divider {
-		width: 2px;
-		height: 16px;
-		background: var(--text-color);
-		opacity: 0.15;
-		margin: 0 4px;
-	}
-
-	.toolbar-dropdown-wrapper {
-		position: relative;
-		display: inline-block;
-	}
-
-	.dropdown-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 99;
-	}
-
-	.toolbar-dropdown {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		margin-top: 4px;
-		background: var(--bg-color, #ffffff);
-		border: 1px solid var(--text-color);
-		z-index: 100;
-		width: 140px;
-		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
-		display: flex;
-		flex-direction: column;
-	}
-
-	.dropdown-item {
-		background: transparent;
-		border: none;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		padding: 8px 12px;
-		text-align: left;
-		font-family: inherit;
-		font-size: 0.85rem;
-		color: var(--text-color);
-		cursor: pointer;
-		font-weight: 600;
-		transition: all 0.2s ease;
-	}
-
-	.dropdown-item:last-child {
-		border-bottom: none;
-	}
-
-	.dropdown-item:hover {
-		background: var(--text-color);
-		color: var(--bg-color, #ffffff);
-	}
 </style>