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 相关文章推荐
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
Oct 22 PHP
PHP学习笔记之一
Jan 17 PHP
gd库图片下载类实现下载网页所有图片的php代码
Aug 20 PHP
php.ini 配置文件的深入解析
Jun 17 PHP
php中jpgraph类库的使用介绍
Aug 08 PHP
php中HTTP_REFERER函数用法实例
Nov 21 PHP
php判断表是否存在的方法
Jun 18 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
May 19 PHP
Yii框架表单模型和验证用法
May 20 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
May 26 PHP
PHP getName()函数讲解
Feb 03 PHP
PHP操作XML中XPath的应用示例
Jul 04 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
简单JS代码压缩器
2006/10/12 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
tensorflow的计算图总结
2020/01/12 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
财务部总监岗位职责
2014/03/12 职场文书
环保项目建议书
2014/08/26 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
文案策划岗位职责
2015/02/11 职场文书
后勤个人工作总结
2015/02/28 职场文书
农村婚庆主持词
2015/06/29 职场文书