FreeTextBox 3.0 Released !

問題與答案 (FAQ)

Q&A 類別 A: 概念理解類

Q1: 什麼是 FreeTextBox？

• A簡: 一個 ASP.NET Web Forms 的可視化 HTML 編輯控制項，讓使用者在網頁上直接撰寫與格式化內容。
• A詳: FreeTextBox 是一個運行於 ASP.NET Web Forms 的 WYSIWYG HTML 編輯控制項。開發者可將它拖放到頁面，使用者即可在瀏覽器中輸入、排版並產生 HTML，而無需手寫標籤。它提供工具列、格式化、插入連結與圖片等常用功能，降低內容管理的門檻，適用於部落格、後台文章編輯、知識庫與 CMS 等場景。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, A-Q4, B-Q1, A-Q14

Q2: FreeTextBox 3.0 的核心改進有哪些？

• A簡: 更豐富工具列、穩定性提升，並新增內建 Image Gallery，編輯體驗與媒體插入流程更順暢。
• A詳: 相較早期版本（如 1.6），FreeTextBox 3.0 在可用性與擴充性上皆有強化。它提供更完整的工具列自訂、較佳的瀏覽器相容性與錯誤修正，並內建 Image Gallery，讓作者能直接選取伺服器現有圖片插入內容，減少離開編輯器的往返步驟，整體效率與一致性更好。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q7, A-Q8, C-Q3

Q3: 為什麼在 ASP.NET 專案中需要 HTML Editor 控制項？

• A簡: 它讓非技術使用者以所見即所得方式撰文，降低學習成本並縮短內容上線時間。
• A詳: HTML Editor 控制項提供可視化排版、插入連結與圖片等功能，使非工程背景的編輯與行銷人員能快速產出內容。對 ASP.NET 專案而言，這些控制項能與伺服器端程式碼與狀態管理整合，簡化資料繫結與存取流程，同時維持一致 UI 與權限控制。結果是縮短開發與維運成本，提升內容生產效率。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, A-Q9, B-Q11

Q4: FreeTextBox 與傳統 textarea 的差異是什麼？

• A簡: FreeTextBox 提供所見即所得與插圖工具；textarea 只接收純文字，不含格式化功能。
• A詳: 傳統 textarea 僅能輸入純文字，若需加粗、標題或插圖，使用者得手動編寫 HTML。FreeTextBox 則封裝瀏覽器的可編輯內容能力，提供工具列按鈕、快捷鍵與對話框，支援段落、清單、連結、圖片等，並能回傳結構化 HTML。它也與 ASP.NET 生命週期整合，方便在伺服器端讀寫內容與做驗證。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, B-Q1, B-Q4

Q5: FreeTextBox 與其他 WYSIWYG 編輯器有何差異？

• A簡: 它原生為 ASP.NET Web Forms 設計，整合伺服器控制項模型，部署與資料繫結更直接。
• A詳: 市面上編輯器如 TinyMCE、CKEditor 多以純前端 JavaScript 為主，需自行包裝伺服器端邏輯。FreeTextBox 的優勢在於它是 ASP.NET 伺服器控制項，能沿用 ViewState、事件與屬性設定，與 Web Forms 開發模式契合。對以 Web Forms 為主的專案，常可更快上手並縮短整合與部署時間。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q15, A-Q17, C-Q8

Q6: FreeTextBox 與 .TEXT 部落格引擎的整合是什麼？

• A簡: .TEXT 使用 FreeTextBox 作為文章編輯器，讓作者直接在後台進行 WYSIWYG 編輯。
• A詳: .TEXT 是早期的 ASP.NET 部落格引擎，常見部署會將 FreeTextBox 作為後台撰文與編輯文章的核心元件。藉由控制項的 Text 屬性與事件，.TEXT 將使用者產生的 HTML 儲存至資料庫，並於前台呈現。這種整合大幅簡化了非技術作者的發文流程。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q12, C-Q5, A-Q1

Q7: 什麼是 FreeTextBox 內建的 Image Gallery？

