找我們做網站
↑
Wordpress · WordPress 外掛推薦

TinyMCE Advanced 教學:Advanced Editor Tools 用法

WordPress 外掛推薦發布 2018.11.05更新 2026.10.02閱讀約 8 分鐘
TinyMCE Advanced 教學:Advanced Editor Tools 用法

重點整理
TinyMCE Advanced 已改名為 Advanced Editor Tools(外掛網址仍是 tinymce-advanced),2026 年 8 月更新到 5.10.1 版,超過 100 萬個網站使用,完全免費。它做三件事:在區塊編輯器加入「傳統段落」區塊、自訂傳統編輯器最多四列的工具列按鈕(字型大小、顏色、表格、尋找與取代等),以及可選擇用傳統編輯器取代區塊編輯器。設定位置在「設定 → Advanced Editor Tools」。

WordPress 5.0 之後預設改用區塊編輯器(Gutenberg),但很多人還是習慣像 Word 一樣、一整頁打字排版的傳統編輯器,或是網站上有只支援傳統編輯器的外掛。Advanced Editor Tools 就是讓傳統編輯器變好用的外掛:可以自己挑選工具列按鈕,加入表格、字型大小、清單樣式、尋找與取代等功能。這篇說明安裝、各分頁設定的意思,以及加上去的按鈕實際怎麼用。

TinyMCE Advanced 和 Advanced Editor Tools 是同一個外掛嗎?

是同一個。TinyMCE 是 WordPress 傳統編輯器使用的開源編輯器元件,外掛因為商標因素改名為 Advanced Editor Tools,功能不變,外掛的網址代稱仍是 tinymce-advanced。在後台搜尋「TinyMCE Advanced」找不到時,改搜「Advanced Editor Tools」即可。

目前的版本主要提供:

  • 傳統段落區塊:在區塊編輯器裡新增一個「傳統段落」區塊,區塊裡面就是熟悉的 TinyMCE 編輯器,可以和其他區塊混用,也能和一般段落區塊互相轉換。
  • 自訂工具列:傳統編輯器、「傳統編輯器」區塊與「傳統段落」區塊的按鈕,都可以用拖曳的方式增減與排序。
  • 以傳統編輯器取代區塊編輯器:勾選後整個網站改回傳統編輯器。如果想讓兩種編輯器並存、讓使用者自己切換,官方建議改裝 Classic Editor 外掛。

步驟一:安裝 Advanced Editor Tools

到後台「外掛 → 安裝外掛」,搜尋「Advanced Editor Tools」,點「立即安裝」再「啟用」。

在 WordPress 安裝外掛頁搜尋外掛並點立即安裝(舊版畫面,當時外掛名稱仍是 TinyMCE Advanced)
在 WordPress 安裝外掛頁搜尋外掛並點立即安裝(舊版畫面,當時外掛名稱仍是 TinyMCE Advanced)

步驟二:進入外掛設定頁

設定頁有兩個入口:在「已安裝的外掛」清單中點外掛名稱下方的「設定」,或從左側選單「設定 → Advanced Editor Tools」進入。

從外掛清單的設定連結或設定子選單進入外掛設定頁(舊版畫面)
從外掛清單的設定連結或設定子選單進入外掛設定頁(舊版畫面)

設定頁上方分成「區塊編輯器(Gutenberg)」與「傳統編輯器(TinyMCE)」等分頁,兩邊的工具列是分開設定的。如果你的網站用的是區塊編輯器,主要調整的是「傳統段落」與「傳統編輯器」區塊的工具列;如果已經改回傳統編輯器,就調整傳統編輯器的工具列。

步驟三:拖曳按鈕到工具列

設定頁下方的「未使用的按鈕」區,就是還沒放進工具列的功能。把按鈕拖曳到上方的工具列就能加入,拖回下方就會移除,在工具列內左右拖曳可以調整順序。傳統編輯器最多可以設定四列按鈕。

