ASP.NET 使用 GKEditor 後 GridView 顯示混亂的自行解決記錄

問題

使用 GKEditor 儲存含圖片的內容，繫結至 asp:GridView 顯示時，頁面佈局嚴重錯亂 (圖片過大、浮動衝突)。

解決方案 (自行總結)

1. 限制編輯器輸出尺寸：在 GKEditor 設定中限制圖片最大寬度 (如 config.maxWidth = 600)。
2. GridView 欄位樣式控制：對顯示內容的 TemplateField 加上 CSS：
   .content-cell { max-width: 500px; word-wrap: break-word; overflow: hidden; }
3. 圖片響應式：在頁面全域 CSS 加入 img { max-width: 100%; height: auto; } 防止撐破容器。
4. HTML 清理：儲存前或顯示時，用 HtmlAgilityPack 或 Regex 移除編輯器產生的多餘 style、align 等屬性，只保留安全標籤。

心得

富文本編輯器輸出的 HTML 極其複雜，前端容器必須做好隔離與限制 (max-width, overflow, word-wrap)，才能在 GridView 等繼承式佈局中穩定顯示。