安装方法:
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官网)
第二种调用方式:
= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[
'options'=>[
'initialFrameWidth' => 850,
]
]) ?>
...
yii2框架整合了百度编辑器,因为文件上传采用的是yii2自带的UploadedFile,这就难免umeditor上传不成功问题,解决问题的只需要两个操作步骤,我们来看看具体实现
创建一个 common/models/Upload.php:代码为:
需要在刚刚创建的那个控制器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,区分大小写
视图文件
= $form->field($model, 'content')->widget('common\widgets\ueditor\Ueditor',[ 'options'=>[ 'initialFrameWidth' => 1050,//宽度 'initialFrameHeight' => 550,//高度 ] ]) ?>= Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
上一篇:如何使用yii2上传图片