# vocus 編輯器使用秘笈

編輯器是 vocus 創作者最常接觸的功能之一，也是創作內容的必備工具，透過這篇文章，格編將會帶你認識 vocus 編輯器的所有功能，一起來看看吧！



此篇教學將介紹文章、貼文編輯器使用方式。

## 文章編輯器使用方式

vocus 文章編輯器主要包含以下使用範圍：

* **上方功能列**：包含了創作內容時，會使用到的大部分功能，例如：標題大小、文字對齊、插入多媒體、復原……等等
* **圖片功能列**：改變圖片樣式的功能
* **反白功能列**：改變文字樣式的功能，如粗體、斜體、建立超連結等**反白功能列**：改變文字樣式的功能，如粗體、斜體、建立超連結等
* **拖曳按鈕**
* **即時儲存功能**

接下來，就讓格編一一為你介紹！

## 一、**上方功能列**

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FDVT0iSnhOyiHQ85xNJJg%2F%E7%B7%A8%E8%BC%AF%E5%99%A8%E9%81%B8%E5%96%AE.png?alt=media#x26;token=fd5eceef-41d4-477f-8461-8580bd89c19d" alt=""><figcaption></figcaption></figure>

上方功能列一共包含了 12 種豐富的功能，可供創作者依照自身需求、內容類型而靈活運用。各個功能由左至右詳述如下：

### **目錄**

為內容設定標題後，編輯器將可顯示目錄，若點擊目錄當中的標題，可以直接跳轉至對應的內容段落。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FF3JXlGoCvnNWcKQttYNC%2F%E7%9B%AE%E9%8C%84.gif?alt=media#x26;token=3cac1246-bc78-4afe-8fc6-770961e6d3ef" alt=""><figcaption></figcaption></figure>

### **插入多媒體**

按下 Enter 鍵開啟新段落後，插入多媒體的按鈕即會啟用。點擊後，將另外展開多媒體功能列，並支援以下功能：

* **上傳圖片**：從自己的裝置中上傳圖片，可點選「選取檔案」上傳，或是直接將圖片拖曳至上傳區，上傳後，各個圖片將獨立顯示。

{% hint style="info" %}
建議上傳圖片格式：.png 檔案
{% endhint %}

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FXhC9hDqpyrCoW9dqkkJo%2F%E4%B8%8A%E5%82%B3%E5%9C%96%E7%89%87.gif?alt=media#x26;token=6ce5d50d-57b4-4136-9acc-438ebe200765" alt=""><figcaption></figcaption></figure>



* **插入多圖輪播**：從自己的裝置中上傳圖片，並在一個區塊中多個可點選「選取檔案」上傳，或是直接將圖片拖曳至上傳區，上傳後，圖片即可以輪播圖卡的方式呈現，並可左右滑動。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FtuLyD4AZMtYJqQq6cjna%2F%E8%BC%AA%E6%92%AD.gif?alt=media#x26;token=84b20c46-ed04-494b-bded-1ea6fbb17a7f" alt=""><figcaption></figcaption></figure>



* **拖曳上傳：**&#x4F60;也可以直接將電腦中的多張檔案，拖曳到編輯器中，即可完成上傳。圖片最多為 10 張，格式僅接受 jpg, png, gif。

<figure><img src="https://1986168414-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk5or5g6bx211MPNdvl6u%2Fuploads%2FoFkUneIprftoBdgocAtH%2F%E6%8B%96%E6%9B%B3%E4%B8%8A%E5%82%B3.gif?alt=media&#x26;token=7e9ee06e-a216-488a-8783-3263698f777f" alt=""><figcaption></figcaption></figure>



* **複製本機圖片後貼上到編輯器**：可以從本機複製圖片後，貼上到編輯器上傳。

<figure><img src="https://1986168414-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk5or5g6bx211MPNdvl6u%2Fuploads%2Fwbg6BqU0ayy2RjdKtdMH%2F%E6%9C%AC%E6%A9%9F%E8%A4%87%E8%A3%BD%E5%9C%96%E7%89%87%E5%8A%9F%E8%83%BD.gif?alt=media&#x26;token=b1dc6c07-37be-46fa-b2fc-cc0379ca351e" alt=""><figcaption></figcaption></figure>

> 💡 貼心提醒：此功能也可以使用鍵盤的快捷鍵來進行唷！\
> PC：按下 Ctrl + C 鍵即可複製，按下 Ctrl + V 鍵即可貼上 \
> Mac：按下⌘ + C 鍵即可複製，按下⌘ + V 鍵即可貼上



* **插入圖庫圖片**：如果你想要在創作中附上精美的配圖，可以使用此功能，從圖庫插入精美的圖片素材，或是與你的內容相符的 GIF 圖片，只要輸入對應的關鍵字，即可搜尋到相關的圖片。

