TinyMCE 編輯器教學：Joomla 後台文章編輯、圖片上傳與檔案管理說明

TinyMCE 是什麼

TinyMCE 是一套網頁文字編輯器，
Joomla、WordPress 等多套 CMS 都會內建或外掛這套工具，
用來取代直接手寫 HTML 的麻煩。
在 Joomla 後台新增或編輯文章時，畫面中央那一大塊輸入區，
上方排著粗體、斜體、對齊、項目符號、插入連結、插入圖片/檔案這些按鈕的，
就是 TinyMCE。

操作邏輯跟 Word、Google 文件差不多：
選取文字、按按鈕、看畫面變化。
不需要知道程式標籤怎麼寫，
這也是為什麼大部分公司會把日常文章更新的工作，
直接交給行政或行銷人員，不用每次都找工程師。

TinyMCE 跟 SP Page Builder 差在哪

TinyMCE 處理的是「文章內容」，也就是一段一段的文字、圖片、表格，排版方式偏向直線往下讀的長文。
SP Page Builder 這類拖拉式頁面編輯器，處理的是「版面區塊」，可以做出左右分欄、多欄卡片、背景圖疊文字這種比較像設計稿的排版。

常用功能：標題、圖片、檔案、檔案連結、表格、影片

設定標題層級

很多人習慣把標題直接放大字體、加粗了事，但這樣搜尋引擎讀不到「這是標題」這個資訊。
正確做法是選取文字後，從工具列的段落選單選擇 H2、H3，讓標題真的是標題，不只是看起來像標題。
這對網站的 SEO 結構和讀者瀏覽動線都有幫助。

插入圖片/檔案

點工具列的「CMS 內容」再選「圖片」，
可以從媒體管理選現有圖片，或上傳新圖再插入。
圖片上傳前建議先壓縮，一般文章用圖控制在 200KB 到 500KB 之間就夠用，除非是需要展示細節的作品圖才需要更大檔案。
檔案太大會拖慢頁面載入速度，間接影響搜尋排名跟使用者願不願意等。

插入 PDF 或檔案下載連結

PDF、簡章、報價單這類檔案，不會直接塞進文章裡，
做法是先把檔案上傳到媒體管理，再用一段文字加上連結指過去。
比較常見的寫法像「下載活動簡章 PDF」，選取這段文字後用連結功能貼上檔案網址即可，
前台使用者點了就能開啟或下載。

插入表格

表格適合用在課程時間、服務項目、收費表這類有對應關係的資料。
手機螢幕窄，欄位太多會擠成一團不好讀，
建議控制在 2 到 4 欄之間，
超過就考慮拆成分段文字或卡片式排版，而不是硬塞進一張表。

插入影片

目前如果要在文章內放影片，建議使用 YouTube 影片嵌入，
不建議直接把影片檔上傳到網站主機。

原因是影片檔通常比較大，若直接上傳到網站，
可能會影響主機空間、網站速度，也比較容易造成前台載入變慢。

操作方式如下：

• 先將影片上傳到 YouTube。
• 進入 YouTube 影片頁面，點選「分享」，點選嵌入。
  
  
  
• 複製 YouTube 提供的 iframe 嵌入碼。
  
  
  
• 回到 Joomla 文章編輯畫面。
• 切換到原始碼 / HTML 編輯模式：
  點選上方選單 「檢視」，選擇 「Source code」，系統會開啟 HTML 原始碼視窗
  
  
  
• 將 YouTube 提供的 iframe 嵌入碼貼到要顯示影片的位置
  
  
  
• 按確認
• 再按上方 「儲存」 或 「儲存並關閉」

如果您是要上傳的是 MP4 影片檔，也可以先傳給我們確認檔案大小與用途，
我們會再建議您適合用 YouTube 嵌入，還是另外放在網站空間中。

常見錯誤：複製貼上、檔名、格式跑掉

