百度 UEditor 在 PHP 項目中快速集成指南

UEditor 是百度開源的富文本編輯器，功能強大、中文支持好。本文記錄從下載、配置、前端調用、後端接收、數據入庫的完整集成流程，適合快速落地。

集成步驟

1. 下載與部署

• 官網：ueditor.baidu.com
• 下載 PHP 版（含後端處理類）
• 解壓到項目公共目錄，如 /public/ueditor/

2. 前端頁面引入

<!-- 容器：textarea 或 script 標籤 -->
<script id="editor" name="content" type="text/plain" style="width:100%;height:400px;">
    <p>初始內容...</p>
</script>

<!-- 配置文件 -->
<script src="/ueditor/ueditor.config.js"></script>
<!-- 編輯器核心 -->
<script src="/ueditor/ueditor.all.min.js"></script>

<!-- 實例化 -->
<script>
    var ue = UE.getEditor('editor', {
        toolbars: [[
            'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'forecolor', 'backcolor', '|',
            'justifyleft', 'justifycenter', 'justifyright', '|',
            'insertorderedlist', 'insertunorderedlist', '|',
            'link', 'unlink', '|',
            'image', 'video', 'attachment', '|',
            'fullscreen', 'preview'
        ]],
        // 圖片上傳配置
        imageUrl: "/ueditor/php/controller.php?action=uploadimage",
        imagePath: "/ueditor/php/",
        // 文件上傳配置
        fileUrl: "/ueditor/php/controller.php?action=uploadfile",
        filePath: "/ueditor/php/",
        // 截圖上傳
        snapscreenHost: location.hostname,
        snapscreenServerUrl: "/ueditor/php/controller.php?action=uploadscrawl"
    });
</script>

3. 後端配置 (ueditor.config.js 關鍵項)

window.UEDITOR_CONFIG = {
    // 服務器統一請求接口路徑
    serverUrl: "/ueditor/php/controller.php",
    
    // 工具欄配置 (根據需要精簡)
    toolbars: [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', '|',
        'forecolor', 'backcolor', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|',
        'insertorderedlist', 'insertunorderedlist', '|',
        'link', 'unlink', '|',
        'image', 'video', 'attachment', '|',
        'map', 'gmap', '|',
        'horizontal', 'print', 'preview', 'drafts'
    ]],
    
    // 圖片上傳
    imageActionName: 'uploadimage',
    imageFieldName: 'upfile',
    imageMaxSize: 2048000,  // 2MB
    imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
    imageCompressEnable: true,
    imageCompressBorder: 1600,
    imageInsertAlign: 'center',
    imageUrlPrefix: '',  // 圖片訪問路徑前綴
    imagePathFormat: '/uploads/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}',
    
    // 文件上傳
    fileActionName: 'uploadfile',
    fileFieldName: 'upfile',
    fileMaxSize: 10240000, // 10MB
    fileAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.zip', '.rar'],
    filePathFormat: '/uploads/ueditor/file/{yyyy}{mm}{dd}/{time}{rand:6}',
    
    // 涂鴉/截圖
    scrawlActionName: 'uploadscrawl',
    scrawlFieldName: 'upfile',
    scrawlMaxSize: 2048000,
    scrawlPathFormat: '/uploads/ueditor/scrawl/{yyyy}{mm}{dd}/{time}{rand:6}',
    
    // 列表圖片/文件 (圖片管理器)
    imageManagerActionName: 'listimage',
    imageManagerListPath: '/uploads/ueditor/image/',
    fileManagerActionName: 'listfile',
    fileManagerListPath: '/uploads/ueditor/file/',
};

4. PHP 接收入庫 (完整示例)

<?php
// sb_add.php - 設備檔案添加含富文本備注
require_once 'db.php';

$sb_name        = $_POST['sb_name'] ?? '';
$sb_numandtype  = $_POST['sb_numandtype'] ?? '';
$sb_home        = $_POST['sb_home'] ?? '';
$sb_usedate     = $_POST['sb_usedate'] ?? '';
$sb_address     = $_POST['sb_address'] ?? '';
$sb_remarks     = $_POST['sb_remarks'] ?? ''; // UEditor 內容 (含 HTML 標籤)
$sb_updatetime  = date('Y-m-d H:i:s');

// 基礎驗證
if (!$sb_name) die('設備名稱不能為空');

$stmt = $pdo->prepare("
    INSERT INTO shebeidangan 
    (sb_name, sb_numandtype, sb_home, sb_usedate, sb_address, sb_updatetime, sb_remarks)
    VALUES (?, ?, ?, ?, ?, ?, ?)
");

$stmt->execute([
    $sb_name, $sb_numandtype, $sb_home, $sb_usedate, 
    $sb_address, $sb_updatetime, $sb_remarks
]);

echo "ADD OK - ID: " . $pdo->lastInsertId();

5. 內容安全過濾 (重要！)

// 保存前過濾危險標籤/屬性
function cleanUEditorContent($html) {
    $config = HTMLPurifier_Config::createDefault();
    $config->set('HTML.AllowedElements', 'p,br,strong,em,u,strike,ul,ol,li,span,div,img,a,table,thead,tbody,tr,th,td,h1,h2,h3,h4,h5,h6,blockquote,pre,code');
    $config->set('HTML.AllowedAttributes', '*.style,*.class,a.href,a.target,img.src,img.alt,img.width,img.height,table.border,table.cellpadding,table.cellspacing');
    $config->set('URI.AllowedSchemes', ['http' => true, 'https' => true, 'mailto' => true]);
    $config->set('CSS.AllowedProperties', 'font-family,font-size,color,background-color,text-align,text-decoration,margin,padding,border,width,height');
    
    $purifier = new HTMLPurifier($config);
    return $purifier->purify($html);
}

// 使用
$sb_remarks = cleanUEditorContent($_POST['sb_remarks'] ?? '');

常見問題排查

字體大小自定義

編輯 ueditor.all.min.js 搜索「字體」或 fontsize：

// 修改默認字號列表
'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36],

// 修改字體列表
'fontfamily': [
    { val: 'songti', label: '宋體' },
    { val: 'yahei', label: '微軟雅黑' },
    { val: 'kaiti', label: '楷體' },
    { val: 'heiti', label: '黑體' },
    { val: 'arial', label: 'Arial' },
],

UEditor 雖停止維護，但在中文項目中仍是成熟穩定的選擇。新項目可考慮 WangEditor、TinyMCE 等現代替代品。