ECShop 後台編輯器更換為 UEditor 1.4.3 完整教學

前言

ECShop 預設使用 FCKeditor，已停止維護多年。本文記錄將後台編輯器升級為百度 UEditor 1.4.3（2015 年最終版）的完整步驟，含 jQuery 衝突修正與商品編輯儲存 Bug 修復。

準備工作

1. 下載 UEditor 1.4.3 完整包：官方下載頁
2. 下載 jQuery 衝突修正補丁包（含修改後的 config.json 上傳路徑設定）
3. 忽略 Mac 產生的 .DS_Store 檔案

安裝步驟

1. 上傳檔案至伺服器

# 解壓 UEditor 至
/includes/ueditor/

# 解壓修正補丁至
/includes/ueditor/fix_jquery/

2. 修改 /admin/includes/lib_main.php - 替換編輯器生成函式

找到 create_html_editor() 函式（約第 300 行），完整替換為：

<?php
/**
 * 生成編輯器
 * @param string $input_name  輸入框名稱
 * @param string $input_value 輸入框值
 */
function create_html_editor($input_name, $input_value = '')
{
    global $smarty;

    $kindeditor = "
    <script id='editor' name='$input_name' type='text/plain' style='width:1024px;height:500px;'>$input_value</script>
    <script charset='utf-8' src='../includes/ueditor/ueditor.config.js'></script>
    <script charset='utf-8' src='../includes/ueditor/ueditor.all.min.js'></script>
    <script>
        var ue = UE.getEditor('editor');
    </script>
    ";

    $smarty->assign('FCKeditor', $kindeditor);
}
?>

3. 修改 /admin/templates/pageheader.htm - 載入修正版 jQuery

找到：

{insert_scripts files="../js/transport.js,common.js,../js/utils.js"}

替換為：

<script src="../includes/ueditor/fix_jquery/jquery.min.js"></script>
<script src="../includes/ueditor/fix_jquery/jquery.json-1.3.js"></script>
<script src="js/common.js"></script>
<script src="../includes/ueditor/fix_jquery/transport_json.js"></script>
{insert_scripts files="../js/utils.js"}

4. 修復商品編輯頁編輯器內容無法儲存的 Bug

檔案：/admin/templates/goods_info.htm

找到：

document.forms['theForm'].reset();

註解掉：

// document.forms['theForm'].reset();

原因： 表單重置會清空 UEditor 的 iframe 內容，導致提交空值。

UEditor 關鍵配置調整

編輯 /includes/ueditor/php/config.json：

{
    "imagePathFormat": "/data/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlPathFormat": "/data/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "snapscreenPathFormat": "/data/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "catcherPathFormat": "/data/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoPathFormat": "/data/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
    "filePathFormat": "/data/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "imageManagerListPath": "/data/ueditor/php/upload/image/",
    "fileManagerListPath": "/data/ueditor/php/upload/file/"
}

確保上傳目錄可寫入：

chmod 777 /data/ueditor/php/upload/

常見問題排查

遷移後驗證清單

1. 商品編輯/新增：內容正常顯示、儲存、編輯
2. 文章/頁面編輯：同上
3. 圖片上傳、線上管理、插入功能正常
4. 前台顯示：HTML 結構完整、樣式正常
5. 資料庫 goods_desc、article_content 等欄位內容正確

完成上述步驟即可將 ECShop 後台編輯器現代化，獲得更好的使用體驗與相容性。建議定期檢查 UEditor 官方是否有安全性更新（雖 1.4.3 為最終版，但社群仍有維護分支）。