yii2实现Ueditor百度编辑器的示例代码

实现 Ueditor 百度编辑器，可以使用 Yii2 提供的一个扩展包 yii2-ueditor。下面将介绍使用该扩展包的详细攻略。

安装 yii2-ueditor 扩展包

1. 使用 Composer 安装 yii2-ueditor 扩展包：

composer require uiiitc/yii2-ueditor

1. 修改配置文件（一般位于 config/web.php 中），添加如下代码：

php
<?php
return [
// ...
'components' => [
// ...
'ueditor' => [
'class' => 'uiiitc\ueditor\UEditor',
// 可选配置，具体可参考扩展包文档
'configs' => [
// ...
],
],
],
];

使用 yii2-ueditor 实现上传图片

1. 创建一个处理图片上传的 action：

```php
<?php
namespace app\controllers;

use Yii;
use yii\web\Controller;

class UeditorController extends Controller
{
public function actions()
{
return [
'uploadImage' => [
'class' => 'uiiitc\ueditor\UploadAction',
'fieldName' => 'upfile', // 表单上传字段名，默认为upfile
'config' => [
'pathFormat' => '/uploads/image/{yyyy}{mm}{dd}/{time}-{rand:6}', // 上传路径格式
'maxSize' => 10485760, // 最大文件大小，单位B，默认10MB
'allowFiles' => ['.jpg', '.jpeg', '.png', '.gif', '.bmp'], // 允许的文件类型，多个用 "|" 隔开
],
],
];
}
}
``
**注意：fieldName一定要设置成upfile`，因为 Ueditor 组件对上传图片的表单字段名进行了硬编码。**

1. 在 Ueditor 的配置中设置图片上传的路径和 URL：

```php
<?php
return [
// ...
'components' => [
// ...
'ueditor' => [
'class' => 'uiiitc\ueditor\UEditor',
'configs' => [
// ...

               'imageUrlPrefix' => 'http://example.com', // 图片访问 URL 前缀
               'imagePathFormat' => '/uploads/image/{yyyy}{mm}{dd}/{time}-{rand:6}', // 图片上传路径格式
           ],
       ],
   ],

];
```

1. 在视图中添加 Ueditor 组件：

```php
<?php
use yii\helpers\Url;
use yii\web\View;

$this->registerJsFile('@web/ueditor/ueditor.all.min.js', ['depends' => [View::className()]]);
echo $form->field($model, 'content')->widget('uiiitc\ueditor\UEditor', [
'clientOptions' => [
'serverUrl' => Url::to(['ueditor/uploadImage']),
// 可选配置，具体可参考扩展包文档
'autoHeightEnabled' => true,
],
]);
```

注意：上面的视图代码中有一个 registerJsFile 函数，用于加载 Ueditor 的前端 JS 文件。这个文件可从 Ueditor 官网下载，也可从 yii2-ueditor 的 assets 目录取得。

1. 这样，上传图片就完成了。上传的图片文件会保存到 web/uploads/image 目录下，访问 URL 为 http://example.com/uploads/image/{yyyy}{mm}{dd}/{time}-{rand:6}。具体路径和 URL 可在步骤 2 中配置。

使用 yii2-ueditor 实现上传视频

yii2-ueditor 的 UploadAction 还可以用于上传视频，只需在配置中设置合适的文件类型和文件大小。

1. 这里就不再创建 action 了，直接在 Ueditor 的配置中添加视频上传的路径和 URL：

```php
<?php
return [
// ...
'components' => [
// ...
'ueditor' => [
'class' => 'uiiitc\ueditor\UEditor',
'configs' => [
// ...

               'videoUrlPrefix' => 'http://example.com', // 视频访问 URL 前缀
               'videoPathFormat' => '/uploads/video/{yyyy}{mm}{dd}/{time}-{rand}', // 视频上传路径格式
               'videoMaxSize' => 104857600, // 最大文件大小，单位B，默认100MB
               'videoAllowFiles' => ['.mp4', '.wmv'], // 允许的文件类型，多个用 "|" 隔开
           ],
       ],
   ],

];
```

1. 在视图中添加上传视频的按钮：

```php
<?php
use yii\helpers\Url;
use yii\web\View;

$this->registerJsFile('@web/ueditor/ueditor.all.min.js', ['depends' => [View::className()]]);
echo $form->field($model, 'content')->widget('uiiitc\ueditor\UEditor', [
'clientOptions' => [
'serverUrl' => Url::to(['ueditor/uploadImage']),
// 可选配置，具体可参考扩展包文档
'autoHeightEnabled' => true,
'toolbars' => [
// ...
[
'name' => 'insert',
'items' => ['insertVideo'],
],
],
],
]);
```

注意：这里的 serverUrl 也要修改为上传视频的 action。

1. 这样，上传视频就完成了。具体路径和 URL 可在步骤 1 中配置。