.TEXT 的編輯介面補強（加入插圖與表情工具列）

問題與答案 (FAQ)

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

Q1: 什麼是 .TEXT？

• A簡: .TEXT 是早期 ASP.NET 部落格引擎，提供貼文、留言與編輯器整合，後續演進為 Community Server。
• A詳: .TEXT 是建立在 ASP.NET Web Forms 的開源部落格/社群引擎，特色是部署簡單、功能齊全（文章、分類、留言、RSS），並提供可替換的編輯器整合。它在 2003-2005 年間廣受 .NET 社群使用，後續由 Telligent 團隊延伸為 Community Server，成為企業級社群平台。本篇描述的編輯介面補強，即是針對 .TEXT 內建的 FreeTextBox 編輯器進行功能擴展。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, A-Q14, B-Q1

Q2: 為什麼使用 .TEXT 作為 Blog 系統？

• A簡: 簡單穩定、易部署、ASP.NET 架構、社群資源豐富，並可自行修改原始碼擴充功能。
• A詳: .TEXT 提供「夠用且可改」的平衡：以 ASP.NET 為基礎，易於在 Windows/IIS 環境部署；功能涵蓋文章管理、留言、分類、RSS；開源授權可自訂介面與功能，且社群經驗分享多。本篇案例顯示，雖內建編輯器缺少插圖與表情功能，但可透過簡易程式碼修改補強，滿足實務需求。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q1, A-Q7, B-Q1

Q3: 什麼是 FreeTextBox？

• A簡: FreeTextBox 是 ASP.NET 的 WYSIWYG HTML 編輯器；.TEXT 內建 v1.6 供貼文編輯使用。
• A詳: FreeTextBox 是針對 ASP.NET Web Forms 設計的所見即所得（WYSIWYG）HTML 編輯器，能將使用者的編輯操作轉為 HTML，回傳伺服器儲存。其提供工具列操作、原始碼模式切換等。本文所述 .TEXT 內建 v1.6 版本，雖能像 Word 一樣編輯，但缺少插入圖片與表情符號功能，因此進行自訂補強以改善編輯效率與體驗。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q4, B-Q2, B-Q3

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

• A簡: 以可視化介面直接編輯內容並產生 HTML，降低使用者記憶標籤負擔。
• A詳: WYSIWYG 編輯器透過 contentEditable/iframe 等機制，讓使用者像在文書處理器中直接編排文字、圖片、列表、對齊等，由前端 JavaScript 轉換為 HTML。其優點是門檻低、效率高；缺點是複雜 HTML 與跨瀏覽器差異處理成本高。FreeTextBox 即屬此類，另提供切換原始碼模式以便精修。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, A-Q5, B-Q2

Q5: WYSIWYG 與 HTML 原始碼模式有何差異？

• A簡: WYSIWYG 重視可視操作、初學友善；原始碼模式精準可控，適合微調與除錯。
• A詳: WYSIWYG 讓使用者直接視覺化排版，省去記憶標籤；適合一般寫作。原始碼模式顯示實際 HTML，可手動加入標籤屬性、調整結構、修正怪異標記。本文作者過去靠切原始碼加 tag 來插圖與表情，但操作冗長，於是改用工具列按鈕一鍵插入，以兼顧效率與精準度。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q4, A-Q12, B-Q9

Q6: .TEXT 內建 FreeTextBox v1.6 的限制是什麼？

• A簡: 缺少一鍵插入圖片與表情功能，需手動切原始碼加入 HTML 標籤。
• A詳: 本文指出 .TEXT 內建的 FreeTextBox v1.6 雖支援基本排版，但沒有現成「插入圖片」與「插入表情」的工具列與對話框。使用者若要插圖或表情，必須切換到 HTML 原始碼模式，手動輸入 或對應標籤，流程繁瑣、易出錯。為此作者自行加了一排工具列按鈕，顯著改善體驗。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q3, A-Q7, B-Q3

Q7: 為何需要插入圖片與表情符號功能？

• A簡: 提升表達力與可讀性，降低手動編碼成本，讓寫作更順暢高效。
• A詳: 圖片提供視覺說明與示意，表情符號增添語氣與情感，對技術文章與部落格皆重要。若缺少一鍵插入，作者需手動寫 、路徑、alt 等標籤，費時且容易拼錯。工具列補強讓頻繁操作簡化為一鍵或兩步驟，顯著提升寫作效率與內容呈現品質。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q6, B-Q5, B-Q6

Q8: 什麼是編輯器的工具列（Toolbar）？

• A簡: 工具列是編輯器提供常用命令的按鈕集合，用於快速執行插入與格式操作。
• A詳: 工具列聚合常見編輯動作，如粗體、斜體、清單、超連結、插圖、表情等。前端以按鈕或下拉面板呈現，點擊即觸發 JavaScript 命令或彈窗，將對應 HTML 插入到光標處。本文的補強是新增第二排工具列，專司圖片與表情插入。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q3, B-Q12, C-Q1

Q9: 增加第二排工具列的價值是什麼？

