之前有用過百度的UEditor，結(jié)果插入的時候問題非常多，感覺對新手不是很友好，而且很長時間沒有更新過了，所以就打算換wangEditor
開始前附上地址：
官網(wǎng)：http://www.wangeditor.com/index.html
下載地址：https://github.com/wangfupeng1988/wangEditor/releases
文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
找一個最新的版本，然后下載（話說貌似更新挺頻繁的）
解壓地方隨意，本文解壓到public下的static（好像，貌似，也許，可能，指不定……應(yīng)該是要解壓到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>
當(dāng)然，引用的js路徑得改一下：
src="STATIC/wangEditor/release/wangEditor.min.js"
然后直接使用應(yīng)該是沒有任何問題的！
當(dāng)然，我們還可以繼續(xù)對它的高度和寬度進行設(shè)置，不過在這里得聲明一個問題，wangEditor3的菜單欄是不能進行換行折疊的（作者大大：因為換行之后菜單欄是在太難看。ps：不是我打錯字，我是直接復(fù)制過來的，不信的可以去官方文檔去看），所以你如果想減小編輯器的寬度，而且不想菜單欄裸露在外面，那么，精簡菜單欄的方法你值得擁有！
獻上官方文檔之配置菜單：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
{
/*這里對整個編輯器的寬度進行設(shè)置，但高度建議寫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;
/*這里可以對輸入框的高進行設(shè)置，寬隨編輯器的寬度*/
}
</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
//開啟本地圖片上傳，上傳圖片到服務(wù)器
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' // 重復(fù)
]
*/
//onchange
editor.customConfig.onchange = function (html) {
// html 即變化之后的內(nèi)容
//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，上面的代碼我就是借鑒自里面的（重點不是借鑒，重點是下面的內(nèi)容），二是upAction.php，它是寫在控制器里的方法，也就是我們上傳圖片到服務(wù)器那里需要寫的方法，仨則是具體的圖片上傳過程了。
這里理一下思路，在html中，我們寫出編輯器，然后在script里的
editor.customConfig.uploadImgServer = 'upAction'
開啟本地圖片上傳，并且確認處理方法，也就是upAction，
第二步，在我們的控制器中將upAction里的代碼復(fù)制進去，這里我取名為upAction。
將upClass.php這個文件照老規(guī)矩，放在根目錄下的extend
第三步，修改代碼，
在我們剛剛的控制器里，導(dǎo)入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；結(jié)果還是沒什么用，后來問了一下@浮生半日夢。大佬，一番折騰以后，將之前我加的返回刪掉，又將tp5的應(yīng)用調(diào)試模式app_debug和應(yīng)用Trace app_trace關(guān)掉才成功，所以?。。。。。。。。。。。?！
所以！
所以?。?！
所以！?。。。?！
所以，應(yīng)用trace模式不要開了，開一次死一次，調(diào)試模式的話，我暫時貌似沒出啥毛病，但是不知道哪天會發(fā)神經(jīng)，所以能關(guān)就關(guān)開吧，
寫錯勿噴，好好說我還是會改的，
那就這樣吧
以上
