之前有用过百度的UEditor，结果插入的时候问题非常多，感觉对新手不是很友好，而且很长时间没有更新过了，所以就打算换wangEditor
开始前附上地址：
官网：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文件就是我们需要引用到的
我们先创建一个富文本编辑器满足一下自己的成就感，代码如下（官方代码）：
<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"
然后直接使用应该是没有任何问题的！
当然，我们还可以继续对它的高度和宽度进行设置，不过在这里得声明一个问题，wangEditor3的菜单栏是不能进行换行折叠的（作者大大：因为换行之后菜单栏是在太难看。ps：不是我打错字，我是直接复制过来的，不信的可以去官方文档去看），所以你如果想减小编辑器的宽度，而且不想菜单栏裸露在外面，那么，精简菜单栏的方法你值得拥有！
献上官方文档之配置菜单：https://www.kancloud.cn/wangfupeng/wangeditor3/335777
继续，讲讲该如何控制高宽：
<!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') // 两个参数也可以传入 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)
//获取字数 -- 不知道为什么 前后空格不能清除
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'，已经将上传本地图片的接口打开，下面则是本篇文章的重点，如何进行本地图片的上传：
在这里借鉴一位大佬的接口，顺便感谢一下@浮生半日梦。大佬，不然自己弄还不知道得弄多久。
链接：https://pan.baidu.com/s/1OxmFjxq9O1e4YZPB0zs48g
密码：kq4g
懒羊羊已经交出来了，接下来该涮羊肉了
其实在刚才那个文件中，我们需要用的就仨文件，一是index.php，上面的代码我就是借鉴自里面的（重点不是借鉴，重点是下面的内容），二是upAction.php，它是写在控制器里的方法，也就是我们上传图片到服务器那里需要写的方法，仨则是具体的图片上传过程了。
这里理一下思路，在html中，我们写出编辑器，然后在script里的
editor.customConfig.uploadImgServer = 'upAction'
开启本地图片上传，并且确认处理方法，也就是upAction，
第二步，在我们的控制器中将upAction里的代码复制进去，这里我取名为upAction。
将upClass.php这个文件照老规矩，放在根目录下的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/");
修改成自己需要保存图片的路径。
然后基本上就大功告成了。
这里我讲一下我上传的时候遇到的问题
刚开始的时候，图片上传成功了，只是返回的时候出错了而已，然后我就在代码里到处返回数据，exit；结果还是没什么用，后来问了一下@浮生半日梦。大佬，一番折腾以后，将之前我加的返回删掉，又将tp5的应用调试模式app_debug和应用Trace app_trace关掉才成功，所以！！！！！！！！！！！！！
所以！
所以！！！
所以！！！！！！
所以，应用trace模式不要开了，开一次死一次，调试模式的话，我暂时貌似没出啥毛病，但是不知道哪天会发神经，所以能关就关开吧，
写错勿喷，好好说我还是会改的，
那就这样吧
以上
网友评论