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/[email protected]/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();
?>