編輯文章時最常見的問題，是直接從 Word 或其他網頁複製大段文字貼進 TinyMCE。
這樣做會把原本文件裡的多餘樣式一起帶進來，
常見後果是前台字型變了、行距變大或變小、顏色莫名其妙跟著跑掉。
比較保險的做法，是先把內容貼到記事本這類純文字工具，
把格式洗掉,再貼進 Joomla，
或是用編輯器裡的「清除格式」按鈕把多餘樣式拿掉。

圖片檔名也是常被忽略的小細節。
用中文檔名或檔名中有空白字元,容易在網址編碼時出問題，
造成圖片在前台無法正常顯示。
建議統一用英文小寫字母加減號命名，例如：

• seo-report-2026.jpg
• company-profile.pdf
• event-photo-01.jpg

實際案例：圖片上傳常遇到的三個狀況

以下整理自客戶實際反映的問題（已去識別化處理），是後台改版後最常被問到的圖片上傳狀況。

第一個狀況是插入圖片時要求填寫網址，
卻在媒體區找不到剛上傳的照片。
這通常是介面更新後操作路徑改變，圖片其實已經上傳成功，
只是插入視窗預設停在「網址」分頁，
沒有切到「媒體」分頁去瀏覽，導致誤以為照片不見了。

第二個狀況是圖片尺寸是否一定要統一。
並不需要每張都裁成完全相同尺寸，插入後可以個別設定顯示寬高或比例，
不用為了統一尺寸反覆裁圖，只要整體版面看起來協調即可。

第三個狀況最常見：
刪除舊圖後用同樣檔名上傳新圖，前台卻一直顯示舊內容。
原因出在快取，瀏覽器、Joomla 系統，甚至 CDN，
都可能把舊版圖片留在快取裡沒有更新。
實務上比較保險的做法是改檔名重新上傳，
例如把 banner.jpg 改成 banner-0629.jpg，用日期或版本號做區隔。
如果堅持要用同檔名，
就要依序清除 Joomla 快取、瀏覽器快取（按 Ctrl + F5 強制重新整理），
有串接 CDN 的話也要記得清 CDN 快取，三層都清乾淨才會即時看到新圖。

快取本身是為了讓網站載入速度變快才存在的機制，不是要找麻煩，
只是在頻繁更換同檔名圖片時會造成這種「明明換了卻看不到」的狀況，
改檔名是目前最省事、最不容易出錯的做法。

JCE 跟 TinyMCE 差在哪裡

JCE（Joomla Content Editor）跟 TinyMCE 一樣是 Joomla 常見的文章編輯器，
外觀跟操作邏輯接近，
實際差別主要在圖片管理跟進階功能這兩塊。

TinyMCE 內建的圖片管理比較單純，插入圖片時依賴媒體管理器或填寫網址，
功能新版改版後操作路徑也會變動，前面提到的「插入視窗找不到照片」就是常見的混淆點之一。JCE 多了自己的檔案瀏覽器，
圖片上傳、裁切、縮圖產生這幾個動作可以在同一個視窗內完成，
不用切換到另外的媒體管理頁面再回來插入
，對需要頻繁更換圖片的網站管理者來說比較順手。

JCE 也支援更多進階排版功能，
例如插入頁籤（tab）、手風琴選單、彈出視窗這類互動元件，
這些 TinyMCE 預設沒有，需要額外寫程式碼或外掛才能做到。
但相對的，JCE 的設定選項比較多，第一次接觸的人需要花一點時間熟悉介面位置。

適合誰用、什麼狀況該找工程師

TinyMCE 適合需要定期更新內容的人，
例如公司行政、行銷人員、部落格作者。
不需要寫程式，操作門檻接近一般文書軟體，
學一次大概就能上手維護日常文章。

但如果牽涉到網站整體版型、首頁區塊調整、選單架構變更，
或是需要特殊動畫、互動功能，這些就超出 TinyMCE 的範圍，
通常要由網站設計師或工程師處理。
硬要用 TinyMCE 改這類內容，常見結果是版面跑掉或功能失效，反而要花更多時間善後。

常見問題