• A簡: 分組常用功能、縮短操作路徑、降低心智負擔，讓寫作流程更順更穩。
• A詳: 當原有工具列不足以承載新功能時，新增一排可避免擁擠與誤觸，讓插圖、表情獨立區塊更易被記憶。視覺群組化能降低尋找時間，並利於未來擴充更多多媒體功能，同時保持主工具列清爽，提升整體可用性與學習曲線。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q8, B-Q12, C-Q1

Q10: 什麼是表情符號（Emoticon）處理？

• A簡: 以預設圖示對應情緒語意，點選後插入對應 或短碼至內容。
• A詳: 表情符號通常是一組固定的小圖示（如笑臉、戴墨鏡），可用面板方式選擇。插入方式包含：直接插入 、或插入短碼後於顯示時轉換。本文採直接插入圖像，適合靜態網站與相容舊版編輯器，實作簡單直觀。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q6, C-Q3, D-Q9

Q11: 插入圖片與上傳圖片有何差異？

• A簡: 插入圖片多為引用 URL；上傳圖片需保存檔案並回傳連結再插入。
• A詳: 插入圖片通常指把現有圖片 URL 加入文章，步驟快但需圖片已可存取。上傳圖片則包含檔案接收、驗證副檔名/大小、存放路徑與產生可公開 URL，再把 插入。本文側重插入既有圖片資源，也可擴展加入簡易上傳對話框以提升便利性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q5, B-Q7, C-Q2

Q12: 什麼是 HTML 標籤插入？

• A簡: 透過程式在游標處寫入特定 HTML（如 ），達到所見即所得效果。
• A詳: HTML 插入是編輯器核心操作之一。前端會取用目前選取範圍/游標位置，依指令插入對應標籤字串，例如插入圖片標籤、加粗的 、或包裹連結。本文新增工具列即是將手動輸入標籤自動化，一鍵插入正確、合規的 HTML，減少手誤與格式不一致。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q4, B-Q2, C-Q3

Q13: 為什麼手動在原始碼模式加 tag 麻煩？

• A簡: 需記憶語法與屬性，切換頻繁易中斷心流，且容易拼寫錯誤。
• A詳: 手動輸入標籤需同時考慮路徑、alt、寬高、樣式等，對頻繁插圖/表情情境負擔很高。來回切換模式打斷寫作節奏，易發生漏引號、路徑錯等低級錯誤。工具列按鈕能模板化這些細節，降低錯誤率並保持創作流暢。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q5, A-Q12, C-Q1

Q14: .TEXT 與 Community Server 的關係是什麼？

• A簡: .TEXT 為早期專案，後由 Telligent 整合與延伸為企業級的 Community Server。
• A詳: .TEXT 在 .NET 社群廣為採用，後續由 Telligent 團隊吸收其成果，整合論壇、相簿、部落格等多模組，形成 Community Server。對使用者而言，.TEXT 的經驗與擴充思路常可延續到 Community Server 或後續平台，包含編輯器客製化的作法。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q1, B-Q1, B-Q25

Q15: 直接改原始碼與用外掛方式有何差異？

• A簡: 改原始碼上手快但升級風險高；外掛化較穩健，需設計擴充點與介面。
• A詳: 直接改動內建編輯頁或控制項，可迅速上線；但未來升級易衝突、難併版。外掛/適配層需要事前設計（例如包裝 API、抽離腳本與樣式），開發較慢，但可降低版本更替的維護成本。本文採快速補強法，但也建議隔離改動，以保留升級彈性。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q17, B-Q21, C-Q8

Q16: FreeTextBox v1.6 與新版本差異是什麼？

• A簡: 新版擴充性、相容性、工具列客製與安全性更好；v1.6 功能較基礎。
• A詳: 後續版本（如 3.x）通常提供更完整的工具列配置、插圖對話框、API（如 InsertHtml）、跨瀏覽器改善與安全過濾選項。v1.6 雖可用，但在擴充點、官方支援與使用者體驗上較有限。若可升級，建議審視升級效益與相容性；否則採文中方式補強即可。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q11, B-Q21, D-Q8

Q17: 前端擴充與後端擴充有何差異？

• A簡: 前端改 UI/JS 快速見效；後端處理上傳、安全、儲存，影響資料正確性。
• A詳: 前端擴充如新增工具列、插入命令、樣式調整，開發快、風險小；但牽涉檔案上傳、XSS 過濾、路徑生成等，必須由後端負責，確保安全、規範與一致性。最佳作法是前後端分工清楚，前端專注插入與互動，後端提供穩健 API 與驗證。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q5, B-Q10, C-Q2

Q18: 為何自訂功能要考量相容性與升級？

• A簡: 避免未來升級覆蓋改動、API 更動破壞功能，降低維護成本與停機風險。
• A詳: 編輯器屬高變動元件，升級常帶來 API 與 DOM 結構改變。若自訂緊耦合於版本細節，未來升級將需大量重工。透過適配層、封裝自訂腳本、集中設定與樣式，能隔離變動面，讓升級僅更新底層實作，降低風險並縮短回歸測試時間。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q17, B-Q21, C-Q8