> （實際服務以編輯器內顯示為主）

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FEPTrVJfQ2NWXJhhUXIQP%2F%E5%9C%96%E5%BA%AB.gif?alt=media#x26;token=a0deb344-3aae-4238-9327-569bf4779a82" alt=""><figcaption></figcaption></figure>



* **嵌入網站**：如果你想把某個網址內容直接嵌入在文章中，可以使用這個功能。不只是 vocus 站上的內容，如果透過此功能嵌入 YouTube、Spotify、SoundCloud 等影音平台的內容，即可直接在內容的閱讀頁點選播放。因為各平台的網址有限制的 URL 格式，如果網站本身自己有設定的話，建議使用各平台提供的嵌入功能內的連結，才能正確使用。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2Fb8sr217JIXml7LTrl3p7%2F%E5%B5%8C%E5%85%A5%E7%B6%B2%E7%AB%99.gif?alt=media#x26;token=e07495e4-83cd-44df-afa8-0e63325eaa86" alt=""><figcaption></figcaption></figure>

目前支援嵌入的服務如下（實際以功能內顯示的為主）：

<figure><img src="https://1986168414-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk5or5g6bx211MPNdvl6u%2Fuploads%2FLNmBrQMKyTvZU799Qfc4%2FUntitled%20(8).png?alt=media&#x26;token=04076111-3df0-4c0f-b385-24db808fadbc" alt=""><figcaption></figcaption></figure>

### **插入分隔線**

在內容適時地插入分隔線，可以讓段落更加分明。



### **標題**

設定清楚的大小標（H2、H3），不只可以讓更清晰地傳達內容脈絡，還可以提升文章 SEO 價值。連續點擊即可切換大小標題，而系統也會自動擷取標題作為此篇內容的「章節目錄」。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FeWBWwBeXlHf1W9O2oApM%2F%E6%A8%99%E9%A1%8C.gif?alt=media#x26;token=54686215-fe73-4ca9-ab42-403dc2d5e65a" alt=""><figcaption></figcaption></figure>



### **引用**

提供兩種引言格式，連續點擊即可自由切換。善用引言來凸顯創作內容裡面的重點語句，也能讓讀者更瞭解內容亮點。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FxXh9c1ckaFuCTYQqh9i2%2F%E5%BC%95%E7%94%A8.gif?alt=media#x26;token=5470df6e-18c6-4e56-807c-91f60f4099eb" alt=""><figcaption></figcaption></figure>



### **程式碼區塊**

工程師與開發者的福音！不僅開放多種技術語言供你自由選擇，更有複製程式碼，以及 Prettier 程式碼自動排版功能，以及多采的語法突顯，讓程式碼看起來更加漂亮美觀。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FILmcY399sk1F6KQogCmA%2Fcode%20block.gif?alt=media#x26;token=e1c78e35-06eb-4d0e-8eb8-e080c0ebfeef" alt=""><figcaption></figcaption></figure>



### **變更對齊**

可依照創作情境，變更文字擺放位置，預設置左，連續點擊即可調整為置中、置右，或是恢復置左。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FBrQS7yrOOTQ9yXzMRLOf%2F%E8%AE%8A%E6%9B%B4%E5%B0%8D%E9%BD%8A.gif?alt=media#x26;token=e58075ec-3a11-476d-9db1-884b639dbd3e" alt=""><figcaption></figcaption></figure>



### **圓點項目符號、數字項目符號**

圓點項目符號可用於「條列式」說明，羅列內容；而數字項目符號可用於「步驟」說明，更好地強調內容的順序。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2F269F3xDGxpKJ7djVJHjP%2Fimage.png?alt=media#x26;token=d0df0ee0-aabc-4b6e-8f32-f8e8ce39bd12" alt=""><figcaption></figcaption></figure>



### **提及**

可提及 vocus 的會員或文章，被提及的對象將即時收到小鈴鐺通知。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FfxvjtEG1uf4ZMsVE7IG5%2F%E6%8F%90%E5%8F%8A.gif?alt=media#x26;token=d1c877e9-efec-483e-b07b-cd04281ca63d" alt=""><figcaption></figcaption></figure>

除了點選此按鈕之外，直接在編輯器輸入 @ 符號，也可以直接使用提及功能。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FCZzXvBVP8k9TPcljp1LB%2F%E6%8F%90%E5%8F%8A%E7%9B%B4%E6%8E%A5%E8%BC%B8%E5%85%A5.gif?alt=media#x26;token=5bff1659-17fa-4bbd-bff8-795910028be5" alt=""><figcaption></figcaption></figure>



