在 ASP.NET 中整合 HtmlArea 編輯器：完整安裝與配置指南

HtmlArea 是一款輕量級的 WYSIWYG 編輯器，純 JavaScript + HTML 實現，理論上可嵌入任何伺服器端平台。本文記錄如何在 ASP.NET 2.0 + AJAX 環境下整合 HtmlArea 3.0，並解決 UpdatePanel 部分更新後編輯器失效的問題。

安裝步驟

1. 下載 HtmlArea 3.0，解壓至專案目錄（如 /HtmlArea/）。
2. 語言檔 lang/gb.js 預設為 ANSI 編碼，若專案使用 UTF-8（預設），請用記事本另存為 UTF-8 格式。
3. 在頁面引入腳本並放置 TextBox 控件：

<script type="text/javascript"> _editor_url = "../HtmlArea/"; _editor_lang = "gb";</script>
<script type="text/javascript" src="../HtmlArea/htmlarea.js"></script>
<asp:TextBox ID="HtmlArea" CssClass="htmlarea" runat="server" TextMode="MultiLine" Height="200px" Width="100%" />

初始化編輯器（含 AJAX 環境）

在 Page_Load 中註冊啟動腳本，建立編輯器實例：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("var editor = null;");
        sb.Append("function initEditor() {");
        sb.Append("editor = new HTMLArea('" + ArticleBody1.FindControl("HtmlArea").ClientID + "');");
        sb.Append("editor.generate();}");
        sb.Append("document.body.onload = initEditor;");
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "HtmlAreaScript", sb.ToString(), true);
    }
}

解決 UpdatePanel 部分更新後編輯器失效

UpdatePanel 非同步回傳後，DOM 節點重建，需重新初始化：

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "HtmlAreaScript", "initEditor();", true);

將上述代碼放在觸發部分更新的事件（如按鈕點擊）中即可。

小結

HtmlArea 架構簡單、載入快、支援 AJAX，適合輕量級專案。若需更豐富功能，可考慮 CKEditor、TinyMCE 等現代編輯器。