外掛設定頁的工具列設定區,下方未使用的按鈕可以拖曳到上方工具列
外掛設定頁的工具列設定區,下方未使用的按鈕可以拖曳到上方工具列

改完記得按最下方的「儲存設定」。如果儲存後編輯器沒變化,先清除瀏覽器快取,再按住 Shift 重新整理編輯頁面。

步驟四:一般設定建議全部勾選

「一般設定」有幾個實用選項,新手可以全部勾選,後面會示範效果:

  • 清單樣式設定:編號清單可以選英文字母、羅馬數字,項目符號可以選圓圈、方塊。
  • 操作功能表:在編輯器內按滑鼠右鍵,會出現插入連結、圖片、表格的快捷選單。
  • 變更 [插入/編輯連結] 按鈕功能:插入連結時改用欄位較完整的對話框。
  • 字型大小:字型大小單位改用 px,可以選得更細。
一般設定的選項:清單樣式、操作功能表、插入連結對話框與字型大小
一般設定的選項:清單樣式、操作功能表、插入連結對話框與字型大小

步驟五:進階設定怎麼選?

進階設定的選項,包含建立 CSS 類別選單與保留段落標籤(舊版畫面,其中直接貼上圖片的選項目前版本已沒有)
進階設定的選項,包含建立 CSS 類別選單與保留段落標籤(舊版畫面,其中直接貼上圖片的選項目前版本已沒有)
  • 建立 CSS 類別選單:讀取主題 editor-style.css 裡的 CSS 類別,放進「格式」選單快速套用。主題沒有提供這個檔案時要自己建立,一般網站可以不勾。
  • 保留段落標籤:切換到「文字」分頁時,不會移除 <p> 和 <br /> 標籤,剛學 HTML 的人比較看得懂段落結構,建議勾選。
  • 表格進階設定:可以決定表格是否使用內嵌樣式(inline style)。關掉內嵌樣式後表格就不能在編輯器裡拖曳調整大小,一般維持預設即可。

步驟六:外掛管理與增強功能

「外掛管理」分頁可以匯出設定成 JSON 檔,再匯入到另一個網站,換站或重灌時不用重新拖一次按鈕;設定弄亂了,也可以按「還原預設設定」重來。下方「為指定編輯器啟用增強功能」可以把這些按鈕也套用到其他地方的傳統編輯器,例如網站前端的編輯器。

外掛管理設定:匯出、匯入設定,以及為其他編輯器啟用增強功能
外掛管理設定:匯出、匯入設定,以及為其他編輯器啟用增強功能

加入的功能實際怎麼用?

以下用傳統編輯器的文章編輯畫面示範。打開文章後,剛剛加入的按鈕都會出現在編輯器工具列上。

文章編輯畫面中,工具列顯示了新加入的按鈕
文章編輯畫面中,工具列顯示了新加入的按鈕

更多清單樣式

勾選「清單樣式設定」後,建立清單時點按鈕旁的小箭頭,就能選擇更多樣式,不再只有圓點和 1、2、3。

項目符號清單的樣式選單,可選圓點、圓圈、方塊
項目符號清單的樣式選單,可選圓點、圓圈、方塊
編號清單的樣式選單,可選數字、英文字母、羅馬數字
編號清單的樣式選單,可選數字、英文字母、羅馬數字

右鍵快捷選單

勾選「操作功能表」後,在編輯器內按右鍵就能快速插入連結、圖片與表格。

在編輯器內按右鍵出現的快捷選單,可插入連結、圖片、表格
在編輯器內按右鍵出現的快捷選單,可插入連結、圖片、表格

更完整的插入連結對話框

勾選「變更 [插入/編輯連結] 按鈕功能」後,插入連結會出現完整的對話框:

