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

资源下载

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. 【实战经验】64位Win7安装+32位Oracle + PL/SQL 解决方法

    软件环境:64位win7.32位Oracle 10g. PL/SQL 9.0.4.1644 前言:以前开发用的都是32位系统,突然换到64位上,安装环境真的有点麻烦了,尤其对于PL/SQL只支持32位 ...

  2. C# 比较两个数据的不同

    string[] arrRate = new string[] { "op1010", "op1020", "op1030", " ...

  3. 如何用一个app操作另外一个app.比如微信群控那样的

    如何实现一个app.控制另外的app,比如市面上群控微信的,是用测试工具的原理?还是什么模拟点击的原理? 如何用一个app操作另外一个app.比如微信群控那样的 >> android这个答 ...

  4. 【原创】不重启was server重新加载应用class文件

    类装入和更新检测(Class loading and update detection settings)菜单路径:Applications < Application Types < W ...

  5. PIC kit3问题

    1.通过pic kit3烧录pic16F1938的时候,pic kit3自动更新了firmware,但是仍然烧录不了pic16F1938,然后再次用pic kit3烧录pic18F45k80时,一直显 ...

  6. 如何让iframe背景色透明框架页文件设置

    如何让iframe背景色透明框架页文件设置:<body style="background-color:transparent" > 或 <body bgColo ...

  7. 注解@SuppressWarnings

    在JAVA中注解@SuppressWarnings("deprecation")的Deprecation是什么意思 过期的 @SuppressWarnings("depr ...

  8. Node_进阶_4

    Node进阶第四天 一.传统数据库技术回顾 数据库就是存储数据的,那么存储数据用txt就行了啊,为什么要有数据库? 理由之一:数据库有行.列的概念,数据有关系,数据不是散的. 老牌数据库,比如Mysq ...

  9. KMP笔记

    KMP #include<iostream> #include<cstring> #include<cstdio> #include<cmath> us ...

  10. HDU-4296 Buildings 贪心 从相邻元素的相对位置开始考虑

    题目链接:https://cn.vjudge.net/problem/HDU-4296 题意 有很多板子,每一个板子有重量(w)和承重(s)能力 现规定一块板子的PDV值为其上所有板子的重量和减去这个 ...