Yii2 整合百度 UEditor 迷你版（UEditor Mini）完整實戰教程

Yii2 整合百度 UEditor 迷你版（UEditor Mini）完整實戰教程

UEditor Mini（umeditor）是百度推出的輕量級富文本編輯器，體積小、功能全、適合後台管理系統快速接入。本文基於 Yii2 Advanced 模板，詳細講解從資源部署、AssetBundle 擴展到表單綁定的完整流程。

一、資源準備與部署

1. 官網下載 umeditor（注意非 ueditor 完整版）。
2. 解壓至項目目錄：backend/web/css/umeditor/（路徑自定，下文以此為例）。
3. 目錄結構包含：umeditor.config.js、umeditor.min.js、lang/zh-cn/zh-cn.js、themes/default/css/umeditor.css 等核心文件。

二、擴展 AssetBundle 實現按需加載

修改 backend/assets/AppAsset.php，添加靜態方法註冊單個 CSS/JS，利用 depends 確保加載順序在核心資源之後：

<?php
namespace backend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle {
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = []; public $js = [];
    public $depends = ['yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset'];

    // 按需加載 JS
    public static function addScript($view, $jsFile) {
        $view->registerJsFile($jsFile, [self::className(), 'depends' => 'backend\assets\AppAsset']);
    }
    // 按需加載 CSS
    public static function addCss($view, $cssFile) {
        $view->registerCssFile($cssFile, [self::className(), 'depends' => 'backend\assets\AppAsset']);
    }
}

三、視圖層接入：_form.php 完整示例

假設模型 Article 有 content 字段需富文本編輯：

<?php
use backend\assets\AppAsset;
use yii\widgets\ActiveForm;
use yii\helpers\Html;

AppAsset::register($this);
// 按需引入 umeditor 資源
AppAsset::addCss($this, '/css/umeditor/themes/default/css/umeditor.css');
AppAsset::addScript($this, '/css/umeditor/umeditor.config.js');
AppAsset::addScript($this, '/css/umeditor/umeditor.min.js');
AppAsset::addScript($this, '/css/umeditor/lang/zh-cn/zh-cn.js');
?>

<?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?>
    <?= Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end(); ?>

<?php $this->beginBlock('js-block') ?>
$(function () {
    var um = UM.getEditor('article-content'); // ID 為 article-content
});
<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?>

四、關鍵點解析

• 編輯器 ID：Yii2 ActiveForm 默認生成的 textarea ID 格式為 modelname-fieldname，即 article-content，傳給 UM.getEditor() 即可自動綁定。
• 資源加載順序：config.js → min.js → lang/zh-cn.js → css，AssetBundle depends 機制保證順序正確。
• 圖片上傳配置：修改 umeditor.config.js 中 imageUrl、imagePath 指向後端上傳接口，返回格式 {state:"SUCCESS", url:"...", title:"...", original:"..."}。
• 內容安全：儲存前建議使用 yii\helpers\HtmlPurifier 過濾 XSS；輸出時啟用 HtmlPurifier::process()。

五、常見問題排查

通過 AssetBundle 統一管理前端資源，配合 Yii2 表單組件，可實現 UEditor Mini 的優雅接入與維護。同樣模式適用於 KindEditor、CKEditor 等編輯器的整合。

1. 上一篇文章： PHP 性能優化全攻略：從代碼層到架構層的 4 大核心策略
2. 下一篇文章： PHP 通用工具類大全：從系統信息到加密解密的 15+ 實用方法封裝

PHP 相關知識

PHP Opcache 安裝配置完整指南

針對 PHP 5.5+ 版本，編譯時需添加 --enable

PHP 正則捕獲組與非捕獲組：命名組、反向引用、零寬斷言全解析

捕獲組基礎 preg_match() 第三參數 $match

PHP 異常處理完整指南：try-catch、自定義異常、set_exception_handler、finally

PHP 異常處理完整指南 PHP 5 引入異常機制，PHP

易寶支付 (Yeepay) PHP 接口完整對接：HMAC-MD5 簽名、跳轉支付、服務器回調驗證

易寶支付 (Yeepay) PHP 接口完整對接：HMAC-