插入連結的對話框,包含網址、顯示文字、標題、rel 與開啟方式欄位
插入連結的對話框,包含網址、顯示文字、標題、rel 與開啟方式欄位
  1. 網址:要連過去的完整網址,包含 https://。
  2. 顯示文字:連結上顯示的文字,也就是錨點文字(Anchor Text)。
  3. 標題:滑鼠停在連結上時顯示的提示文字。
  4. Rel:告訴搜尋引擎這個連結跟網站的關係,例如付費或不想背書的外部連結可以選 nofollow。
  5. 開啟目標:在同一個視窗開啟,或開新分頁。
填好欄位後插入的連結
填好欄位後插入的連結

用 px 設定字型大小

勾選「字型大小」後,字型大小選單的單位從 pt 改成 px,選項也更細。

字型大小下拉選單,單位改為 px
字型大小下拉選單,單位改為 px

文字分頁保留段落標籤

勾選進階設定的「保留段落標籤」後,切到「文字」分頁就能看到完整的 <p>、<br />。

文字分頁中顯示完整的 p 與 br 標籤
文字分頁中顯示完整的 p 與 br 標籤

分頁標籤

「分頁標籤」按鈕會插入分頁符號,把很長的文章拆成好幾頁,讀者要點下一頁才能繼續看。

在文章中插入分頁標籤
在文章中插入分頁標籤

尋找與取代

一篇文章裡有大量同樣的字要改,例如產品改名,可以用「尋找與取代」一次換掉。

工具列上的尋找與取代按鈕
工具列上的尋找與取代按鈕
尋找與取代對話框,輸入要找的字與取代的字
尋找與取代對話框,輸入要找的字與取代的字

插入影片

「插入/編輯媒體」可以嵌入 YouTube 等影片:在來源欄位貼上影片網址、設定寬高後插入。其實在傳統編輯器裡直接把 YouTube 網址貼在獨立一行,WordPress 也會自動嵌入。

工具列上的插入/編輯媒體按鈕
工具列上的插入/編輯媒體按鈕
插入媒體對話框,在來源欄位貼上 YouTube 影片網址並設定寬高
插入媒體對話框,在來源欄位貼上 YouTube 影片網址並設定寬高
影片插入後在編輯器中顯示的樣子
影片插入後在編輯器中顯示的樣子

插入日期時間

「插入日期/時間」按鈕會在游標位置插入目前的日期或時間,適合寫更新紀錄或公告。

插入日期時間按鈕與可選的日期格式
插入日期時間按鈕與可選的日期格式

專注寫作模式

專注寫作模式會把側邊選單與其他面板隱藏,只留下編輯區。

開啟專注寫作模式後,只留下編輯區的畫面
開啟專注寫作模式後,只留下編輯區的畫面

常見問題

找不到 TinyMCE Advanced 外掛怎麼辦?

改搜「Advanced Editor Tools」,這是它現在的名稱,功能相同。外掛頁網址仍是 wordpress.org/plugins/tinymce-advanced/。

用區塊編輯器還需要裝 Advanced Editor Tools 嗎?

不一定需要。區塊編輯器本身已經有表格、清單、字型大小、顏色等功能;如果你習慣在一個框裡連續打字排版,或要編輯舊文章的傳統內容,可以用它的「傳統段落」區塊。

安裝後工具列沒有任何變化?

先在設定頁隨便調整一個按鈕並儲存,再清除瀏覽器快取、按住 Shift 重新整理編輯頁。另外也要確認「使用者 → 個人資料」裡沒有勾選「撰寫文章時停用視覺化編輯器」。

結語

Advanced Editor Tools 適合習慣傳統編輯器、或網站裡有大量舊文章要維護的人:裝好後把常用的按鈕拖進工具列、勾選一般設定,就能用表格、清單樣式、尋找與取代這些功能。如果網站已經全面使用區塊編輯器,也可以只在需要時插入「傳統段落」區塊。要做更有設計感的頁面版型,再搭配主題或頁面編輯器處理。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。