• A簡: 一個伺服器端圖片瀏覽與選取介面，能直接將現有圖檔插入編輯器內容。
• A詳: Image Gallery 是 FreeTextBox 3.0 內建的媒體選取功能。它瀏覽伺服器端指定目錄中的現有圖檔，讓作者在編輯時直接挑選並插入，而不必離開編輯頁面或記憶圖片 URL。選取後，編輯器會於游標處插入對應的 標籤，顯著加快圖文內容製作流程。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q5, C-Q3, D-Q3

Q8: FreeTextBox 1.6 與 3.0 的主要差異是什麼？

• A簡: 3.0 提升穩定性與使用性，並新增 Image Gallery；1.6 功能較基礎、擴充性較弱。
• A詳: 1.6 為較早期版本，提供基本的 WYSIWYG 編輯能力。3.0 在錯誤修正、工具列自訂、瀏覽器相容與開發體驗上皆優化，並首度內建 Image Gallery，以便於插入伺服器現有圖片。對既有專案，升級通常可獲得更順暢的編輯與較佳維護性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q2, C-Q5, D-Q10

Q9: 使用 FreeTextBox 的核心價值是什麼？

• A簡: 降低內容生產門檻、加速上稿流程，並與 ASP.NET 生態無縫整合，提升團隊一致性。
• A詳: FreeTextBox 使非技術人員能以直覺方式撰文，產出結構化 HTML。它作為伺服器控制項，原生支援 Web Forms 生命週期與資料繫結，有利於實作權限、審核與版本化流程。內建圖片挑選也讓圖文編輯更順手，綜合提高生產力與系統一致性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, B-Q2, C-Q4

Q10: 如何取得 FreeTextBox 與試用 Demo？

• A簡: 前往官方網站下載，並透過線上 Demo 體驗功能與相容性後再導入專案。
• A詳: FreeTextBox 提供官方網站與線上 Demo。開發者可先在瀏覽器試用常見功能，如文字格式化與圖片插入，確定符合需求，再下載套件整合到 ASP.NET 專案。Demo 也有助於測試瀏覽器相容性與輸入法等細節表現。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q1, C-Q3, D-Q1

Q11: FreeTextBox 適用的典型應用場景有哪些？

• A簡: 後台文章編輯、新聞公告、知識庫、CMS、論壇貼文與部落格撰寫，凡需網頁富文字輸入皆適用。
• A詳: 凡需讓使用者在網頁端輸入富文字內容的場景皆適用，如企業後台的文章與新聞、知識庫條目撰寫、CMS 頁面管理、論壇貼文與評論、部落格後台等。相較純 textarea，它能產生具結構與樣式的 HTML，便於前台一致呈現。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, C-Q4, C-Q6

Q12: 為什麼 3.0 的 Image Gallery 能提升編輯效率？

• A簡: 省去手動找路徑與切換頁面，直接選取伺服器圖片並插入，節省操作步驟。
• A詳: 傳統插圖常需另開檔案管理頁、複製圖片 URL，再回到編輯器貼上。Image Gallery 將瀏覽、選取與插入整合在同一介面，縮短上下文切換時間，降低出錯（如路徑貼錯）的機率，也促進團隊共用素材的一致性與可重用性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q7, B-Q5, D-Q3

Q13: 使用 HTML 編輯器時的基本安全考量是什麼？

• A簡: 需防止 XSS/存取控制問題，採用白名單清理、轉義輸出與檔案上傳限制。
• A詳: 富文字輸入可能夾帶惡意腳本。伺服器端應進行 HTML 白名單清理（移除 script、事件屬性），在前台輸出時進行適當轉義，並對圖片/檔案上傳做副檔名、大小與路徑限制。權限與審核流程亦能降低風險。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q8, C-Q7, D-Q5

Q14: 什麼是所見即所得（WYSIWYG）編輯？

• A簡: 在編輯時即看到接近最終呈現的格式，使用者無需手寫 HTML，提升易用性與效率。
• A詳: WYSIWYG（What You See Is What You Get）指在編輯介面中即呈現類似最終結果的樣貌，如字體、粗斜體、清單與圖片位置。這種模式借助瀏覽器的可編輯內容能力與樣式，即時反映使用者操作，降低標記語言的學習成本。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, B-Q1, B-Q9