Q19: 允許插圖與表情插入的安全風險有哪些？

• A簡: 可能引入 XSS、惡意 URL、過大檔案或混合內容，需前後端雙重防護。
• A詳: 前端應限制來源、驗證 URL 格式、避免內聯事件；後端需白名單過濾 HTML 標籤與屬性、驗證上傳副檔名與大小、正規化路徑與 MIME、過濾 data: 等危險方案，並考慮 CSP/HTTPS。審核與日誌也有助追蹤問題與強化防護。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q10, C-Q6, D-Q3

Q20: 相對路徑與絕對路徑的差異是什麼？

• A簡: 相對路徑依賴當前頁位置；絕對路徑全域明確，跨頁與搬站較穩定。
• A詳: 相對路徑（如 ../images/a.png）輕量但易受目錄結構影響；絕對路徑（如 https://site/img/a.png）穩定、可跨頁與外站引用，但在不同環境需調整網域。本文中插圖/表情建議使用應用程式根目錄（如 /images/…）或可配置的基底 URL，以兼顧可攜性與穩定性。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, C-Q7, D-Q1

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

Q1: .TEXT 如何整合 FreeTextBox？

• A簡: 以 Web Forms 控制項嵌入貼文頁，前端編輯，回傳 HTML 存入資料庫。
• A詳: 技術原理說明：.TEXT 的文章編輯頁為 ASP.NET Web Forms，載入 FreeTextBox 控制項。關鍵流程：頁面載入初始化控制項與工具列；使用者編輯後 PostBack；伺服器端以 Request 取回 HTML 串，做必要清洗與儲存。核心組件：編輯頁 .aspx、FreeTextBox 控制項、資料存取層、HTML 過濾器（若有）。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q1, A-Q3, B-Q2

Q2: FreeTextBox 的運作機制是什麼？

• A簡: 伺服器控制項輸出可編輯區與工具列，JS 處理命令，產生 HTML 回傳。
• A詳: 技術原理：伺服器端渲染 contentEditable/iframe 與工具列 DOM，載入內建腳本負責命令調用。關鍵步驟：初始化編輯區、綁定按鈕事件、維護模式切換（設計/原始碼）、同步隱藏欄位值。核心組件：Toolbar 命令、選取/插入 API、模式切換器、同步機制（HiddenField）。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q4, B-Q4, B-Q9

Q3: 自訂工具列按鈕的擴充原理是什麼？

• A簡: 透過自訂按鈕綁定 JS 命令，在游標位置插入 HTML 或開啟對話框。
• A詳: 技術原理：新增按鈕 DOM 並綁定事件，呼叫編輯器提供的 API（或使用 document.execCommand/選取範圍）插入內容。流程：定義按鈕 → 綁定 click → 取得選取/游標 → 組出 HTML → 插入 → 更新狀態。核心組件：按鈕樣式、事件處理器、插入函式、錯誤處理與焦點管理。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q8, C-Q1, C-Q3

Q4: 在游標位置插入 HTML 的機制是什麼？

• A簡: 依瀏覽器使用選取範圍 API 或 execCommand，在焦點處貼入字串。
• A詳: 技術原理：IE 早期使用 document.selection/createRange().pasteHTML；標準瀏覽器可用 window.getSelection 與 Range.insertNode 或 execCommand(‘insertHTML’/’insertImage’)。流程：確保編輯區聚焦 → 取得選取 → 插入節點或執行命令 → 正常化游標位置。核心組件：Selection/Range、命令列 API、錯誤與相容處理。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q12, B-Q2, C-Q3

Q5: 插入圖片功能的執行流程為何？

• A簡: 取得 URL/屬性，驗證後在游標處插入 ，必要時提供上傳流程。
• A詳: 技術原理：以對話框蒐集 URL、alt、寬高；或上傳後回傳路徑。關鍵步驟：開啟對話 → 驗證（副檔名/長度）→ 聚焦編輯區 → 插入 → 同步內容。核心組件：對話 UI、驗證模組、插入函式、可設定的基底路徑（避免相對路徑錯誤）。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q11, C-Q2, D-Q1

Q6: 表情符號選單背後的機制是什麼？

• A簡: 顯示可選圖示清單，點選後插入預設路徑與 alt 的 標籤。
• A詳: 技術原理：表情面板以格狀清單呈現，圖示資源來自固定目錄。流程：開面板 → 點選圖 → 取得對應路徑與文字 → 聚焦 → 插入。核心組件：資源表（名稱與路徑映射）、面板 UI、插入函式、快取策略（HTTP Cache/ETag）。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q10, C-Q3, D-Q9

Q7: 圖片資源管理與路徑解析原理是什麼？

• A簡: 統一基底路徑與資源目錄，避免相對路徑出錯並利於搬遷與快取。
• A詳: 技術原理：以應用程式根目錄或可設定 BaseUrl 產生絕對/根相對路徑。步驟：定義資源目錄（如 /images/smiles）→ 設置 URL 生成器 → 插入時套用 → 前端顯示。核心組件：路徑設定、URL Helper、快取控制（Cache-Control/Expires）、存取權限與 CDN 介接（若有）。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q20, C-Q7, D-Q1

