yii2实现Ueditor百度编辑器的示例代码
时间:2022-07-27
本文章向大家介绍yii2实现Ueditor百度编辑器的示例代码,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天在网上看了下有关图片上传的教程,历经挫折才调试好,现在把相关代码及其说明贴出来,以供初次使用的朋友们参考。
资源下载
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' = 'commonwidgetsueditorUeditorAction',
'config'= [
//上传图片配置
'imageUrlPrefix' = "", /* 图片访问路径前缀 */
'imagePathFormat' = "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
]
]
];
}
第一种调用方式:
在对应的渲染页面,即views下的页面中
<?=commonwidgetsueditorUeditor::widget(['options'= ['initialFrameWidth' = 850,]])?
options 填写配置编辑器的参数(参考ueditor官网)
第二种调用方式:
<?php $form = ActiveForm::begin(); ?
<?= $form- field($model, 'title')- textInput(['maxlength' = true]) ?
<?= $form- field($model, 'content')- widget('commonwidgetsueditorUeditor',[
'options'= [
'initialFrameWidth' = 850,
]
]) ?
...
<?php ActiveForm::end(); ?
yii2框架整合了百度编辑器,因为文件上传采用的是yii2自带的UploadedFile,这就难免umeditor上传不成功问题,解决问题的只需要两个操作步骤,我们来看看具体实现
创建一个 common/models/Upload.php:代码为:
<?PHP
namespace commonmodels;
use yiibaseModel;
use yiiwebUploadedFile;
/**
* 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 yiiwebUploadedFile;
use commonmodelsUpload;
/**
* 富文本框的图片上传
* @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 yiiwidgetsActiveForm;
?
<?= $form- field($model, 'content')- widget('commonwidgetsueditorUeditor',[
'options'= [
'initialFrameWidth' = 1050,//宽度
'initialFrameHeight' = 550,//高度
]
]) ?
<div class="form-group"
<?= Html::submitButton('保存', ['class' = 'btn btn-success']) ?
</div
<?php ActiveForm::end() ?
其中content是字段名称
关于图片上传的可以看下:https://www.zalou.cn/article/150018.htm
在YII2框架中使用UEditor编辑器发布文章的地址:https://www.zalou.cn/article/150022.htm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持网站事(zalou.cn)。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一步一步教你把 Redux Saga 添加到 React&Redux 程序中
- Octave的基本语句及函数的使用入门—ML Note 31
- JAVA的Lock锁接口实现
- 抽象语法树为什么抽象
- burpsuite IP伪造插件
- 用阻塞队列,再系一次鞋带
- I2C总线架构 之 设备驱动
- kail 安装及卸载 docker【亲测可用】
- mac 登录远程服务器(常规ssh+免密快捷方式)
- git常用操作--分支同步master 本地库提交到远程分支
- mac苹果 配置maven settings文件【注意,与win环境不一样!!!】
- mac小程序开发 本地调试 安装 npm modules
- Deeplearning.ai 课程笔记第一部分:神经网络与深度学习
- 如何从Node.js开始-Visual Studio2017
- Rust竟然没有异常处理?