Q15: FreeTextBox 在 Web Forms 架構中的定位是什麼？

• A簡: 它是伺服器控制項，參與頁面生命週期，透過屬性與事件與伺服器互動。
• A詳: 作為 ASP.NET 伺服器控制項，FreeTextBox 會在 Init/Load/PreRender 階段建立與渲染對應的 HTML/JS，並透過 PostBack 將使用者編輯後的內容回傳。開發者可在伺服器端存取 Text 屬性、設定工具列與選項，並結合驗證控制項。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q2, B-Q3, C-Q1

Q16: 何時不適合使用 FreeTextBox？

• A簡: 只需純文字或極簡輸入、對性能極敏感或採純前端框架時，宜改用輕量方案。
• A詳: 若場景僅需留言或關鍵字等純文字輸入，或頁面對載入/回傳體積極度敏感，WYSIWYG 編輯器可能造成不必要的腳本體積與複雜度。對完全以 SPA/MVC 為主的專案，也可考慮純前端編輯器以減少耦合。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q11, A-Q5, D-Q7

Q17: FreeTextBox 與現代 MVC/SPA 的整合考量是什麼？

• A簡: 原生為 Web Forms 設計；若要整合，應封裝成元件並處理回傳與安全，避免資源衝突。
• A詳: FreeTextBox 主要面向 Web Forms。若在 MVC/SPA 中使用，需以 Partial/TagHelper 或自訂元件嵌入，並手動處理表單欄位名稱、回傳綁定與防 XSS 清理。同時確認前端路由與靜態資源載入不相衝突。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: C-Q8, B-Q7, D-Q9

Q18: 為何建議從 1.6 升級到 3.0？

• A簡: 獲得更佳穩定性、相容性與內建圖片庫功能，提升整體編輯效率，降低維護成本。
• A詳: 3.0 在使用體驗、錯誤修正與擴充彈性上顯著前進，內建 Image Gallery 也省去額外模組。升級可降低維護成本與技術債，對需要大量圖文編輯的系統，效能與流程一致性都能受益。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q2, D-Q10, C-Q5

Q&A 類別 B: 技術原理類

Q1: FreeTextBox 如何運作？

• A簡: 利用瀏覽器可編輯區域產生 HTML，並以伺服器控制項封裝回傳與設定，工具列執行命令。
• A詳: FreeTextBox 在客戶端以瀏覽器的可編輯區域（contentEditable）提供 WYSIWYG。工具列按鈕透過 execCommand 觸發加粗、連結、插入圖片等命令。伺服器端則是 ASP.NET 控制項：渲染工具列與編輯區，於提交時將內容置於隱藏欄位回傳，開發者以 Text 屬性讀寫。流程：渲染→編輯→回傳→儲存。核心組件：編輯區、工具列、回傳欄位、設定屬性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q1, A-Q14, B-Q2

Q2: FreeTextBox 的執行流程與頁面生命週期如何互動？

• A簡: 在 Init/Load 設定屬性，PreRender 輸出 HTML/JS，PostBack 從表單欄位還原 Text。
• A詳: 於 Init/Load 階段，控制項讀取設定（如工具列配置、初始 Text）；PreRender 產生編輯區與工具列腳本；用戶操作後提交，伺服器在 Load/資料繫結事件中從 Request.Form 取回隱藏欄位值並設為 Text。關鍵步驟：設定→渲染→互動→回傳→處理。核心組件：屬性模型、ViewState、隱藏欄位、事件管線。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q15, B-Q3, C-Q1

Q3: 內容如何由瀏覽器傳回伺服器並被程式存取？

• A簡: 編輯區內容同步到隱藏欄位，表單提交後由控制項將值映射至 Text 屬性。
• A詳: 客戶端在提交前以腳本將編輯區的 HTML 複製到隱藏 input/textarea。ASP.NET 提交表單後，控制項於載入資料階段讀取該欄位值，並填入 Text 屬性。開發者即可在伺服器端驗證、清理與寫入資料庫。流程：同步→提交→映射→使用。核心組件：同步腳本、隱藏欄位、Text 屬性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q15, C-Q4, D-Q5