Q8: .TEXT 編輯頁的生命週期與狀態管理如何設計？

• A簡: 頁面載入初始化控制項，PostBack 時讀取與清洗 HTML，並維持模式狀態。
• A詳: 技術原理：Page_Load 綁定資料/控制項，首次載入設預設模式；PostBack 驗證表單，讀取編輯器值，執行 HTML 安全處理後儲存。流程：Init → Load（首次/回傳）→ 驗證 → 儲存/顯示結果。核心組件：ViewState/HiddenField、模式切換旗標、伺服器端過濾器。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q1, B-Q9, B-Q10

Q9: 切換 WYSIWYG 與原始碼模式的機制是什麼？

• A簡: 以旗標切換視圖，轉換 HTML 與文字顯示，保持內容同步一致。
• A詳: 技術原理：模式切換時，將編輯區內容序列化到隱藏欄位；原始碼模式顯示文字區域，WYSIWYG 模式載入 HTML。流程：點按切換 → 保存目前值 → 切換 DOM 與樣式 → 回填內容。核心組件：模式管理器、內容同步器、HTML/文字轉換器（避免雙重編碼）。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q5, B-Q2, D-Q7

Q10: HTML 內容安全處理（Sanitization）的原理是什麼？

• A簡: 以白名單過濾允許的標籤/屬性，移除危險腳本與協定，防 XSS。
• A詳: 技術原理：伺服器端採白名單策略，僅允許安全標籤（如 p, img, a）與安全屬性（如 href、src、alt），並過濾 on* 事件與 javascript:data: 協定。流程：接收輸入 → 解析 DOM → 過濾/正規化 → 重組輸出。核心組件：HTML 解析器、規則引擎、日誌與告警（攔截異常負載）。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q19, C-Q6, D-Q3

Q11: 版本差異如何影響擴充點設計？

• A簡: API 與 DOM 結構變動會破壞自訂碼，需藉封裝與適配層降低耦合。
• A詳: 技術原理：不同版本的編輯器在工具列 API、選取操作、事件名稱常有差異。流程：識別版本 → 定義統一介面 → 以適配器對應實作 → 在業務層呼叫抽象方法。核心組件：版本偵測、適配器模式、回歸測試用例，確保升級時風險可控。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q16, B-Q21, D-Q8

Q12: 新增第二排工具列的 UI 佈局原理是什麼？

• A簡: 以容器分組與樣式控制排版，維持按鈕一致性與可延展空間。
• A詳: 技術原理：在編輯器上方/下方加一個工具列容器，使用 CSS 行內區塊或彈性盒排版。流程：建立容器 → 放入按鈕 → 套用樣式（間距/hover）→ 綁定事件。核心組件：容器 DOM、CSS 類別、按鈕模板、相容舊版瀏覽器的降級策略（如 table 佈局）。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q9, B-Q3, C-Q1

Q13: 編輯器快捷鍵與命令對映的機制？

• A簡: 監聽鍵盤事件，映射到命令或插入函式，提高操作效率。
• A詳: 技術原理：綁定 keydown/keypress，判斷組合鍵（如 Ctrl+B）觸發命令或插入。流程：註冊監聽 → 過濾輸入 → 執行命令 → 阻止預設行為（必要時）。核心組件：鍵盤映射表、命令執行器、焦點管理與可達性考量（ARIA 提示）。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q2, B-Q3, C-Q5

Q14: 跨瀏覽器相容性需考量什麼？

• A簡: 選取 API、命令支援、CSS 差異與事件模型，需提供分支與降級。
• A詳: 技術原理：IE 與標準瀏覽器（早期 Gecko/WebKit）在 selection、execCommand 行為不同。流程：偵測瀏覽器 → 分支執行插入 → 測試回歸。核心組件：相容層（封裝插入/聚焦）、樣式重置、Polyfill/降級策略，確保主要功能在各環境可用。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, C-Q9, D-Q5

Q15: 表情符號資產的載入策略為何？

• A簡: 靜態檔案設長快取，精靈圖或雪碧合併減請求，命名雜湊防快取汙染。
• A詳: 技術原理：以 Cache-Control/ETag 提升快取效益；多圖可合併雪碧圖並以背景定位；或使用 HTTP/2 直接多檔快取。流程：打包資源 → 設定快取 → 引用路徑 → 驗證載入效能。核心組件：資產打包器、版本雜湊、CDN（選用）與回退圖示策略。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: C-Q7, D-Q9, B-Q7

Q16: 國際化與在地化如何影響編輯器擴充？

• A簡: 文字、日期、RTL 方向與資源路徑需在地化，表情描述也要本地語意。
• A詳: 技術原理：使用資源檔與文化識別碼控制 UI 文案、說明與提示；RTL 語系需調整佈局方向；表情 alt/ARIA 說明應在地化。流程：定義資源 → 依文化載入 → 驗證顯示。核心組件：資源管理器、文化切換器、路徑/網域在地化設定。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q3, D-Q10, B-Q12

Q17: 依賴管理與原始碼分離的原理是什麼？

