卤煮在项目中初次接触到wangeditor，为此踩了不少坑，特别是涉及到图片上传的部分，更是伤亡惨重，好在经过好几个小时的煎熬以后，卤煮终于征服了它，实在是可喜可贺，嘿嘿嘿！为了日后遇见同样问题不犯蒙，也希望碰到同样难题的老哥们可以有个参考，遂写下这篇文章，与诸君共勉！
↓↓以下为正文↓↓
wangeditor富文本编辑器相对于时下热门的编辑器，具有界面简洁、文档易懂、轻量、开源等优点，我个人比较喜欢的是配置方便、使用简单这个优点，如果有同样需求的老哥，那这个编辑器一定值得尝试。
首先，我们需要先去官网下载相应的文件，我这里使用的版本是v3.1.1
附上地址：
官网：http://www.wangeditor.com/index.html
下载地址：https://github.com/wangfupeng1988/wangEditor/releases
文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
下载完毕以后，解压文件，这里我们只取release文件使用即可，把release文件复制到我们的tp5项目中的public/static文件中，然后在需要引入编辑器的页面插入代码，示例如下：
<script type="text/javascript" src="/otforder/public/static/release/wangEditor.min.js"></script>
<div class="editor"></div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('.editor');
//debug模式开启
editor.customConfig.debug = true
editor.customConfig.uploadImgServer = 'upAction' // 上传图片到服务器
// 将图片大小限制为 5M
editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5
editor.customConfig.uploadImgParamsWithUrl = true
editor.customConfig.uploadFileName = 'myfiles[]'
// 自定义字体
editor.customConfig.fontNames = [
'宋体',
'微软雅黑',
'Arial',
'Tahoma',
'Verdana',
'华文行楷',
'黑体',
'幼圆',
]
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'underline', // 下划线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
//默认
/*[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
*/
editor.customConfig.showLinkImg = true; //是否开启网络图片，默认开启的。
editor.create()
</script>
在根目录下的extend文件中新建一个名为upClass.php的类文件，并修改这一行，修改成自己需要保存图片的路径
define("Upload_URL","http://localhost/otforder/public/static/upload/");
代码如下：
<?php
//这个宏定义设置为上传路径
define("Upload_URL","http://localhost/otforder/public/static/upload/");
class UploadFiles{
private $maxsize = '1000000'; //允许上传文件最大长度
private $allowtype = array('jpg','png','gif','jpeg');//允许上传文件类型
private $israndfile = true;//是否随机文件名
private $filepath;//上传路径
private $originName;//上传的源文件
private $tmpfileName;//临时文件名
private $newfileName;//新文件名
private $fileSize;//文件大小
private $fileType;//文件类型
private $errorNum = 0;//错误号
private $errorMessg = array();//错误消息
//对成员初始化
function __construct($options = array()){
foreach($options as $key=>$val){
$key = strtolower($key);
//查看传进来的数组里下标是否与成员属性相同
//print_r(array_keys(get_class_vars(get_class($this))));
if(!in_array($key,array_keys(get_class_vars(get_class($this))))){
continue;
}else{
$this->setOption($key,$val);
}
}
}
private function setOption($key,$val){
$this->$key = $val;
//echo $this->errorNum."<br>";
}
//检查文件上传路径
private function checkfilePath(){
//echo $this->filepath;
if(empty($this->filepath)){
$this->setOption('errorNum',"-5");
return false;
}
if(!file_exists($this->filepath) || !is_writable($this->filepath)){
if(!mkdir($this->filepath,0755,true)){
$this->setOption('errorNum','-4');
return false;
}
}
return true;
}
//获取错误信息
private function getError(){
$str = "上传文件{$this->originName}出错---";
switch($this->errorNum){
case 4; $str .= "没有文件被上传";break;
case 3; $str .= "文件只被部分上传";break;
case 2; $str .= "超过文件表单允许大小";break;
case 1; $str .= "超过php.ini中允许大小";break;
case -1; $str .= "未允许的类型";break;
case -2; $str .= "文件过大，不能超过".$this->maxsize."个字节";break;
case -3; $str .= "上传失败";break;
case -4; $str .= "建立文件上传目录失败";break;
case -5; $str .= "必须指定上传路径";break;
default; $str .= "未知错误";
}
return $str."<br>";
}
//检查文件类型
private function checkfileType(){
//echo $this->fileType;
if(!in_array(strtolower($this->fileType),$this->allowtype)){
$this->setOption('errorNum','-1');
return false;
}else{
return true;
}
}
//检查文件大小
private function checkfileSize(){
if($this->fileSize > $this->maxsize){
$this->setOption('errorNum','-2');
return false;
}else{
return true;
}
}
//处理随机文件名称
private function prorandFile(){
$ch = $this->israndfile;
if($ch == 'true'){
return true;
}else{
return false;
}
}
private function setFiles($name="",$tmp_name="",$size="",$error=""){
//检查上传路径
if(!$this->checkfilePath()){
//$this->errorMessg = $this->getError();
return false;
}
//echo $error."<br>";
if($error){
$this->setOption('errorNum',$error);
return false;
}
$arrstr = explode('.',$name);
$type = end($arrstr);
$this->setOption('originName',$name);
$this->setOption('fileSize',$size);
$this->setOption('fileType',$type);
$this->setOption('tmpfileName',$tmp_name);
return true;
}
//检查是否有文件上传
function checkFile($formname){
if(!@$_FILES[$formname]){
$this->setOption('errorNum',4);
return false;
}else{
return true;
}
}
//上传文件
function uploadeFile($formname){
if(!$this->checkFile($formname)){
$this->errorMessg = $this->getError();
return false;
}
$return = true;
$name = @$_FILES[$formname]['name'];
$tmp_name = @$_FILES[$formname]['tmp_name'];
$size = @$_FILES[$formname]['size'];
$error = @$_FILES[$formname]['error'];
//$type = $_FILES[$formname]['type'];
if(is_array($name)){
$errors = array();
for($i=0; $i<count($name); $i++){
if($this->setFiles($name[$i],$tmp_name[$i],$size[$i],$error[$i])){
if(!$this->checkfileSize() || !$this->checkfileType()){
$errors[] = $this->getError();
$return = false;
}
}else{
$errors[] = $this->getError();
$return = false;
}
if(!$return) $this->setFiles();
}
if($return){
$newfileN = array();
$newfileS = array();
$newfileP = array();
$newfileT = array();
$newfileU = array();
for($i=0; $i<count($name); $i++){
if($this->setFiles($name[$i],$tmp_name[$i],$size[$i],$error[$i])){
if(!$this->copyFile()){
$errors[] = $this->getError();
$return = false;
}else{
$newfileN[] = $this->newfileName;
$newfileS[] = sprintf("%.2f",$this->fileSize/1024/1024);
$newfileP[] = $this->filepath;
$newfileT[] = $this->fileType;
//获取图片地址
$newfileU[] = Upload_URL.date('Y-m-d')."/".$this->newfileName;
}
}
$this->newfileName = $newfileN;
$this->newfileSize = $newfileS;
$this->newfilePath = $newfileP;
$this->newfileType = $newfileT;
$this->newfileUrl = $newfileU;
}
}
//print_r($errors);
$this->errorMessg = $errors;
//echo $errors;
return $return;
}else{
if($this->setFiles($name,$tmp_name,$size,$error)){
$return = true;
if($error)
var_dump($error);
if($this->checkfileSize() && $this->checkfileType()){
}else{
$return = false;
}
}else{
$return = false;
}
if(!$return){
$this->errorMessg = $this->getError();
}
return $return;
}
}
//获取上传后的文件名
function getnewFile(){
return $this->newfileName;
}
//把文件拷贝到指定的路径
function copyFile(){
$filepath = rtrim($this->filepath,'/')."/";
if(!$this->errorNum){
if($this->prorandFile()){
$this->newfileName = date('Ymdhis').rand(1000,9999).".".$this->fileType;
}else{
$this->newfileName = $this->originName;
}
if(!move_uploaded_file($this->tmpfileName,$filepath.$this->newfileName)){
$this->setOption('errorNum',-3);
return false;
}else{
return true;
}
}else{
return false;
}
}
//上传错误后返回的消息
function gteerror(){
$err = $this->errorMessg;
return $err;
}
//返回上传成功的文件信息
function getFileInfo(){
$fileInfo=array(
"info_name" => $this->newfileName,
"info_path" => $this->newfilePath,
"info_size" => $this->newfileSize,
"info_type" => $this->newfileType,
"info_url" => $this->newfileUrl,
);
return $fileInfo;
}
//返回wangEditor3需求参数
function getWangEditor3(){
$info=array(
"errno" => 0,
"data" => $this->newfileUrl,
);
return $info;
}
}
在控制器index中新建一个方法：
public function upAction(){
require_once('../extend/upClass.php');
//获取日期
$date=date('Y-m-d');
//设定上传路径
$path="./static/upload/".$date."/";
//设定允许的文件类型
$allowtype=array(
'bmp',
'gif',
'jpg',
'jpeg',
'png',
);
$upfile = new \UploadFiles(array('filepath'=>$path,'allowtype'=>$allowtype,'israndfile'=>true,'maxsize'=>'10000000'));
if($upfile ->uploadeFile('myfiles')){
//此处myfiles对应前面的 editor.customConfig.uploadFileName = 'myfiles[]'
//$arrfile = $upfile ->getnewFile();
//$arrfile = $upfile ->getFileInfo();
$arrfile = $upfile -> getWangEditor3();
$arrfile = json_encode($arrfile);
//返回json数据给前端
echo $arrfile;
}else{
$err = $upfile ->gteerror();
if(is_array($err)){
foreach($err as $v1){
echo $v1,"<br/>";
}
}else{
echo $err;
}
//var_dump($err);
}
//var_dump($upfile);
}
这里需要注意的是upAction方法中的$path="./static/upload/".$date."/";需要跟upClass.php文件中的上传路径define("Upload_URL","http://localhost/otforder/public/static/upload/");保持一致。
到这里wangeditor编辑器的图片上传就配置完成啦！各位老哥可以开始愉快的测试啦~~
本文参考：
简书——月_随缘：https://www.jianshu.com/p/3deb2d274ac1
waneditor官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