Q4: 工具列按鈕背後的機制是什麼？

• A簡: 以 JavaScript 調用瀏覽器編輯命令（如 execCommand），作用於選取範圍與游標。
• A詳: 工具列按鈕綁定 JavaScript 事件，對目前選取或游標位置執行 bold、italic、createLink、insertImage 等命令。部分功能開啟對話框收集參數（URL、alt 文字）再執行命令。流程：點擊→收參→執行→更新。核心組件：按鈕、事件處理器、命令適配器、對話框。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q4, C-Q6, D-Q2

Q5: Image Gallery 的技術架構與運作流程？

• A簡: 伺服器列出指定目錄圖檔，前端選取後插入對應 標籤到編輯區。
• A詳: 伺服器端列舉圖片目錄（依白名單副檔名過濾），將清單/縮圖傳至前端。使用者在清單中選取後，前端腳本取得 URL 並於游標處插入 。關鍵步驟：列舉→顯示→選取→插入。核心組件：檔案系統/儲存服務、清單 UI、插入命令、權限層。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q7, C-Q3, D-Q3

Q6: 圖片選取/上傳的安全機制應如何設計？

• A簡: 採白名單副檔名與固定根目錄，限制大小與路徑，驗證權限並記錄操作。
• A詳: 安全策略包含：限制副檔名（jpg/png/gif/svg）與 MIME；強制存放在固定根目錄避免目錄穿越；限制大小與數量；上傳時重新命名、移除可疑資料；依角色授權；保留審計紀錄。流程：驗證→存放→回饋→插入。核心組件：驗證器、儲存器、授權/審計層。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q13, C-Q9, D-Q4

Q7: 客戶端腳本如何與伺服器端屬性與事件協作？

• A簡: 伺服器輸出設定為資料屬性/腳本常數，前端據此初始化並綁定事件處理。
• A詳: 控制項渲染時輸出初始化選項（工具列配置、資源路徑、語系），前端據此建立編輯器與事件（變更、提交前同步）。提交後伺服器處理 Text 與驗證。流程：輸出設定→初始化→互動→回傳。核心組件：渲染器、初始化腳本、事件匯流排、屬性模型。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q17, C-Q1, D-Q2

Q8: HTML 清理與安全過濾的原理是什麼？

• A簡: 以白名單比對標籤/屬性，移除危險內容並正規化輸出，防範跨站腳本。
• A詳: 伺服器端採白名單策略，只保留可信標籤（p, a, img 等）與屬性（href, src, alt）。移除事件屬性與 script，阻擋 data: 或 javascript: URL；正規化為 https/同源。流程：解析→比對→移除→正規化→輸出。核心組件：解析器、規則集、URL 檢查器、日誌。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q13, C-Q7, D-Q6

Q9: 瀏覽器相容性機制如何處理？

• A簡: 以能力檢測選擇命令與 API，必要時 Polyfill 或降級為純文字輸入。
• A詳: 各瀏覽器對 contentEditable/execCommand 支援度不同。初始化時進行能力檢測與命令映射；遇到不支援則停用相應按鈕或降級為 textarea，確保功能可用。流程：檢測→適配→降級。核心組件：特性測試、命令表、降級 UI、告警。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q14, D-Q1, D-Q10

Q10: 與資料庫儲存的編碼與字元集需注意哪些？

• A簡: 統一使用 UTF-8，資料庫欄位用 NVARCHAR/TEXT，輸出處理編碼與轉義。
• A詳: 前後端統一 UTF-8；資料庫欄位用 NVARCHAR(n)/NVARCHAR(MAX) 或等效型別避免截斷；以參數化寫入避免注入。儲存原始 HTML，呈現端採白名單渲染或必要轉義。流程：統一編碼→參數化→持久化→安全輸出。核心組件：連線設定、欄位型別、輸出模板。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q4, D-Q8, A-Q10