• A簡: 將自訂 JS/CSS 與核心程式分離，透過封裝與版本化降低耦合。
• A詳: 技術原理：以獨立檔案與命名空間封裝自訂邏輯，避免直接改動第三方核心。流程：抽出共用函式 → 建適配器 → 引用於頁面 → 設定載入順序。核心組件：封裝層、自訂事件匯流排、版本註記與 Changelog，利於升級與回滾。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q15, B-Q21, C-Q8

Q18: 如何設計可測試的編輯器擴充？

• A簡: 抽象可插入點，撰寫單元/端到端測試，覆蓋插入、切換與錯誤處理。
• A詳: 技術原理：將插入與 UI 事件分離，使用依賴注入/介面注入，便於替身測試。流程：撰寫單元測試（插入函式）、整合測試（對話框）與 E2E（瀏覽器自動化）。核心組件：測試框架、模擬 Selection、CI 回歸管線與快照校驗。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: B-Q4, C-Q1, D-Q7

Q19: 如何收集遙測以評估擴充成效？

• A簡: 追蹤按鈕使用率、錯誤率與完成率，量化體驗與迭代方向。
• A詳: 技術原理：前端事件打點（如插圖/表情點擊）、錯誤捕捉與用時統計；後端聚合與看板可視化。流程：定義 KPI → 加入打點 → 匯出分析。核心組件：事件匯流排、錯誤日誌、儀表板（如 Grafana/Power BI），用數據驗證改動價值。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: C-Q9, D-Q5, B-Q12

Q20: 上傳安全與內容安全政策（CSP）的原理？

• A簡: 嚴格檔案驗證與白名單來源，CSP 約束圖片/腳本來源防注入。
• A詳: 技術原理：伺服器端驗副檔名/MIME/大小，隔離上傳目錄，生成安全 URL；CSP 限定 img-src/script-src 來源並禁用 inline。流程：規範上傳 → 發佈 URL → 設 CSP 標頭 → 監控違規。核心組件：上傳處理器、CSP 設定、報表端點與審計日誌。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q19, C-Q2, D-Q3

Q21: 如何規劃升級路徑與適配層？

• A簡: 以抽象介面封裝編輯器操作，替換底層時僅改適配器即可。
• A詳: 技術原理：定義 IEditorAdapter（插入 HTML、切換模式、焦點），各版本提供實作。流程：識別版本 → 載入對應 Adapter → 以抽象呼叫功能。核心組件：介面層、版本偵測器、注入容器，保證擴充與升級互不干擾。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q18, B-Q11, D-Q8

Q22: 部署與回滾機制如何設計？

• A簡: 版本化資源、環境變數控制開關，出錯可快速回退穩定版。
• A詳: 技術原理：以版本號命名 JS/CSS，啟用功能旗標控制新工具列；出現問題時關閉旗標或回切舊資源。流程：打包 → 發佈 → 驗證 → 監控 → 回滾（若需）。核心組件：CDN/伺服器快取、Feature Toggle、回滾腳本與發佈清單。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: C-Q8, D-Q6, D-Q8

Q23: 授權與相容性需注意什麼？

• A簡: 遵循 FreeTextBox 與 .TEXT 授權，表情圖示來源須合法可再散布。
• A詳: 技術原理：第三方元件通常具特定授權條款（GPL/MIT/商用），需遵守分發規範；圖示需有商用或再散布授權。流程：確認授權 → 標註出處 → 保存授權檔。核心組件：授權清單、相容政策、版權標識與審核流程。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: C-Q7, C-Q8, D-Q9

Q24: 用截圖做變更管理與知識傳承的價值？

• A簡: 快速佐證改動成果、降低交接成本，便於需求確認與教學。
• A詳: 技術原理：以前後對照截圖展示 UI 差異，輔以簡述與版本資訊，形成變更日誌。流程：實作 → 截圖 → 記錄 → 分享。核心組件：截圖檔、變更說明、知識庫頁面，有助利害關係人同步與日後維運。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: A-Q21, C-Q10, D-Q5

Q25: 與現代編輯器（TinyMCE/CKEditor）相比差異為何？

• A簡: 現代編輯器外掛生態成熟、內建插圖與表情，擴充 API 更完備穩定。
• A詳: 技術原理：現代編輯器提供模組化外掛、事件系統、文件完善與更佳跨瀏覽器相容；內建圖片上傳/管理、表情面板、安全過濾與國際化。FreeTextBox v1.6 需較多客製。若維運成本高或需進階功能，評估替換為現代解決方案可降低技術債。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: A-Q16, B-Q21, C-Q4

Q&A 類別 C: 実作應用類（10題）

Q1: 如何在 .TEXT 中新增第二排工具列（插圖/表情）？

• A簡: 在編輯頁加一容器放自訂按鈕，綁定 JS 於游標插入 HTML，並套用一致樣式。
• A詳: 具體步驟：1) 在編輯頁（.aspx）於 FreeTextBox 上方新增 div.tools-row；2) 放入兩按鈕「插入圖片」「表情面板」；3) 綁定 JS 事件，呼叫自訂插入函式；4) 加入樣式確保排版。程式碼片段：

  <div class="tools-row">
    <button onclick="openImageDlg()">插入圖片</button>
    <button onclick="toggleSmiley()">表情</button>
  </div>
  

  注意事項：確保焦點回到編輯區；採用根相對路徑；封裝 JS 以便升級維護。

