之前有用過百度的UEditor，結果插入的時候問題非常多诗宣，感覺對新手不是很友好膘怕，而且很長時間沒有更新過了，所以就打算換wangEditor
開始前附上地址：
官網(wǎng)：http://www.wangeditor.com/index.html
下載地址：https://github.com/wangfupeng1988/wangEditor/releases
文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
找一個最新的版本召庞，然后下載（話說貌似更新挺頻繁的）
解壓地方隨意岛心，本文解壓到public下的static（好像，貌似篮灼，也許忘古，可能，指不定……應該是要解壓到extend的诅诱？髓堪？？【攤手】）
然后在解壓得到的文件夾wangEditor下的release下的js文件就是我們需要引用到的
我們先創(chuàng)建一個富文本編輯器滿足一下自己的成就感娘荡，代碼如下（官方代碼）：
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<!-- 注意干旁， 只需要引用 JS，無需引用任何 CSS Ｅ阢濉Ｕ骸！-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
</body>
</html>
當然大年，引用的js路徑得改一下：
src="STATIC/wangEditor/release/wangEditor.min.js"
然后直接使用應該是沒有任何問題的换薄！
當然玉雾，我們還可以繼續(xù)對它的高度和寬度進行設置，不過在這里得聲明一個問題专控，wangEditor3的菜單欄是不能進行換行折疊的（作者大大：因為換行之后菜單欄是在太難看抹凳。ps：不是我打錯字，我是直接復制過來的伦腐，不信的可以去官方文檔去看）赢底，所以你如果想減小編輯器的寬度，而且不想菜單欄裸露在外面柏蘑，那么幸冻，精簡菜單欄的方法你值得擁有！
獻上官方文檔之配置菜單：https://www.kancloud.cn/wangfupeng/wangeditor3/335777
繼續(xù)咳焚，講講該如何控制高寬：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangEditor</title>
</head>
<style>
*{margin:0px;padding:0px;}
.editor
{
/*這里對整個編輯器的寬度進行設置洽损，但高度建議寫auto*/
width:1000px;
height:auto;
margin:0 auto;
margin-top:50px;
background: rgba(0,0,0,0.1);
}
.wordCount{
font-size: 1rem;
font-family: 'Forte';
}
#editor_text
{
height:150px;
/*這里可以對輸入框的高進行設置，寬隨編輯器的寬度*/
}
</style>
<body>
<div class='editor'>
<div id='editor_header' style='padding:8px 8px;'>
<span class="wordCount">Word Count: </span>
<span id="edi_count" class="wordCount" style="color: red;">0</span>
</div>
<div id="editor_text">
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/wangEditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor_header', '#editor_text') // 兩個參數(shù)也可以傳入 elem 對象革半，class 選擇器
//debug模式開啟
editor.customConfig.debug = true
//開啟本地圖片上傳碑定，上傳圖片到服務器
editor.customConfig.uploadImgServer = 'upAction'
// 將圖片大小限制為 5M
editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
// 限制一次最多上傳 5 張圖片
editor.customConfig.uploadImgMaxLength = 5
//自定義上傳文件名
editor.customConfig.uploadFileName = 'myfiles[]'
// 自定義字體
editor.customConfig.fontNames = [
'宋體',
'微軟雅黑',
'Arial',
'Tahoma',
'Verdana',
'華文行楷',
'黑體',
'幼圓',
]
// 自定義菜單配置，這里可以對顯示的菜單欄進行增刪又官，但要注意菜單欄的寬度并不會隨編輯器的寬度而改變
/*editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline'
] */
//默認
/*[
'head', // 標題
'bold', // 粗體
'fontSize', // 字號
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'table', // 表格
'video', // 插入視頻
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復
]
*/
//onchange
editor.customConfig.onchange = function (html) {
// html 即變化之后的內容
//console.log(html)
//獲取字數(shù) -- 不知道為什么 前后空格不能清除
var edi_art_text=editor.txt.text();
edi_art_text=edi_art_text.replace(/\s/g,'');
edi_art_text=$.trim(edi_art_text);
var edi_count=edi_art_text.length;
$('#edi_count').text(edi_count);
}
editor.create()
</script>
</body>
</html>
在上述代碼中延刘，利用editor.customConfig.uploadImgServer = 'upAction'，已經(jīng)將上傳本地圖片的接口打開六敬，下面則是本篇文章的重點碘赖，如何進行本地圖片的上傳：
在這里借鑒一位大佬的接口，順便感謝一下@浮生半日夢外构。大佬普泡，不然自己弄還不知道得弄多久。
鏈接：https://pan.baidu.com/s/1OxmFjxq9O1e4YZPB0zs48g
密碼：kq4g
懶羊羊已經(jīng)交出來了审编，接下來該涮羊肉了
其實在剛才那個文件中撼班，我們需要用的就仨文件，一是index.php垒酬，上面的代碼我就是借鑒自里面的（重點不是借鑒权烧，重點是下面的內容），二是upAction.php伤溉，它是寫在控制器里的方法，也就是我們上傳圖片到服務器那里需要寫的方法妻率，仨則是具體的圖片上傳過程了乱顾。
這里理一下思路，在html中宫静，我們寫出編輯器走净，然后在script里的
editor.customConfig.uploadImgServer = 'upAction'
開啟本地圖片上傳券时，并且確認處理方法，也就是upAction伏伯，
第二步橘洞，在我們的控制器中將upAction里的代碼復制進去，這里我取名為upAction说搅。
將upClass.php這個文件照老規(guī)矩炸枣，放在根目錄下的extend
第三步，修改代碼弄唧，
在我們剛剛的控制器里适肠，導入upClass.php
require_once('../extend/upClass.php');
然后在upAction里實例化UploadFiles的時候，在前面加一個反斜杠候引，
$upfile = new \UploadFiles(array('filepath'=>$path,'allowtype'=>$allowtype,'israndfile'=>true,'maxsize'=>'10000000'));
接下來是upClass.php
需要修改的只有一行侯养，
define("Upload_URL","http://localhost/tp5/public/uploads/");
修改成自己需要保存圖片的路徑。
然后基本上就大功告成了澄干。
這里我講一下我上傳的時候遇到的問題
剛開始的時候逛揩，圖片上傳成功了，只是返回的時候出錯了而已麸俘，然后我就在代碼里到處返回數(shù)據(jù)辩稽，exit；結果還是沒什么用疾掰，后來問了一下@浮生半日夢搂誉。大佬，一番折騰以后静檬，將之前我加的返回刪掉炭懊，又將tp5的應用調試模式app_debug和應用Trace app_trace關掉才成功，所以７鏖荨Ｎ旮埂！５纠８缸琛！Ｍ椤＜用！Ｃ焊荨Ｕ謇馈！辑奈！
所以苛茂！
所以Ｒ芽尽！妓羊！
所以？杈俊！Ｔ瓿瘛ＴＱ！涨颜！
所以费韭，應用trace模式不要開了，開一次死一次庭瑰，調試模式的話星持，我暫時貌似沒出啥毛病，但是不知道哪天會發(fā)神經(jīng)弹灭，所以能關就關開吧督暂，
寫錯勿噴，好好說我還是會改的穷吮，
那就這樣吧
以上
