# Fumadocs (Framework Mode, Waku): 視覺化編輯器
URL: /zh-TW/docs/waku/editor
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/editor.zh-TW.mdx

以視覺化方式撰寫 Markdown 與 MDX，並以您的檔案作為唯一可信來源。

## 簡介 [#introduction]

[Fumadocs Editor](https://editor.fumadocs.dev) 是 Fumadocs MDX 的視覺化編輯器。

### 從 Studio 開始 [#start-with-studio]

Studio 會在瀏覽器中開啟您的本機文件，無須在應用程式中加入編輯器。
請在您的 Fumadocs 專案中執行：

```bash
npx @fumadocs-editor/studio
```

Studio 需要 **Node.js 24 或更新版本**。它會尋找 `content/docs`，若找不到，則改為在上層目錄中尋找。
若要指定其他內容資料夾：

```bash
npx @fumadocs-editor/studio --root ./docs
```

編輯內容會自動儲存至磁碟，您在程式碼編輯器中所做的變更也會合併至目前開啟的文件。
檔案清單會依照 `meta.json` 中的順序排列。

請在 Git 中檢閱變更，再透過網站平時使用的部署流程發布。

> Studio 只能編輯現有檔案。若要建立、重新命名或刪除檔案，請改用程式碼編輯器或檔案管理員。

### 作為函式庫使用 [#use-as-a-library]

您可以使用 `@fumadocs-editor/ui`，在自己的應用程式中打造編輯介面。詳細說明請參閱文件：

<Cards>
<Card title="React 快速入門" href="https://editor.fumadocs.dev">
安裝編輯器、匯入樣式，並算繪您的第一份可編輯文件。
</Card>

<Card title="Studio 設定" href="https://editor.fumadocs.dev/studio">
設定內容資料夾、自訂元件與樣式。
</Card>

<Card title="檔案同步" href="https://editor.fumadocs.dev/sync">
透過開發伺服器，將內嵌編輯器與檔案連接。
</Card>
</Cards>

### 使用元件撰寫 [#write-with-components]

內建編輯支援涵蓋 Fumadocs 元件，例如 Callout、Cards、Steps、Accordions 和 Files。

自訂元件可透過[元件規格](https://editor.fumadocs.dev/components)定義專屬的可編輯區域。

<Callout title="沿用您現有的內容設定">
編輯器直接處理您的 Markdown 與 MDX 檔案。您可以繼續使用 [Fumadocs MDX](/docs/mdx) 載入
這些檔案，並透過您的 React 框架算繪發布後的網站。
</Callout>