• 難度: 初級
• 學習階段: 核心
• 關聯概念: B-Q3, B-Q12, C-Q3

Q2: 如何實作「插入圖片」對話框並插入 ？

• A簡: 建一簡易輸入 URL 的對話框，驗證後以選取 API/execCommand 插入圖片。
• A詳: 步驟：1) 以 modal/prompt 收集 URL、alt；2) 驗證副檔名/MIME；3) 聚焦編輯區；4) 插入 。程式碼：

  function insertImg(edId,u,alt){
    const ed=/*取得編輯區*/; ed.focus();
    if(document.selection){document.selection.createRange()
      .pasteHTML('<img src="'+u+'" alt="'+alt+'">');}
    else{document.execCommand('insertImage',false,u);}
  }
  

  注意：處理 HTTPS、相對/絕對路徑、錯誤提示；上傳需求則另建後端上傳 API。

• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, B-Q5, D-Q1

Q3: 如何新增表情面板並插入圖示？

• A簡: 準備表情清單與路徑，顯示點選面板，點擊後在游標處插入對應 。
• A詳: 步驟：1) 定義表情陣列[{name,src,alt}]；2) 生成面板格狀列表；3) click 事件呼叫 insertHtml；4) 面板點擊後自動關閉。程式碼：

  const smiles=[{n:'笑',s:'/images/smiles/teeth_smile.gif'}];
  function pickSmile(i){insertHtml('<img src="'+smiles[i].s+'" alt="'+smiles[i].n+'">');}
  

  注意：資產快取、路徑一致、ARIA 可達性、國際化 alt 文案。

• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q6, B-Q15, D-Q9

Q4: 如何設定 FreeTextBox 的工具列配置（或兼容舊版）？

• A簡: 新版可用 ToolbarLayout，自訂項目；舊版以自加外部工具列容器兼容。
• A詳: 步驟：1) 若版本支援，設定 ToolbarLayout 字串插入自訂命令；2) 不支援時，外部新增工具列 DOM 與 JS 事件。示例：

  <ftb:FreeTextBox ID="Editor" runat="server" ToolbarLayout="Bold,Italic,InsertLink"/>
  

  注意：確認版本可用 API；對舊版以外部工具列避免修改核心程式碼，利於升級。

• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q16, B-Q3, B-Q12

Q5: 如何優化模式切換與焦點管理？

• A簡: 切換前保存內容與選取範圍，切換後回填並將焦點定位至原游標。
• A詳: 步驟：1) 切換前序列化內容與 Range；2) 切換 DOM；3) 回填 HTML/文字；4) 還原選取。程式碼（概念）：

  const sel=saveRange(); toggleMode(); restoreRange(sel);
  

  注意：避免雙重編碼；在 IE 與現代瀏覽器提供不同保存策略；確保 HiddenField 同步。

• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q9, B-Q4, D-Q7

Q6: 如何在伺服器端清洗 HTML 防 XSS？

• A簡: 實作白名單過濾，保留安全標籤/屬性，移除危險協定與事件屬性。
• A詳: 步驟：1) 使用 HTML 解析器（如 HTML Agility Pack/AntiXSS）解析；2) 白名單過濾標籤與屬性；3) 過濾 javascript:/data:；4) 重新輸出。程式碼（概念）：

  Sanitize(html, allowTags, allowAttrs)
  

  注意：維持 alt 屬性、允許必要的 img/a 屬性；保留換行結構；記錄日誌以便追蹤。

• 難度: 高級
• 學習階段: 進階
• 關聯概念: B-Q10, D-Q3, A-Q19

Q7: 如何部署表情與圖片資源並設定快取？

• A簡: 放置於固定目錄，設 Cache-Control/ETag，版本化檔名避免汙染。
• A詳: 步驟：1) 建立 /images/smiles 目錄；2) 設定伺服器快取標頭；3) 引用路徑統一由配置產生；4) 上線檢查 200/304 命中率。程式碼（IIS web.config 範例）：

  <staticContent>…</staticContent>
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00"/>
  

  注意：HTTPS 與 CDN 相容；避免過度快取導致更新不生效，透過檔名雜湊解決。

• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q15, B-Q7, D-Q1

Q8: 如何以版本控制管理 .TEXT 的客製化修改？

• A簡: 將自訂 JS/CSS 與頁面改動獨立提交，撰寫變更說明與回滾點。
• A詳: 步驟：1) 建立 Git/SVN 儲庫；2) 自訂資源獨立目錄；3) 提交訊息明確記錄目的與影響；4) 打標籤做釋出版；5) 定義回滾流程。注意：避免直接改第三方核心；用適配層與設定檔驅動；維護升級對照表。
• 難度: 初級
• 學習階段: 核心
• 關聯概念: A-Q15, B-Q17, B-Q22

