时间:2021-05-25
今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。
资源下载
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:代码为:
<?PHPnamespace 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,区分大小写
视图文件
<?phpuse 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题。今天我们来谈谈yii2集成另外一个强大好用的富文本
百度编辑器UEditor1.22新版发布,新版新增了自定义工具栏界面功能,并修复了之前版本的一些Bug。百度编辑器UEditor1.22更新功能: 1.编辑器
UEditor编辑器想要开发的web项目,比如javaweb项目中使用UEditor,下面我们就来看看详细的教程。软件名称:UEditor百度编辑器v1.2.6
今天给大家介绍一款非常棒的WEB在线富文本编辑器——UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器
本文介绍了详解在YII2框架中使用UEditor编辑器发布文章,分享给大家,具体如下:创建文章数据表文章数据表主要有4个字段1.id主键(int)2.title