wangEditor使用与配置图片上传wangeditor v:3.3.1html：php

72 阅读 0 评论 48 点赞

我是靠谱客的博主刻苦犀牛，最近开发中收集的这篇文章主要介绍wangEditor使用与配置图片上传wangeditor v:3.3.1html：php，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

wangeditor v:3.3.1

参考手册：https://www.kancloud.cn/wangfupeng/wangeditor3/335782

下载：https://github.com/wangfupeng1988/wangEditor/releases

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>UE</title>
<link rel="stylesheet" href="">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
</head>
<body>
<form id="form" method="post">
<div id="contentDiv" style="width: 1000px;"></div>
<textarea name="content" id="content" style="display:none" ></textarea>
</form>
<button id="btn1">获取富文本text内容</button>
<button id="btn2">获取富文本html内容</button>
<button id="btn3">获取表单信息</button>
<button id="btn4">获取文本域内容</button>
</body>
<script>
var E = window.wangEditor;
var editor = new E('#contentDiv')
var $text1 = $('#content');
editor.customConfig.onchange = function (html) {
// 监控变化，同步更新富文本内容到 textarea
$text1.val(html);
}
editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
editor.customConfig.uploadImgServer = './imgupload.php';	//自定义上传图片（改成自己写的图片上传方法的路径）
editor.customConfig.uploadFileName = 'imgFile';	//自定义文件名
/* 这样的话PHP后台这样获取文件信息
//将文件上传的信息取出赋给变量
$name = $_FILES['imgFile']['name'];
$tmp_name = $_FILES['imgFile']['tmp_name'];
$size = $_FILES['imgFile']['size'];
$error = $_FILES['imgFile']['error'];
*/
editor.customConfig.uploadImgHooks = {
success: function (xhr, editor, result) {
console.log(result);
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
var url = result.data[0];
insertImg(url)
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.customConfig.customAlert = function (info) {	//关闭默认提示信息
// info 是需要提示的内容
//alert('自定义提示：' + info)
}
// 或者 var editor = new E( document.getElementById('content') )
editor.create();
$text1.val(editor.txt.html());
//获取内容
$('#btn1').click(function(){
alert(editor.txt.text());	// 读取 text
});
$('#btn2').click(function(){
alert(editor.txt.html());	// 读取 html
});
$('#btn3').click(function(){
var formData = new FormData($( "#form" )[0]);
alert(formData);
});
$('#btn4').click(function(){
alert($('#content').val());	// 读取 html
});
</script>
</body>
</html>

php

<?php
class upload{
protected $fileName;
protected $maxSize;
protected $allowMime;
protected $allowExt;
protected $uploadPath;
protected $imgFlag;
protected $fileInfo;
protected $error;
protected $ext;
/**
* @param string $fileName
* @param string $uploadPath
* @param string $imgFlag
* @param number $maxSize
* @param array $allowExt
* @param array $allowMime
*/
public function __construct($fileName='myFile',$uploadPath='./uploads',$imgFlag=true,$maxSize=5242880,$allowExt=array('jpeg','jpg','png','gif'),$allowMime=array('image/jpeg','image/png','image/gif')){
$this->fileName=$fileName;
$this->maxSize=$maxSize;
$this->allowMime=$allowMime;
$this->allowExt=$allowExt;
$this->uploadPath=$uploadPath;
$this->imgFlag=$imgFlag;
$this->fileInfo=$_FILES[$this->fileName];
}
/**
* 检测上传文件是否出错
* @return boolean
*/
protected function checkError(){
if(!is_null($this->fileInfo)){
if($this->fileInfo['error']>0){
switch($this->fileInfo['error']){
case 1:
$this->error='超过了PHP配置文件中upload_max_filesize选项的值';
break;
case 2:
$this->error='超过了表单中MAX_FILE_SIZE设置的值';
break;
case 3:
$this->error='文件部分被上传';
break;
case 4:
$this->error='没有选择上传文件';
break;
case 6:
$this->error='没有找到临时目录';
break;
case 7:
$this->error='文件不可写';
break;
case 8:
$this->error='由于PHP的扩展程序中断文件上传';
break;
}
return false;
}else{
return true;
}
}else{
$this->error='文件上传出错';
return false;
}
}
/**
* 检测上传文件的大小
* @return boolean
*/
protected function checkSize(){
if($this->fileInfo['size']>$this->maxSize){
$this->error='上传文件过大';
return false;
}
return true;
}
/**
* 检测扩展名
* @return boolean
*/
protected function checkExt(){
$this->ext=strtolower(pathinfo($this->fileInfo['name'],PATHINFO_EXTENSION));
if(!in_array($this->ext,$this->allowExt)){
$this->error='不允许的扩展名';
return false;
}
return true;
}
/**
* 检测文件的类型
* @return boolean
*/
protected function checkMime(){
if(!in_array($this->fileInfo['type'],$this->allowMime)){
$this->error='不允许的文件类型';
return false;
}
return true;
}
/**
* 检测是否是真实图片
* @return boolean
*/
protected function checkTrueImg(){
if($this->imgFlag){
if(!@getimagesize($this->fileInfo['tmp_name'])){
$this->error='不是真实图片';
return false;
}
return true;
}
}
/**
* 检测是否通过HTTP POST方式上传上来的
* @return boolean
*/
protected function checkHTTPPost(){
if(!is_uploaded_file($this->fileInfo['tmp_name'])){
$this->error='文件不是通过HTTP POST方式上传上来的';
return false;
}
return true;
}
/**
*显示错误
*/
protected function showError(){
exit('<span style="color:red">'.$this->error.'</span>');
}
/**
* 检测目录不存在则创建
*/
protected function checkUploadPath(){
if(!file_exists($this->uploadPath)){
mkdir($this->uploadPath,0777,true);
}
}
/**
* 产生唯一字符串
* @return string
*/
protected function getUniName(){
return md5(uniqid(microtime(true),true));
}
/**
* 上传文件
* @return string
*/
public function uploadFile(){
if($this->checkError()&&$this->checkSize()&&$this->checkExt()&&$this->checkMime()&&$this->checkTrueImg() && $this->checkHTTPPost()){
$this->checkUploadPath();
$this->uniName=$this->getUniName();
$this->destination=$this->uploadPath.'/'.$this->uniName.'.'.$this->ext;
if(@move_uploaded_file($this->fileInfo['tmp_name'], $this->destination)){
$res = ['error'=>0,'data'=>[$this->destination]];
echo json_encode($res);
//return
$this->destination;
}else{
$this->error='文件移动失败';
$this->showError();
}
}else{
$this->showError();
}
}
}
$arr = new upload('imgFile');
$res = $arr->uploadFile();
?>