Q9: 如何測試跨瀏覽器的相容性？

• A簡: 建立測試清單，涵蓋插入、切換、上傳、撤銷，於主要瀏覽器逐一驗證。
• A詳: 步驟：1) 列出關鍵場景（插圖、表情、切換模式、複製貼上）；2) 於目標瀏覽器（含舊版 IE 若必要）測試；3) 修正選取/命令差異；4) 回歸自動化（可用 Selenium）。注意：記錄已知限制與替代方案，確保核心任務路徑可用。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q14, B-Q18, D-Q5

Q10: 如何以截圖快速文件化自訂功能？

• A簡: 截取前後差異與操作步驟，附版本與日期，存入知識庫便於傳承。
• A詳: 步驟：1) 截取新增工具列與操作範例；2) 標註說明與版本；3) 存放至專案 Wiki/KB；4) 對外公告更新。注意：同步程式碼連結與設定位置；定期更新截圖避免過期資訊；搭配影片更直觀。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q24, A-Q21, D-Q5

Q&A 類別 D: 問題解決類（10題）

Q1: 插入的圖片不顯示怎麼辦？

• A簡: 多為路徑錯誤或權限問題；檢查 URL、相對/絕對路徑與靜態資源存取。
• A詳: 症狀：插入後顯示破圖。可能原因：相對路徑錯、網域/協定不符、檔案不存在、靜態目錄無讀取權。解決：用瀏覽器開圖 URL 驗證；改用根相對或絕對路徑；確認 /images 權限與部署；避免混合內容（HTTPS 網頁載入 HTTP 圖）。預防：統一路徑產生器與發佈流程，設快取與健康檢查。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q7, A-Q20, C-Q7

Q2: 表情按鈕按了沒反應怎麼排查？

• A簡: 先檢查 JS 錯誤、焦點是否在編輯區、函式與選取 API 是否可用。
• A詳: 症狀：點擊無插入。原因：JS 例外、未聚焦、選取 API 不兼容、面板遮罩攔截事件。解決：開發者工具看錯誤；點擊前呼叫 editor.focus()；分支處理 IE/標準瀏覽器插入；調整 z-index。預防：封裝插入 API、加錯誤提示與單元測試覆蓋。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q4, C-Q3, B-Q14

Q3: 存檔後內容被過濾或 XSS 警示如何處理？

• A簡: 調整伺服器端白名單，允許安全 img/a 屬性，並移除危險協定。
• A詳: 症狀： 被移除或連結失效。原因：過嚴過濾或危險屬性被攔；惡意 payload 觸發警示。解決：檢視 Sanitizer 設定，允許 src/alt/width/height；封鎖 javascript:/data:；加 log 調查案例。預防：建立測試樣本、版本管控過濾規則、教育使用者不要貼未知 HTML。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: B-Q10, C-Q6, A-Q19

Q4: 工具列樣式跑版或疊到編輯區怎麼辦？

• A簡: 檢查容器樣式、寬度與浮動，使用一致的按鈕 CSS 與排版策略。
• A詳: 症狀：新工具列與原工具列重疊、換行不正常。原因：CSS 衝突、寬度未限制、定位不當。解決：獨立命名空間樣式、設定 display/overflow、使用 flex 或 table 固定列高；檢查 box-sizing。預防：建立樣式基準檔、跨頁測試、避免硬編 px 導致溢出。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q12, C-Q1, C-Q9

Q5: 編輯器腳本錯誤導致無法載入怎麼處理？

• A簡: 確認腳本載入順序、版本相容與瀏覽器相容性，逐一排除。
• A詳: 症狀：編輯器不顯示或工具列無法使用。原因：JS 檔遺失、版本不匹配、相依未載。解決：檢查 Network 載入、調整 Script 引用順序、鎖定已知可用版本；於舊 IE 採取降級策略。預防：Bundle/Minify 與完整發佈清單、E2E 冒煙測試。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q2, B-Q14, C-Q9

Q6: 上傳圖片失敗或無法寫入目錄？

• A簡: 多為權限不足或大小限制；設定目錄權限與伺服器端驗證規則。
• A詳: 症狀：上傳回傳錯誤或無檔案。原因：IIS 寫入權限不足、超出大小限制、檔名非法。解決：設定目錄寫入權、調整 maxRequestLength；正規化檔名與 MIME 檢查。預防：提供清楚錯誤訊息與限制提示，記錄上傳日誌便於追蹤。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: A-Q11, B-Q20, C-Q2

Q7: 切換模式後內容或游標位置遺失怎麼辦？

• A簡: 缺乏同步或還原選取；實作保存/還原內容與選取的機制。
• A詳: 症狀：切回 WYSIWYG 後游標跑到文首或內容變形。原因：未保存 Range、雙重編碼、DOM 重建。解決：切換前保存選取與內容，切換後還原；避免重複 HTML Encode。預防：建立切換測試用例，封裝統一切換流程與錯誤處理。
• 難度: 中級
• 學習階段: 核心
• 關聯概念: B-Q9, C-Q5, B-Q18