Q11: 大內容載入與回傳對效能的影響與優化？

• A簡: 內容越大傳輸越慢；可壓縮、延遲載入與調整 ViewState 以改善效能。
• A詳: 大量 HTML 會增加頁面體積與 PostBack 時間。建議啟用壓縮、關閉不必要 ViewState、延遲載入大型清單（如圖片庫）、限制版本數量與草稿自動儲存頻率。流程：量測→定位→壓縮/裁剪→驗證。核心組件：壓縮器、載入器、量測工具。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: D-Q7, C-Q8, A-Q16

Q12: .TEXT 與 FreeTextBox 的整合機制是如何設計的？

• A簡: 以控制項 Text 與事件串接資料層，將 HTML 儲存至資料庫並於前台呈現。
• A詳: .TEXT 後台嵌入 FreeTextBox，載入時將文章 HTML 指派給 Text；發佈時取回 Text 寫入資料庫，再由前台模板呈現。可與審核與版本化流程結合。流程：載入→編輯→儲存→呈現。核心組件：控制項封裝、資料存取層、檢視模板、權限。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q6, C-Q5, D-Q10

Q&A 類別 C: 實作應用類

Q1: 如何在 ASP.NET Web Forms 頁面加入 FreeTextBox？

• A簡: 下載套件、加入參考並在 .aspx 註冊標記，放入控制項即可使用。
• A詳: 具體步驟：1) 從官網下載組件與資源。2) 參考 DLL。3) 在頁首註冊：<%@ Register TagPrefix=’FTB’ Namespace=’FreeTextBoxControls’ Assembly=’FreeTextBox’ %>。4) 放置：。注意：確保資源目錄與腳本可被 IIS 提供。最佳實踐：抽共用母版頁集中載入資產。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, A-Q15, B-Q2

Q2: 如何設定 FreeTextBox 的初始內容與基本樣式？

• A簡: 於伺服器端指派 Text，並透過 CSS 控制編輯區字體與行距樣式。
• A詳: 步驟：1) Page_Load 中（!IsPostBack）指定 Editor.Text = “<p>歡迎</p>“。2) 於 CSS 設定編輯區樣式，例如 .ftb-body { font-family: Arial; line-height:1.6; }。關鍵程式碼：Editor.Text = GetArticleHtml(); 注意：避免回傳後覆寫使用者修改。最佳實踐：樣式集中於外部 CSS，維持一致。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: C-Q1, B-Q3, D-Q5

Q3: 如何啟用並設定 Image Gallery 功能？

• A簡: 指定圖片目錄與存取權限，啟用圖片挑選並指向對應 URL 路徑。
• A詳: 步驟：1) 建立 /uploads/images 目錄。2) 給予 IIS App Pool 帳號讀（與上傳則寫）權。3) 在設定指定路徑與白名單副檔名。範例：Editor.ImageGalleryPath=”/uploads/images”; 4) 測試插入。注意：避免指向敏感目錄。最佳實踐：提供縮圖以減少載入量。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q7, B-Q5, D-Q3

Q4: 如何將編輯器內容存入資料庫並安全顯示？

• A簡: 以參數化查詢存入 HTML，前台顯示採白名單渲染或必要轉義處理。
• A詳: 步驟：1) 取得內容：string html = Editor.Text; 2) 儲存：cmd.Parameters.Add(“@Html”, html);（NVARCHAR(MAX)）。3) 呈現：白名單渲染或適度 HtmlEncode。注意：避免雙重編碼與內嵌危險腳本。最佳實踐：儲存層與輸出層責任明確分離。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q10, A-Q13, D-Q5

Q5: 如何將使用中的 .TEXT 升級為 FreeTextBox 3.0？

• A簡: 備份、更新組件與資源、調整設定並完整回歸測試後再行上線。
• A詳: 步驟：1) 完整備份程式與資料庫。2) 以 3.0 DLL/資源替換舊版。3) 檢查後台編輯頁控制項宣告與屬性。4) 測試發文、圖片挑選、發佈流程。5) 分階段上線。注意：相容性差異與快取。最佳實踐：Staging/灰度釋出與回滾方案。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q8, B-Q12, D-Q10

