今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。

资源下载

yii2.0-ueditor下载路径:


https://link.jianshu.com?t=https://github.com/org-yii-china/yii2-ueditor/archive/master.zip

效果演示:

安装方法:

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.yiichina.com/tutorial/862

在YII2框架中使用UEditor编辑器发布文章的地址:


https://www.cnblogs.com/felixji/p/6698436.html

原文地址:https://segmentfault.com/a/1190000016878464

yii2-Ueditor百度编辑器的更多相关文章

  1. yii2解决百度编辑器umeditor图片上传问题

    作者:白狼 出处:http://www.manks.top/article/yii2_umeditor_upload本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原 ...

  2. 织梦替换ueditor百度编辑器,支持图片水印 教程

    1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...

  3. yii2整合百度编辑器umeditor

    作者:白狼 出处:www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...

  4. UEditor百度编辑器,工具栏上自定义添加一个普通按钮

    添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...

  5. [UEditor]百度编辑器配置总结

    前端配置文件ueditor.config.js 前端有两个重要的配置属性: UEDITOR_HOME_URL: 配置百度编辑器的资源目录路径,你可以手动指定此路径,默认是有URL变量指定,而URL变量 ...

  6. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  7. UEditor百度编辑器,工具栏自定义添加一个普通按钮

    根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...

  8. Ueditor百度编辑器中的 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

  9. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  10. Ueditor百度编辑器插件的安装

    目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...

随机推荐

  1. 乌班图 之 apt命令 及 VMware共享文件夹

    apt是Advanced Packaging Tool ,是Ubuntu下的一个安装包管理工具 大部分软件的安装.更新.卸载 都是利用apt命令来实现 直接在终端输入apt即可查阅命令的帮助信息 常用 ...

  2. 【参考】JDBC执行存储过程的四种情况

    [1].只有输入IN参数,没有输出OUT参数 [2].既有输入IN参数,也有输出OUT参数,输出是简单值(非列表) [3].既有输入IN参数,也有输出OUT参数,输出是列表 [4].输入输出参数是同一 ...

  3. PHP XML To Array将XML转换为数组

    // Xml 转 数组, 包括根键,忽略空元素和属性,尚有重大错误 function xml_to_array( $xml ) { $reg = "/<(\\w+)[^>]*?& ...

  4. 题解 洛谷 P3381 【【模板】最小费用最大流】

    发了网络流,再来一发费用流 能做费用流的,网络流自然做得来,但在这还是不要脸的安利一下自己的博客(里面也有网络流的题解): 点我 扯远了... 费用流,就是在不炸水管的情况下求源点到汇点的最小费用. ...

  5. 【Educational Codeforces Round 41 (Rated for Div. 2) D】Pair Of Lines

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果点的个数<=3 那么直接输出有解. 否则. 假设1,2最后会在一条直线上,则把这条直线上的点都删掉. 看看剩余的点是否在同 ...

  6. redis为什么选择单线程工作模型

    1.先说一下为什么出现进程,线程 进程:在计算机发明之初就发现,在输入数据时(I/O速度慢),CPU是空闲的,这样就浪费了CPU资源,为了充分利用CPU资源,发明了进程,在输入程序A的数据时,程序B在 ...

  7. 洛谷 P3147 [USACO16OPEN]262144

    P3147 [USACO16OPEN]262144 题目描述 Bessie likes downloading games to play on her cell phone, even though ...

  8. asp.net C# 获取网页源代码的几种方式

    1 方法 System.Net.WebClient aWebClient = new System.Net.WebClient(); aWebClient.Encoding = System.Text ...

  9. hadoop-05-mysql修改密码

    hadoop-05-mysql修改密码 su root 1,service mysqld start 2,vi /var/log/mysqld.log #在这里面查找密码 3, mysql -uroo ...

  10. javascript jquery 推断对象为空的方式

    java中存在非常多空指针的问题,须要常常做预防和推断,如若不然,控制台出现恼人的异常,让人信心备受打击,早期敲代码的时候没有经验,不能依据异常信息找到问题的根源,唯一做的事情就是祈祷,千万别出现什么 ...