Q8: 升級 FreeTextBox 後自訂按鈕失效如何應對？

• A簡: 檢查 API/DOM 變更，更新適配層；短期以功能旗標退回穩定版。
• A詳: 症狀：升級後插入無效或事件不觸發。原因：方法名稱/參數改變、DOM 結構不同。解決：對照新版文件，更新 Adapter 與事件綁定；暫時關閉新功能旗標回退。預防：升級前做 PoC 與差異比對，維護版本矩陣與回歸測試。
• 難度: 高級
• 學習階段: 進階
• 關聯概念: A-Q16, B-Q11, B-Q21

Q9: 表情大量使用導致頁面卡頓怎麼優化？

• A簡: 精靈圖/快取、惰性載入或減少 DOM；必要時改為短碼轉換。
• A詳: 症狀：含多表情文章載入慢。原因：多 HTTP 請求、DOM 過多。解決：合併圖或 HTTP/2、設長快取；面板圖片 Lazy Load；限制同篇插入數；或以短碼渲染時轉 。預防：資產最佳化流程與效能基準測試。
• 難度: 中級
• 學習階段: 進階
• 關聯概念: B-Q15, C-Q7, A-Q10

Q10: 表情文字說明未在地化如何修正？

• A簡: 將 alt/ARIA 文案抽到資源檔，依文化設定載入對應語言。
• A詳: 症狀：不同語系顯示中文/英文混用。原因：文案硬編於程式。解決：建立資源檔（Resx/JSON），以語系鍵載入；面板依瀏覽文化切換。預防：規範所有 UI 文案皆走資源檔，加入語系回歸測試。
• 難度: 初級
• 學習階段: 基礎
• 關聯概念: B-Q16, C-Q3, B-Q12

學習路徑索引

• 初學者：建議先學習哪 15 題
  • A-Q1: 什麼是 .TEXT？
  • A-Q3: 什麼是 FreeTextBox？
  • A-Q4: 什麼是所見即所得（WYSIWYG）編輯器？
  • A-Q5: WYSIWYG 與 HTML 原始碼模式有何差異？
  • A-Q6: .TEXT 內建 FreeTextBox v1.6 的限制是什麼？
  • A-Q7: 為何需要插入圖片與表情符號功能？
  • A-Q8: 什麼是編輯器的工具列（Toolbar）？
  • A-Q9: 增加第二排工具列的價值是什麼？
  • A-Q11: 插入圖片與上傳圖片有何差異？
  • A-Q12: 什麼是 HTML 標籤插入？
  • C-Q1: 如何新增第二排工具列？
  • C-Q3: 如何新增表情面板並插入圖示？
  • D-Q1: 插入的圖片不顯示怎麼辦？
  • D-Q2: 表情按鈕沒反應怎麼排查？
  • C-Q10: 如何以截圖快速文件化自訂功能？
• 中級者：建議學習哪 20 題
  • B-Q1: .TEXT 如何整合 FreeTextBox？
  • B-Q2: FreeTextBox 的運作機制是什麼？
  • B-Q3: 自訂工具列按鈕的擴充原理是什麼？
  • B-Q4: 在游標位置插入 HTML 的機制是什麼？
  • B-Q5: 插入圖片功能的執行流程為何？
  • B-Q6: 表情符號選單背後的機制是什麼？
  • B-Q7: 圖片資源管理與路徑解析原理？
  • B-Q9: 切換 WYSIWYG 與原始碼模式的機制？
  • B-Q12: 新增第二排工具列的 UI 佈局原理？
  • B-Q14: 跨瀏覽器相容性需考量什麼？
  • C-Q2: 如何實作「插入圖片」對話框？
  • C-Q4: 如何設定 FreeTextBox 工具列配置？
  • C-Q5: 如何優化模式切換與焦點管理？
  • C-Q7: 如何部署資源並設定快取？
  • C-Q8: 如何以版本控制管理客製化？
  • C-Q9: 如何測試跨瀏覽器相容性？
  • D-Q4: 工具列樣式跑版怎麼辦？
  • D-Q5: 腳本錯誤導致無法載入怎處理？
  • D-Q6: 上傳圖片失敗如何排查？
  • A-Q20: 相對路徑與絕對路徑的差異？
• 高級者：建議關注哪 15 題
  • A-Q15: 改原始碼與外掛方式差異？
  • A-Q16: FreeTextBox v1.6 與新版本差異？
  • A-Q18: 為何自訂功能要考量升級？
  • A-Q19: 允許插圖與表情的安全風險？
  • B-Q10: HTML 內容安全處理原理？
  • B-Q11: 版本差異如何影響擴充點？
  • B-Q15: 表情資產載入策略？
  • B-Q16: 國際化與在地化擴充？
  • B-Q17: 依賴管理與原始碼分離原理？
  • B-Q18: 如何設計可測試擴充？
  • B-Q20: 上傳安全與 CSP 原理？
  • B-Q21: 升級路徑與適配層？
  • B-Q22: 部署與回滾機制？
  • B-Q25: 與現代編輯器比較差異？
  • D-Q8: 升級後自訂按鈕失效如何應對？