# 富文本與Markdown：如何切換使用 在現代的筆記應用程式中，使用者通常需要在兩種不同的編輯方式之間做出選擇：富文本編輯器的視覺性直觀性，以及Markdown的易用性。大多數應用程式都會強制使用其中一種方式。 **NoteRich**打破了這種二元性。透過採用複雜的雙模式架構，NoteRich能夠讓你無縫切換同一內容的富文本和Markdown表示形式，從而獲得兩者之優點，且不會造成任何損失。 --- ## 了解兩種模式 在了解如何切換模式之前，必須先了解每種模式所提供的功能以及何時使用它們。 ### 富文本模式：最完美的視覺編輯 富文本模式提供了一種**WYSIWYG（所见即所得）**的編輯體驗。當你處於富文本模式時： - **視覺格式化**：粗體、斜體、標題和列表會以實際顯示的樣子呈現 - **工具列存取**：完整的格式化工具列可讓你輕鬆使用所有樣式選項 - **媒體嵌入**：圖片、表格、方程式和互動元素會內嵌顯示 - **拖放操作**：通過拖動塊狀內容來輕鬆重新組織 - **上下文菜單**：右鍵操作和浮動格式化工具列可提升生產力 富文本模式適用於： - 喜歡打字時有視覺反饋的使用者 - 需要複雜佈局的文件（表格、多列佈局） - 需要視覺清晰度的協作編輯過程 - 需要快速格式化而無需記住語法 ### Markdown模式：簡潔易用 Markdown模式將你的內容以簡單的標點符號表示。當在Markdown模式下工作時： - **純文本的可移植性**：你的筆記以通用可讀格式儲存 - **以鍵盤為主的工作流程**：使用簡單的鍵盤快捷鍵來格式化文本（`**bold**`、`*italic*`、`# Heading`） - **適合版本控制**：在Git和其他版本控制系統中能生成清晰的差異表 - **快速輸入**：不需要使用鼠標，只需保持手放在鍵盤上 - **通用兼容性**：可以將`.md`文件導出並分享到任何地方 Markdown模式適用於： - 技術文檔和大量代碼的筆記 - 喜歡無干擾的純文本編輯的作家 - 需要最少格式化負擔的長文內容創作 - 希望具有最大可移植性和未來適用性的使用者 --- ## 雙模式架構 NoteRich並不僅提供兩種不同的編輯體驗——它創造了一種**統一內容模型**，可以立即以任一格式表示。這是通過一種複雜的轉換引擎實現的，該引擎能夠實時將內部文件結構和Markdown語法進行轉換。 ```mermaid graph TD A[用戶輸入] --> B{內部文件模型} B --> C[富文本表示] B --> D[Markdown表示] C --> E[視覺工具列操作] C --> F[拖放操作] C --> G[上下文菜單格式化] D --> H[Markdown快捷鍵檢測] D --> I[語法模式識別] D --> J[純文本導入/導出] B --> K[統一存儲層] K --> L[IndexedDB持久化] K --> M[P2P同步載荷] style A fill:#fafafa,stroke:#eaeaea,color:#333 style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea,color:#333 style D fill:#fafafa,stroke:#eaeaea,color:#333 style K fill:#000,stroke:#000,color:#fff ``` 這種架構意味著**你的內容永遠不會被锁定在某一種格式中**。無論你是開始用Markdown輸入，還是通過富文本工具列進行格式化，底層文件模型都保持一致，從而能夠立即切換，且不會造成數據損失或格式損壞。 --- ## 如何切換模式 ### 方法1：設定選擇模式 NoteRich提供了一個全局設定，決定所有筆記的默認編輯模式： 1. **打開設定**：點擊編輯器右上角的辦事式圖標（⚙️） 2. **找到“富文本”切換**：在設定面板中找到標有“富文本”的切換項 3. **切換模式**： - **啟用（✓）**：編輯器以富文本模式開啟，並附帶完整的工具列 - **禁用（○）**：編輯器以純文本/Markdown模式開啟 ```mermaid sequenceDiagram participant 用戶 participant 設定面板 participant 編輯器 participant 文件模型 用戶->>設定面板：點擊設定圖標 用戶->>設定面板：切換“富文本”切換 設定面板->>編輯器：更新isRichText標記 編輯器->>文件模型：以新模式重新渲染 編輯器-->>用戶：顯示更新後的界面 ``` **重要**：更改此設定需要重新載入頁面才能生效。這樣可以確保所有插件和工具列元件都適當地初始化為選擇的模式。 ### 方法2：每筆筆記的Markdown導入/導出 即使主要使用富文本模式，你也可以將個別筆記導入和導出為Markdown格式： #### 將筆記導出為Markdown 1. 打開你想導出的筆記 2. 點擊**操作菜單**（通常由三個點`⋮`或下載圖標表示） 3. 選擇**“導出為Markdown”** 4. 筆記會被轉換為Markdown語法並以`.md`文件形式下載 導出過程會智能處理： - **標題**：轉換為 `#`、`##`、`###`語法 - **列表**：標點和編號列表會保留正確的縮排 - **代碼區塊**：語言註釋會被保留（例如，```javascript``` - **表格**：以Markdown表格形式格式化，並帶有對齊標記 - **鏈接和圖片**：URL會保留替代文本 #### 導入Markdown內容 1. 創建新的筆記或開啟現有草稿 2. 從操作菜單訪問**導入**功能 3. 選擇一個`.md`文件或直接貼入Markdown文本 4. NoteRich會自動識別Markdown語法並轉換為內部文件模型 導入引擎使用模式識別來識別Markdown元素： ```markdown 模式 → 富文本元素 -------------------------------------------------- # H1標題 → H1標題節點 ## H2標題 → H2標題節點 **粗體文本** → 粗體文本節點 *斜體文本* → 斜體文本節點 - 列表項 → 項目列表項 1. 編號項目 → 有序列表項 > 引文 → 引文節點 ```code``` → 代碼區塊節點 [鏈接](url) → 鏈接節點 ![圖片](url) → 圖片節點 ``` ### 方法3：富文本模式下的Markdown快捷鍵 NoteRich最強大的功能之一就是即使在富文本模式下也能使用**Markdown快捷鍵**。這種混合方式讓你能自然打字，同時利用Markdown的快速性。 當富文本模式啟用時，輸入Markdown語法會自動轉換： | 輸入這樣的內容 | 會變成這樣的內容 | 觸發條件 | |--------------------|---------------------------|------------------------------| | `# ` | H1標題 | 哈希後有空格 | | `## ` | H2標題 | 雙哈希後有空格 | | `### ` | H3標題 | 三個哈希後有空格 | | `- ` 或 `* ` | 項目列表 | 虛線/星號後有空格 | | `1. ` | 編號列表 | 數字後有空格加點 | | `[] ` | 選擇框列表 | 括號後有空格 | | `> ` | 引文 | 大於號後有空格 | | ```` ``` ```` | 代碼區塊 | 三個反跳字元加Enter | | `**文本**` | **粗體文本** | 最後有星號 | | `*文本*` | *斜體文本* | 最後有星號 | | `~~文本~~` | 〜〜橫線遮罩〜〜 | 最後有橫線 | | `` `文本`` `` | `內嵌代碼` | 最後有反跳字元 | | `[文本](url)` | [超鏈接](url) | 完整的鏈接語法 | | `---` 或 `***` | 水平條 | 三個虛線/星號 | ```mermaid graph LR A[用戶輸入Markdown] --> B[快捷鍵檢測器] B -->|模式匹配成功| C[轉換為節點] B -->|不匹配| D[保持為純文本] C --> E[更新編輯器狀態] E --> F[渲染富文本] style A fill:#fafafa,stroke:#eaeaea,color:#333 style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea,color:#333 style F fill:#fafafa,stroke:#eaeaea,color:#333 ``` 這意味著你可以享受**Markdown輸入的快速性**和**富文本渲染的視覺優勢**——而無需手動切換模式。 --- ## 進階功能：多行元素 NoteRich的Markdown引擎能夠處理多行元素，尤其是代碼區塊和引文區塊。 ### 代碼區塊檢測 編輯器能夠智能區分單行和多行代碼區塊： ```markdown 單行：```python print("Hello")``` → 內嵌代碼框 多行： ```python def hello(): print("Hello") ``` → 完整的代碼區塊節點 ``` 在導入或輸入代碼區塊時，NoteRich： 1. 檢測開頭的框（``` + 可选的語言標識） 2. 捕獲所有內容直到結束的框 3. 保持縮排和空白與輸入時一樣 4. 根據語言標識適當地高亮顯示 ### 嵌套列表處理 具有多級縮排的列表會被正確重建： ```markdown - 第一級項目 - 第二級項目（4個空格縮排） - 第三級項目（8個空格縮排） - 回到第一級 ``` 轉換引擎會計算縮排級別並在文件模型中創建適當的嵌套列表結構。 --- ## 性能考慮 富文本和Markdown之間的雙向轉換已經優化以適應高性能需求，即使是長達50,000字符的文件也是如此。 ### 轉換測試 ```echarts { "xAxis": { "type": "category", "data": ["1k chars", "5k chars", "10k chars", "25k chars", "50k chars"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "name": "時間 (毫秒)", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "name": "Markdown → 富文本", "data": [8, 15, 22, 35, 48], "type": "line", "smooth": true, "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" }, "symbol": "circle", "symbolSize": 8 }, { "name": "富文本 → Markdown", "data": [5, 10, 16, 28, 38], "type": "line", "smooth": true, "lineStyle": { "color": "#666", "width": 2, "type": "dashed" }, "itemStyle": { "color": "#666" }, "symbol": "circle", "symbolSize": 8 } ], "grid": { "left": "10%", "right": "5%", "bottom": "10%" }, "legend": { "data": ["Markdown → 富文本", "富文本 → Markdown"], "bottom": 0, "textStyle": { "color": "#666" } } } ``` 即使是超過50,000字符的文件，轉換也能在50毫秒內完成——在正常操作過程中對用戶來說是無法察覺的。 ### 增量更新 NoteRich使用**增量轉換**而不是在每次按鍵時重新解析整個文件： - **Markdown快捷鍵**：只有當前行符合模式時才進行檢測 - **工具列操作**：直接操作節點，不需要完全重新序列化 - **批量導入**：大規模的Markdown文件會分批處理，以避免佔用用戶界面 --- ## 模式選擇的最佳實踐 ### 何時使用富文本模式 當以下情況時，選擇富文本模式作為默認模式： 1. **視覺佈局重要**：創建包含表格、圖片和複雜格式的文件 2. **協作工作**：與喜歡視覺編輯器的團隊成員共享筆記 3. **需要頻繁格式調整**：使用工具列進行快速樣式調整 4. **非技術讀者**：為不熟悉Markdown語法的讀者準備內容 5. **便利性需求**：依靠能更好地支持結構化富文本的屏幕閱讀器 ### 何時使用Markdown模式 當以下情況時，選擇Markdown模式（或純文本模式）： 1. **大量代碼的文檔**：撰寫包含大量代碼示例的技術指南 2. **版本控制集成**：追蹤Git倉庫中的變更 3. **無干擾的寫作**：偏好無工具列的簡潔界面 4. **跨平台可移植性**：頻繁將文件導出到其他兼容Markdown的工具 5. **以鍵盤為主的工作流程**：希望始終保持手在鍵盤上 ### 混合方式：高級用戶策略 許多經驗豐富的NoteRich用戶採用**混合工作流程**： 1. **設為富文本模式**：享受完整的工具列和視覺反饋 2. **使用Markdown快捷鍵**：使用`# `、`- `、`**文本**`進行快速格式化 3. **導出為Markdown**：在需要時分享可移植版本 4. **導入Markdown文件**：無縫引入外部內容 這種方式能夠最大化**輸入速度**和**視覺清晰性**，同時利用兩種模式的優勢。 --- ## 解決常見問題 ### 問題：Markdown快捷鍵無法觸發 **症狀**：輸入`# `或`- `時無法轉換為標題或列表 **解決方案**： 1. 確認富文本模式已啟用（檢查設定面板） 2. 確保Markdown快捷鍵插件已啟用 3. 檢查是否有衝突的瀏覽器插件 4. 嘗試在Markdown符號後添加空格 ### 問題：導出時格式丢失 **症狀**：導出的Markdown文件缺少某些格式 **解決方案**： 1. 一些高級功能（自定義顏色、嵌入小部件）可能沒有Markdown對應功能 2. 檢查導出的文件是否有不受支持的元素 3. 對於需要複雜樣式的文件，使用HTML導出 ### 問題：導入時產生意外結構 **症狀**：導入的Markdown不符合預期的佈局 **解決方案**： 1. 確認Markdown語法符合CommonMark規範 2. 檢查列表的縮排是否不一致 3. 確保代碼區塊框能正確關閉 4. 使用較小的段落進行測試，以找出有問題的語法 ### 問題：長文件時性能緩慢 **症狀**：在非常長的筆記中輸入或切換模式時有延遲 **解決方案**： 1. 在設定中啟用增量渲染 2. 將極長的文檔分割為連接的子筆記 3. 禁用不必要的插件以適應純文本模式 4. 初始起草時使用Markdown模式，最終格式化時使用富文本模式 --- ## 雙模式編輯的未來 NoteRich的雙模式架構代表了我們思考文件編輯方式的根本變化。NoteRich不再將富文本和Markdown視為競爭對手，而是將它們統一為**單一、靈活內容模型**，以適應你的工作流程。 未來的增強功能包括： - **每筆筆記模式設定**：覆蓋個別筆記的全局默认值 - **實時協作**：立即看到合作者使用的Markdown快捷鍵顯示 - **AI輔助轉換**：智能建議以優化格式選擇 - **自定義轉換器**：定義你自己的Markdown到富文本的映射 --- ## 結論 在富文本和Markdown之間做出選擇不應該是或非的選擇。借助NoteRich的創新雙模式架構，你可以： ✅ 在需要時享受**視覺豐富性** ✅ 在希望時享受**純文本簡潔性** ✅ 無縫切換兩種模式 ✅ 在富文本模式中使用Markdown快捷鍵 ✅ 與外部Markdown工具完全兼容 無論你是編寫代碼的開發者、撰寫長文內容的作家，還是管理複雜項目的知識工作者，NoteRich都能適應你的偏好工作流程——而不需要你做出妥協。 從最自然感覺的模式開始，嘗試使用Markdown快捷鍵，找到適合你個人需求的完美平衡。按照你的方式來記錄筆記。 --- ## <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">富文本</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Markdown</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">雙模式</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">WYSIWYG</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">快捷鍵</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">生產力</span> </div>