UEditor 1.2.6 PHP 版本完整接入指南：配置、上傳路徑修正、前端提交演示

百度 UEditor 1.2.6 PHP 版接入全流程：下載、目錄結構、關鍵配置修正（UEDITOR_HOME_URL）、上傳路徑設置、前端表單提交演示、常見坑點排查。

下載與目錄結構

1. 官網下載：UEditor PHP 版（可自定義功能精簡包）；
2. 解壓到項目 Web 目錄，如 /var/www/html/ueditor/；
3. 結構：

ueditor/
├── ueditor.config.js      # 核心配置
├── ueditor.all.js         # 合並後 JS
├── ueditor.parse.js       # 僅解析輸出用
├── themes/
│   └── default/css/ueditor.css
├── php/
│   ├── controller.php     # 統一入口
│   ├── config.json        # 上傳/列表/抓遠程配置
│   └── action_*.php       # 各功能實現
└── third-party/           # 第三方庫

關鍵配置修正：UEDITOR_HOME_URL

默認自動檢測失敗時，需在 ueditor.config.js 頭部手動指定：

// ueditor.config.js 第 1 行插入
window.UEDITOR_HOME_URL = '/ueditor/'; // 絕對路徑，結尾必須有 /

// 原有自動檢測代碼保留在下方
var URL = window.UEDITOR_HOME_URL || (function(){ ... })();

• 必須為 站點根目錄下的相對路徑，如 /ueditor/、/static/ueditor/；
• 結尾 必須有斜杠；
• 修正後圖片上傳、遠程抓取、視頻上傳等依賴路徑的功能恢復正常。

上傳配置：php/config.json

{
  "imageActionName": "uploadimage",
  "imageFieldName": "upfile",
  "imageMaxSize": 2048000,
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp"],
  "imageCompressEnable": true,
  "imageCompressBorder": 1600,
  "imageInsertAlign": "none",
  "imageUrlPrefix": "",          // 圖片訪問前綴（如 CDN 域名）
  "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

  "scrawlActionName": "uploadscrawl",
  "scrawlFieldName": "upfile",
  "scrawlMaxSize": 2048000,
  "scrawlPathFormat": "/ueditor/php/upload/scrawl/{yyyy}{mm}{dd}/{time}{rand:6}",

  "catcherActionName": "catchimage",
  "catcherFieldName": "source",
  "catcherMaxSize": 2048000,
  "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
  "catcherPathFormat": "/ueditor/php/upload/catcher/{yyyy}{mm}{dd}/{time}{rand:6}",

  "videoActionName": "uploadvideo",
  "videoFieldName": "upfile",
  "videoMaxSize": 102400000,
  "videoAllowFiles": [".mp4", ".webm", ".ogg", ".flv"],
  "videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",

  "fileActionName": "uploadfile",
  "fileFieldName": "upfile",
  "fileMaxSize": 51200000,
  "fileAllowFiles": [".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".zip", ".rar"],
  "filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",

  "imageManagerActionName": "listimage",
  "imageManagerListPath": "/ueditor/php/upload/image/",
  "imageManagerListSize": 20,
  "imageManagerUrlPrefix": "",

  "fileManagerActionName": "listfile",
  "fileManagerListPath": "/ueditor/php/upload/file/",
  "fileManagerListSize": 20,
  "fileManagerUrlPrefix": ""
}

• imagePathFormat 等路徑：相對站點根目錄，PHP 端會自動拼接 $_SERVER['DOCUMENT_ROOT']；
• 確保 upload/ 目錄可寫（chmod 755、所有者 www-data）；
• imageUrlPrefix 留空表示相對路徑，配置 CDN 時填 https://cdn.example.com。

前端完整接入演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>UEditor 1.2.6 演示</title>
  <script src="/ueditor/ueditor.config.js"></script>
  <script src="/ueditor/ueditor.all.js"></script>
  <link rel="stylesheet" href="/ueditor/themes/default/css/ueditor.css">
</head>
<body>
  <h2>文章發布</h2>
  <form id="postForm" method="post" action="/submit.php">
    <script name="content" id="editor" type="text/plain">
      <p>歡迎使用 UEditor！</p>
    </script>
    <button type="submit">發布文章</button>
  </form>

  <script>
    // 實例化編輯器
    const ue = UE.getEditor('editor', {
      initialFrameHeight: 400,
      initialFrameWidth: '100%',
      toolbars: [[
        'fullscreen', 'source', '|',
        'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'forecolor', 'backcolor', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|',
        'insertorderedlist', 'insertunorderedlist', '|',
        'link', 'unlink', '|',
        'image', 'scrawl', 'insertvideo', 'attachment', '|',
        'table', '|', 'print', 'preview'
      ]]
    });

    // 1.2.6+ 自動同步內容到 textarea，無需手動 ue.sync()
    // 提交前可選驗證
    document.getElementById('postForm').addEventListener('submit', function(e) {
      const content = ue.getContent();
      if (!content || content === '<p><br/></p>') {
        alert('內容不能為空');
        e.preventDefault();
      }
    });

    // 獲取純文本字數
    // ue.getContentTxt().length
  </script>
</body>
</html>

PHP 端接收處理

<?php // submit.php
$content = $_POST['content'] ?? '';
// XSS 過濾（建議用 HTMLPurifier）
// $purifier = new HTMLPurifier();
// $clean = $purifier->purify($content);

// 入庫
$stmt = $pdo->prepare('INSERT INTO articles (content, created_at) VALUES (?, NOW())');
$stmt->execute([$content]);
echo '發布成功，ID: ' . $pdo->lastInsertId();

常見問題排查表

安全加固建議

1. 上傳類型白名單：config.json 嚴格限制 AllowFiles；
2. 文件大小限制：MaxSize + PHP upload_max_filesize、post_max_size 雙重限制；
3. 上傳目錄禁用腳本執行：Nginx location /ueditor/php/upload/ { location ~ \.php$ { deny all; } }；
4. 內容輸出過濾：前端 ue.getContent() 後端 HTMLPurifier 雙重防 XSS；
5. CSRF 保護：表單攜帶 Token，PHP 驗證。

UEditor 雖停止維護，但 1.2.6 版本穩定可用，配合正確配置能滿足大多數富文本編輯需求。