Q6: 如何自訂工具列按鈕與常用功能配置？

• A簡: 調整工具列配置與命令，只保留業務所需的精簡常用功能，降低學習負擔。
• A詳: 步驟：1) 指定工具列布局。2) 停用不必要命令。3) 調整順序與群組。範例（偽）：Editor.Toolbar = “Bold,Italic,Link,Image”; 注意：過多選項會干擾使用者。最佳實踐：依角色提供差異化配置，提升效率。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, A-Q11, D-Q2

Q7: 如何限制可輸入/貼上的 HTML 標籤集合？

• A簡: 建立後端白名單過濾器，儲存前清理不允許的標籤與屬性，提升安全性。

• A詳: 步驟：1) 實作 Sanitizer（白名單）。2) 儲存前：html = Sanitize(Editor.Text); 3) 測試各來源（Word/網頁）。建議白名單：p, ul, li, a[href], img[src

  alt]。注意：保留必要屬性避免破圖。最佳實踐：記錄被移除內容作為稽核。

• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q8, A-Q13, D-Q6

Q8: 如何部署 FreeTextBox 至 IIS 生產環境？

• A簡: 複製 DLL 與資源，設定 MIME/壓縮，檢查權限與資產路徑配置。
• A詳: 步驟：1) 發佈含 FreeTextBox DLL 與靜態資產（/freetextbox/）。2) IIS 啟用靜態內容與壓縮。3) 資源目錄唯讀，uploads 目錄限制寫入者與副檔名。4) 驗證 Demo 頁面。注意：CDN/相對路徑一致。最佳實踐：健康檢查與監控警報。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q11, A-Q17, D-Q1

Q9: 如何為圖片庫設定上傳權限與大小配額？

• A簡: 限制上傳類型與大小，設定目錄 ACL 與 web.config 上傳上限。
• A詳: 步驟：1) 目錄 ACL 僅允許 App Pool 帳號寫入。2) web.config： 與 requestFiltering。3) 伺服器驗證副檔名/MIME。4) 前端提示大小限制。注意：防目錄穿越。最佳實踐：定期清理舊檔與壓縮圖片。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q6, D-Q4, A-Q12

Q10: 如何撰寫單元/整合測試驗證編輯與儲存流程？

• A簡: 以服務層抽象儲存，模擬輸入與清理流程，驗證資料與呈現一致。
• A詳: 步驟：1) 以 IArticleService.Save(html) 抽象儲存。2) 單元測試：輸入惡意/合法 HTML，驗證 Sanitizer 與儲存。3) 整合測試：發佈端點→資料庫→前台檢視。程式碼：Assert.Contains(“<p>”, savedHtml)。注意：降低 UI 依賴。最佳實踐：使用種子資料與快照比對。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q3, D-Q5, A-Q9

Q&A 類別 D: 問題解決類

Q1: 控制項不顯示或只看到純文字 textarea，怎麼辦？

• A簡: 通常是腳本或資源未載入、瀏覽器不支援；檢查部署並啟用降級策略。
• A詳: 症狀：工具列缺失、編輯區無格式。可能原因：資源路徑錯誤、JS 載入失敗、瀏覽器禁用腳本或不支援。解決步驟：檢查 404/Console 錯誤、修正資源路徑、確認初始化順序；必要時啟用降級為 textarea。預防：部署檢查清單、資產版本鎖定與監控告警。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q9, C-Q8, A-Q10

Q2: 工具列按鈕無反應或報 JS 錯？

• A簡: 多為腳本衝突或初始化失敗，先定位錯誤行再最小化重現進行修復。
• A詳: 症狀：點按無效、Console 報錯。原因：依賴載入順序錯、命名衝突、未完成初始化。解法：確保初始化在 DOM Ready；隔離命名空間；逐步停用第三方腳本定位衝突；更新相依套件。預防：資產管理、版本鎖定、端對端自動化測試。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, B-Q7, C-Q6

