ASP.NET 整合百度 UEditor 富文本編輯器完整教學

認識 UEditor：輕量級所見即所得編輯器

UEditor 由百度 Web 前端研發部開發，遵循 BSD 開源協議，具備輕量、可深度定制、使用者體驗優異等特點。支援圖片上傳、程式碼高亮、截圖貼上、公式編輯等豐富功能，是 ASP.NET 專案嵌入富文本編輯的不二之選。

一、專案整合與目錄結構規劃

1. 核心檔案部署

下載官方 .NET 版開發包（需 .NET Framework 4.0+），解壓後保留關鍵目錄：

• ueditor.config.js：全域配置（工具欄、上傳路徑、圖片大小限制等）
• dialogs/：各功能彈窗模板（圖片、連結、表格等）
• lang/：多語言包（預設 zh-cn、en）
• themes/：外觀主題樣式
• third-party/：第三方插件（代碼高亮、截圖等）
• net/：伺服器端處理核心，僅需保留 controller.ashx 與 config.json

2. 伺服器端程式碼遷移

將 App_Code 目錄下的 C# 類別複製至專案 App_Code，並引用 Newtonsoft.Json.dll（bin 目錄）。修改 config.json 中的上傳儲存路徑（imagePath、filePath 等），確保 IIS 應用程式池身份具備寫入權限。

二、前端頁面引用與初始化

1. 必要腳本引入順序

<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.min.js"></script>
<script src="/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="/scripts/UEditorHelper.js"></script>

強制載入 zh-cn.js 避免自動語言偵測失敗；UEditorHelper.js 封裝常用方法（取值、設值、銷毀實例等）。

2. 編輯器實例化

在需編輯區域放置 <script type="text/plain" id="editor"></script>，並透過工廠方法建立實例：

var ue = UE.getEditor('editor', {
    autoHeightEnabled: false,
    initialFrameHeight: 400
});

三、AJAX 動態載入內容實戰

UEditor 不像 CKEditor 有伺服器端控件，需手動處理資料回填：

1. 頁面載入時取得文章 ID
2. 發起 AJAX 請求 GetArticleHandler.ashx 獲取內容
3. 回調中呼叫 ue.setContent(html) 注入編輯器

$.get('/handlers/GetArticle.ashx', { id: articleId }, function(html) {
    ue.ready(function() {
        ue.setContent(html);
    });
});

四、常見問題與最佳實踐

總結

透過標準化目錄部署、模組化 JS 封裝、AJAX 無縫資料綁定，UEditor 可完美融入 ASP.NET 專案。建議建立專案專屬 UEditorHelper.js 統一管理實例生命週期，降低維護成本。