### **復原**

復原上一步輸入的內容。



### **取消復原**

取消已進行的復原。



### **夜間模式**

長時間創作時，可以讓眼睛更舒適，減少螢幕光害。點擊一次將進入夜間模式，點擊第二次，將恢復開燈模式。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FDJvseKc7jqVUy7IM0dW8%2F%E5%A4%9C%E9%96%93%E6%A8%A1%E5%BC%8F.gif?alt=media#x26;token=aa792b75-b0d7-4bf5-8039-3127aac71318" alt=""><figcaption></figcaption></figure>



## 二、**圖片功能列**

匯入一般圖片後，點選圖片即可再做其他設定。其中，圖片置中、滿版、置左的功能僅供一般圖片使用，在多圖輪播格式尚不支援。

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2Ft5k2KH159CQagqsbfAyp%2F%E5%9C%96%E7%89%87%E5%B7%A5%E5%85%B7%E5%88%972.png?alt=media#x26;token=86d55a27-dfba-4d18-8c1a-adfd277c2b00" alt=""><figcaption></figcaption></figure>



## 三、**反白功能列**

如果你想對某些文字進行更細微的編輯，只要選取（也就是反白）目標文字，就能看到反白功能列出現，裡頭有以下功能：

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FYffQrmig0CFA6NZ5uwpk%2F%E5%8F%8D%E7%99%BD%E5%B7%A5%E5%85%B7%E5%88%97.png?alt=media#x26;token=97066cda-020a-4f6f-8e8f-bd0b5e0411c3" alt=""><figcaption></figcaption></figure>

* **粗體、斜體、刪除線、底線**：可適時地強調欲凸顯的內容重點。
* **程式碼功能**：清楚區別程式碼與一般文字，提升易讀性。
* **上標／下標**：可做為註腳、數學公式、化學方程式使用。
* **超連結**：當你需要在文章內放入連結時，建議選取文字、建立超連結（成功建立後，該段文字會變成藍色）；或選擇使用「插入功能列」裡頭的嵌入網站，文章的排版看起來會較清爽。

> 💡 貼心提醒：如果要使用「超連結」功能，**可以選取文字後直接貼上網址**就可帶入！不必點選超連結按鈕！



## 四、拖曳按鈕

如果使用桌機進行編輯，當游標移動到對應區塊時，將自動顯示「拖曳按鈕」。按住此按鈕並移動游標後，即可移動內容區塊，在想要調換內容順序時，更加方便。所有編輯器內的區塊（例如：圖片、文字、程式碼、嵌入網址…⁢…等等）都可以拖曳喔！

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FJlUTBb8Cd6amZNyMEjMi%2F%E6%8B%96%E6%9B%B3.gif?alt=media#x26;token=c6de80b9-503b-4ae0-8000-49242c27b6b5" alt=""><figcaption></figcaption></figure>



## 五、**即時儲存功能**

vocus 的編輯器提供即時儲存的功能，每當編輯器的內容有所更動，編輯器便會每 5 秒自動儲存一次，並在儲存完成後，於編輯器的左上方顯示綠燈與「已自動儲存」的字樣。**隨手創作、自動儲存，讓創作變成一件更加舒服的事。**

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FF35Z4jjWCnoWyxXfUCPw%2Fuploads%2FrMSpp9SZUqTVUDkdqagN%2F%E7%B7%A8%E8%BC%AF%E7%B4%80%E9%8C%84.png?alt=media#x26;token=9b097d5b-3dd5-4368-abbe-3e7008a9d0eb" alt=""><figcaption></figcaption></figure>

希望查詢過往最新幾筆的自動儲存紀錄時，也可以透過右上角的「…」，查看編輯紀錄。如果想要進一步瞭解編輯紀錄，歡迎前往查看「[如何查看編輯紀錄？](https://vocus.cc/help_center/waXeikq0HiG07olTcoqI)」。



***



## 貼文編輯器使用方式

貼文是一種更輕巧、凸顯圖像的創作形式，在畫面上會優先呈現圖片，不同於文章圖文穿插的方式。&#x20;

貼文編輯器的字數上限為 2,000 字、10 張圖片，若超過此上限，建議轉為文章形式發佈。



貼文支援上傳圖片、提及、與超連結功能：

**上傳圖片**：可選取檔案，或是拖曳多張圖片上傳，也可以選擇圖庫內容

**提及文章或會員**：輸入 ＠ 符號即可使用提及功能，提及指定文章或會員

**超連結**：反白文字後，直接貼上網址就可帶入連結



***



以上就是 vocus 編輯器的使用說明，期待你透過 vocus 編輯器提供的各式功能盡情揮灑創意，玩轉出不同的創作火花！