Q3: Image Gallery 看不到伺服器圖片？

• A簡: 確認目錄設定與讀取權限，並將副檔名白名單納入常用圖片格式。
• A詳: 症狀：清單為空、403 或 404。原因：根路徑設定錯、IIS 帳號無讀權、白名單未含副檔名。解法：修正路徑、授予讀權、加入 jpg/png/gif；檢查相對/絕對 URL。預防：目錄巡檢、健康檢查與權限審核。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q5, C-Q3, A-Q12

Q4: 上傳圖片失敗或檔案過大被拒？

• A簡: 調整 maxRequestLength/RequestFiltering，並在前端限制上傳檔案大小。
• A詳: 症狀：413 或 404.13、逾時。原因：超過 IIS/ASP.NET 限制或被請求篩檢阻擋。解法：web.config 設 與 ；伺服器端驗證大小；前端提示上限。預防：前後端一致限制與友善錯誤訊息。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q6, C-Q9, B-Q11

Q5: 儲存後 HTML 被清空或出現過度轉義？

• A簡: 避免覆寫 Text 與雙重 HtmlEncode，理清儲存與顯示層的責任。
• A詳: 症狀：內容消失或顯示 <p>。原因：回傳後重新指派空初值、同時儲存已編碼內容且輸出再編碼。解法：僅在 !IsPostBack 設初值；儲存原始 HTML；輸出層採白名單渲染或一次轉義。預防：建立整合測試與代碼審查清單。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q3, A-Q13, C-Q4

Q6: 從 Word 貼上造成多餘標籤與奇怪樣式？

• A簡: 於儲存前做 HTML 清理，或提供「從 Word 貼上」模式去除冗餘。
• A詳: 症狀：span/style/注入樣式過多、頁面樣式污染。原因：Word 產生複雜標記。解法：Sanitizer 移除 style/class 與註解；保留結構化標籤；提供「貼上自 Word」流程做清理。預防：建立貼上指南並持續調整白名單。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q8, C-Q7, A-Q14

Q7: 編輯與發佈大篇幅內容時效能不佳？

• A簡: 壓縮與延遲載入、關閉冗餘 ViewState、優化資料庫與網路傳輸。
• A詳: 症狀：頁面載入慢、PostBack 耗時。原因：HTML 體積大、ViewState 肥大、資源未壓縮。解法：啟用壓縮、裁減腳本、延遲載入圖片清單；資料庫分頁與索引；網路快取。預防：性能基線、壓力測試與監控告警。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q11, C-Q8, A-Q16

Q8: 內容亂碼或編碼不一致？

• A簡: 統一 UTF-8 與 NVARCHAR，確保頁面、回應與連線字元集一致。
• A詳: 症狀：中文字變問號或亂碼。原因：前端、回應、資料庫編碼不一致。解法：web.config ；資料庫欄位用 NVARCHAR；連線指定 UTF-8。預防：將編碼檢查納入 CI 檢核。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q10, C-Q4, A-Q15

Q9: 與其他前端腳本或樣式衝突怎麼辦？

• A簡: 命名隔離與載入順序管理，必要時分頁面延遲載入以避免衝突。
• A詳: 症狀：樣式走位、按鈕失效。原因：CSS/JS 名稱或版本衝突、初始化時機不當。解法：前綴命名、IIFE/模組化隔離；確保依賴順序；逐步禁用外掛定位衝突。預防：資產管理、版本鎖定與變更前測。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q7, A-Q17, C-Q8

Q10: 升級至 3.0 後出現相容性問題？

• A簡: 比對破壞性變更，調整設定與 API，灰度釋出並完成回歸測試。
• A詳: 症狀：樣式變動、部分功能失效。原因：屬性/資源路徑變更、瀏覽器支援差異。解法：參考升級指南，修正工具列與資源路徑；必要時建立相容適配層；分批灰度釋出並回歸測試。預防：版本化資產、變更日誌與回滾腳本。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q2, B-Q9, C-Q5

學習路徑索引

