今天在网上看了下有关图片上传的教程, 历经挫折才调试好, 现在把相关代码及其说明贴出来, 以供初次使用的朋友们参考.
资源下载
yii2.0-ueditor 下载路径: yii2-ueditor-jb51.rar
效果演示:
安装方法:
1. 下载 yii2-ueditor
2. 将下载的 yii2-ueditor-master 修改 ueditor (注意: 修改成其他文件名请修改插件内对应的命名空间)
3. 将文件方在 根目录 / common/widgets 下即可
调用方法:
在 backend/controllers 中新建一个控制器 Demo 加入以下代码
- public function actions(){
- return [
- 'ueditor'=>[
- 'class' => 'common\widgets\ueditor\UeditorAction',
- 'config'=>[
- // 上传图片配置
- 'imageUrlPrefix' => "", /* 图片访问路径前缀 */
- 'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径, 可以自定义保存路径和文件名格式 */
- ]
- ]
- ];
- }
第一种调用方式:
在对应的渲染页面, 即 views 下的页面中
<?=common\widgets\ueditor\Ueditor::widget(['options'=>['initialFrameWidth' => 850,]])?>
options 填写配置编辑器的参数 (参考 ueditor 官网)
第二种调用方式:
- <?PHP $form = ActiveForm::begin(); ?>
- <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
- <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
- 'options'=>[
- 'initialFrameWidth' => 850,
- ]
- ]) ?>
- ...
- <?PHP ActiveForm::end(); ?>
yii2 框架整合了百度编辑器, 因为文件上传采用的是 yii2 自带的 UploadedFile, 这就难免 umeditor 上传不成功问题, 解决问题的只需要两个操作步骤, 我们来看看具体实现
创建一个 common/models/Upload.PHP: 代码为:
- <?PHP
- namespace common\models;
- use yii\base\Model;
- use yii\web\UploadedFile;
- /**
- * UploadForm is the model behind the upload form.
- */
- class Upload extends Model
- {
- /**
- * @var UploadedFile file attribute
- */
- public $file;
- /**
- * @return array the validation rules.
- */
- public function rules()
- {
- return [
- [['file'], 'file'],
- ];
- }
- }
需要在刚刚创建的那个控制器 Demo 里添加 actionUploadImage 方法处理 "富文本框的图片上传" 内容
- use yii\Web\UploadedFile;
- use common\models\Upload;
- /**
- * 富文本框的图片上传
- * @return array
- */
- public function actionUploadImage()
- {
- $model = new Upload();
- if (Yii::$App->request->isPost) {
- $model->file = UploadedFile::getInstance($model, "file");
- $dir = '/uploads/ueditor/';// 文件保存目录
- if (!is_dir($dir))
- mkdir($dir);
- if ($model->validate()) {
- $fileName = $model->file->baseName . "." . $model->file->extension;
- $dir = $dir."/". $fileName;
- $model->file->saveAs($dir);
- $info = [
- "originalName" => $model->file->baseName,
- "name" => $model->file->baseName,
- "url" => $dir,
- "size" => $model->file->size,
- "type" => $model->file->type,
- "state" => "SUCCESS",
- ];
- exit(json_encode($info));
- }
- }
- }
特别提醒: 上述返回的 $info 信息中 state 状态只能是 SUCCESS, 区分大小写
视图文件
- <?PHP
- use yii\widgets\ActiveForm;
- ?>
- <?= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
- 'options'=>[
- 'initialFrameWidth' => 1050,// 宽度
- 'initialFrameHeight' => 550,// 高度
- ]
- ]) ?>
- <div class="form-group">
- <?= html::submitButton('保存', ['class' => 'btn btn-success']) ?>
- </div>
- <?PHP ActiveForm::end() ?>
其中 content 是字段名称
关于图片上传的可以看下: https://www.jb51.net/article/150018.htm
在 YII2 框架中使用 UEditor 编辑器发布文章的地址: https://www.jb51.net/article/150022.htm
来源: https://www.jb51.net/article/150016.htm