1、wangEditor：基於javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費
官網：http://www.wangeditor.com/
官方文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
2、本文應用html+框架Thinkphp3.0；
3、前端：
准備文件：
鏈接：https://pan.baidu.com/s/1PO9WsgV09v2h58rTR7BK3w
提取碼：y5z3
html文件引用，我這里使用的是textarea獲取富文本內容，官方說明：wangEditor 從v3版本開始不支持 textarea ，但是可以通過onchange來實現 textarea 中提交富文本內容。
<!--超富文本開始--> <script src="__PUBLIC__/smalldoc/wenben/jquery.min.js"></script> <script type="text/javascript" src="__PUBLIC__/smalldoc/wenben/wangEditor.min.js"></script> <script type="text/javascript" src="__PUBLIC__/smalldoc/wenben/wangEditor-fullscreen-plugin.js"></script> <!--超富文本全屏--> <link href="__PUBLIC__/smalldoc/wenben/wangEditor-fullscreen-plugin.css" rel="stylesheet" />
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#contents')
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
// 監控變化，同步更新到 textarea
$text1.val(html)
}
//圖片上傳服務器開始
editor.customConfig.uploadImgServer = "__URL__/uploads"; // 上傳圖片到服務器
editor.customConfig.uploadFileName = "file"; //文件名稱 也就是你在后台接受的 參數值
editor.customConfig.uploadImgHeaders = { //header頭信息
'Accept': 'text/x-json'
}
// 將圖片大小限制為 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //默認為5M
editor.customConfig.uploadImgMaxLength = 20
editor.customConfig.uploadImgShowBase64 = false; // 使用 base64 保存圖片
editor.customConfig.customAlert = function (info) { //自己設置alert錯誤信息
// info 是需要提示的內容
alert('自定義提示：' + '圖片上傳失敗，請重新上傳')
};
editor.customConfig.debug = true; //是否開啟Debug 默認為false 建議開啟 可以看到錯誤
editor.customConfig.uploadImgHooks = {
error: function (xhr, editor) {
alert("2：" + xhr + "請查看你的json格式是否正確，圖片並沒有上傳");
// 圖片上傳出錯時觸發 如果是這塊報錯 就說明文件沒有上傳上去，直接看自己的json信息。是否正確
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
fail: function (xhr, editor, result) {
// 如果在這出現的錯誤 就說明圖片上傳成功了 但是沒有回顯在編輯器中，我在這做的是在原有的json 中添加了
// 一個url的key（參數）這個參數在 customInsert也用到
alert("1：" + xhr + "請查看你的json格式是否正確，圖片上傳了，但是並沒有回顯");
},
success:function(xhr, editor, result){
//成功 不需要alert 當然你可以使用console.log 查看自己的成功json情況
console.log(result)
// insertImg('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png')
},
customInsert: function (insertImg, result, editor) {
//console.log(result);
// 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
// insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
// 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
insertImg(result.url);
}
};
//圖片上傳服務器結束
//editor.customConfig.uploadImgShowBase64 = false // 使用 base64 保存圖片
editor.customConfig.showLinkImg = true //默認開啟網絡圖片
editor.create()
editor.txt.html('<p>請輸入內容！服務器文件圖片刪除，請移至圖片庫。</p>')
E.fullscreen.init('#contents'); // 全屏
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>
<!--超富文本結束-->
4、后端：
對應的Action里方法，因為筆者沒有想到更好的辦法通過編輯里回車或右上角圖片刪除有效的刪除服務器上的圖片，所有額外數據庫里做了個圖庫表：
public function uploads(){ parent::YanZheng('loginemails','__APP__/Index/renew'); //驗證非法用戶進出頁面 import('ORG.Net.UploadFile'); $upload = new UploadFile(); // 實例化上傳類 $upload->maxSize = 3145728; // 設置附件上傳大小 $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg'); // 設置附件上傳類型 $upload->saveRule = date('YmdHis',time()).mt_rand(0,9999);// $upload->uploadReplace = false; // 存在同名文件是否是覆蓋 $upload->savePath = './Uploads/docpic/'; if (!$upload->upload()) { $this->error($upload->getErrorMsg()); } else { $info = $upload->getUploadFileInfo(); //添加圖片到圖庫表里 $Person=new PersonModel(); $condition[$Person->_id]=session('loginemails'); $Personlist=$Person->where($condition)->find(); $Docpic=new DocpicModel(); $datas["Docpi_url"]=$info[0]['savename']; $datas["Docpi_person"]=$Personlist['Person_name']; $datas["Docpi_jifang"]=$Personlist['Person_bumen']; $datas["Docpi_date"]=date('Y-m-d H:i',time()); // 寫入用戶數據到數據庫 $Docpic->add($datas); } $tempshouquanfile=$info[0]['savename']; $url = "http://192.168.100.1:1001/Uploads/docpic/" . $tempshouquanfile; $data["errno"] = 0; $data["data"] = $savepath; $data['url'] = "{$url}"; move_uploaded_file($_FILES["file"]["tmp_name"],$savepath);//可有可無的一段，也就是圖片文件移動。 echo json_encode($data);//返回數據 }
5、效果：
