yii2实现Ueditor百度编辑器的示例代码


Posted in PHP onNovember 02, 2018

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

资源下载

yii2.0-ueditor下载路径:yii2-ueditor-3water.rar

效果演示:

yii2实现Ueditor百度编辑器的示例代码

安装方法:

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://3water.com/article/150018.htm

在YII2框架中使用UEditor编辑器发布文章的地址:https://3water.com/article/150022.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
使用 php4 加速 web 传输
Oct 09 PHP
global.php
Dec 09 PHP
php中CI操作多个数据库的代码
Jul 05 PHP
利用curl抓取远程页面内容的示例代码
Jul 23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
Jun 23 PHP
PHP的switch判断语句的“高级”用法详解
Oct 01 PHP
PHP使用header()输出图片缓存实例
Dec 09 PHP
php中heredoc与nowdoc介绍
Dec 25 PHP
php校验表单检测字段是否为空的方法
Mar 20 PHP
PHP中通过trigger_error触发PHP错误示例
Jun 23 PHP
php获取网站百度快照日期的方法
Jul 29 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
Jul 06 PHP
php 调用百度sms来发送短信的实现示例
Nov 02 #PHP
Linux下 php7安装redis的方法
Nov 01 #PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
Oct 31 #PHP
php图片裁剪函数
Oct 31 #PHP
php+js实现裁剪任意形状图片
Oct 31 #PHP
workerman结合laravel开发在线聊天应用的示例代码
Oct 30 #PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
Oct 30 #PHP
You might like
提升PHP速度全攻略
2006/10/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python实现批量下载图片的方法
2015/07/08 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Django的性能优化实现解析
2019/07/30 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
投标邀请书范文
2014/01/31 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
详解Vue router路由
2021/11/20 Vue.js
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL