百度 UEditor 圖片上傳後自定義樣式設置指南

百度 UEditor 圖片上傳後自定義樣式設置指南

在項目中使用 UEditor 富文本編輯器時，常遇到這個問題：上傳的圖片需要特定樣式，但表情圖片也是 <img> 標籤，全局 CSS 會誤傷表情顯示。解決思路是修改插件代碼，為上傳圖片添加專屬 class 標識。

修改方案概覽

需同步修改服務端（PHP）與客戶端（JavaScript）兩處代碼，實現「上傳返回 class → 前端渲染應用 class」的完整鏈路。

步驟一：修改服務端返回數據

文件路徑：php/Uploader.class.php 約第 337 行 getFileInfo() 方法

public function getFileInfo() {
    return array(
        "state" => $this->stateInfo,
        "url" => $this->fullName,
        "title" => $this->fileName,
        "original" => $this->oriName,
        "type" => $this->fileType,
        "class" => "custom-img-class",  // 新增 class 字段
        "size" => $this->fileSize,
    );
}

此修改使上傳成功的 JSON 響應包含 class 字段，前端可據此識別普通圖片與表情圖片。

步驟二：修改前端渲染邏輯

文件路徑：ueditor.all.js 約第 24461 行 callback 函數

function callback() {
    try {
        var link, json, loader,
            body = (iframe.contentDocument || iframe.contentWindow.document).body,
            result = body.innerText || body.textContent || '';
        json = (new Function("return " + result))();
        link = me.options.imageUrlPrefix + json.url;

        if (json.state == 'SUCCESS' && json.url) {
            loader = me.document.getElementById(loadingId);
            loader.setAttribute('src', link);
            loader.setAttribute('_src', link);
            // 關鍵：應用服務端返回的 class
            loader.setAttribute('class', json.class || '');
            loader.setAttribute('title', json.title || '');
            loader.setAttribute('alt', json.original || '');
            loader.removeAttribute('id');
            domUtils.removeClasses(loader, 'loadingclass');
        } else {
            showErrorLoader && showErrorLoader(json.state);
        }
    } catch (er) {
        showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
    }
    form.reset();
    domUtils.un(iframe, 'load', callback);
}

效果驗證

上傳圖片後，生成的 HTML 將包含自定義 class：

<img src="upload/xxx.jpg" class="custom-img-class" title="圖片標題" alt="原始文件名" />

此時即可在 CSS 中精準控制：

.custom-img-class {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 4px;
    border-radius: 4px;
}

/* 表情圖片無此 class，不受影響 */
.emotion-img { /* 表情專用樣式 */ }

替代方案：純前端處理

若不想動服務端代碼，也可在前端根據圖片 URL 特徵判斷（如路徑包含 /upload/），動態添加 class。但服務端方案更乾淨、可控，推薦採用。

注意事項

• 修改 ueditor.all.js 後需清除瀏覽器緩存或版本號更新
• 壓縮版 ueditor.all.min.js 需同步修改或重新壓縮
• 多語言項目中，class 名稱建議統一規範，避免衝突

通過這雙端協作的修改，優雅解決了「圖片與表情樣式隔離」的難題，且不影響編輯器其他功能。