• 初學者：建議先學習哪 15 題
  • A-Q1: 什麼是 FreeTextBox？
  • A-Q3: 為什麼在 ASP.NET 專案中需要 HTML Editor 控制項？
  • A-Q4: FreeTextBox 與傳統 textarea 的差異是什麼？
  • A-Q2: FreeTextBox 3.0 的核心改進有哪些？
  • A-Q7: 什麼是 FreeTextBox 內建的 Image Gallery？
  • A-Q8: FreeTextBox 1.6 與 3.0 的主要差異是什麼？
  • A-Q9: 使用 FreeTextBox 的核心價值是什麼？
  • A-Q10: 如何取得 FreeTextBox 與試用 Demo？
  • A-Q11: FreeTextBox 適用的典型應用場景有哪些？
  • A-Q12: 為什麼 3.0 的 Image Gallery 能提升編輯效率？
  • A-Q14: 什麼是所見即所得（WYSIWYG）編輯？
  • A-Q15: FreeTextBox 在 Web Forms 架構中的定位是什麼？
  • C-Q1: 如何在 ASP.NET Web Forms 頁面加入 FreeTextBox？
  • C-Q2: 如何設定 FreeTextBox 的初始內容與基本樣式？
  • D-Q1: 控制項不顯示或只看到純文字 textarea，怎麼辦？
• 中級者：建議學習哪 20 題
  • B-Q1: FreeTextBox 如何運作？
  • B-Q2: FreeTextBox 的執行流程與頁面生命週期如何互動？
  • B-Q3: 內容如何由瀏覽器傳回伺服器並被程式存取？
  • B-Q4: 工具列按鈕背後的機制是什麼？
  • B-Q5: Image Gallery 的技術架構與運作流程？
  • B-Q6: 圖片選取/上傳的安全機制應如何設計？
  • B-Q7: 客戶端腳本如何與伺服器端屬性與事件協作？
  • B-Q8: HTML 清理與安全過濾的原理是什麼？
  • B-Q9: 瀏覽器相容性機制如何處理？
  • B-Q10: 與資料庫儲存的編碼與字元集需注意哪些？
  • B-Q11: 大內容載入與回傳對效能的影響與優化？
  • B-Q12: .TEXT 與 FreeTextBox 的整合機制是如何設計的？
  • C-Q3: 如何啟用並設定 Image Gallery 功能？
  • C-Q4: 如何將編輯器內容存入資料庫並安全顯示？
  • C-Q6: 如何自訂工具列按鈕與常用功能配置？
  • C-Q7: 如何限制可輸入/貼上的 HTML 標籤集合？
  • C-Q8: 如何部署 FreeTextBox 至 IIS 生產環境？
  • C-Q9: 如何為圖片庫設定上傳權限與大小配額？
  • D-Q2: 工具列按鈕無反應或報 JS 錯？
  • D-Q3: Image Gallery 看不到伺服器圖片？
• 高級者：建議關注哪 15 題
  • A-Q17: FreeTextBox 與現代 MVC/SPA 的整合考量是什麼？
  • A-Q16: 何時不適合使用 FreeTextBox？
  • A-Q5: FreeTextBox 與其他 WYSIWYG 編輯器有何差異？
  • A-Q18: 為何建議從 1.6 升級到 3.0？
  • B-Q6: 圖片選取/上傳的安全機制應如何設計？
  • B-Q7: 客戶端腳本如何與伺服器端屬性與事件協作？
  • B-Q8: HTML 清理與安全過濾的原理是什麼？
  • B-Q11: 大內容載入與回傳對效能的影響與優化？
  • C-Q10: 如何撰寫單元/整合測試驗證編輯與儲存流程？
  • D-Q4: 上傳圖片失敗或檔案過大被拒？
  • D-Q5: 儲存後 HTML 被清空或出現過度轉義？
  • D-Q6: 從 Word 貼上造成多餘標籤與奇怪樣式？
  • D-Q7: 編輯與發佈大篇幅內容時效能不佳？
  • D-Q9: 與其他前端腳本或樣式衝突怎麼辦？
  • D-Q10: 升級至 3.0 後出現相容性問題？