thinkphp5插入wangEditor

之前有用过百度的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: &nbsp;</span>
                <span id="edi_count" class="wordCount" style="color: red;">0</span>&nbsp;
            </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模式不要开了，开一次死一次，调试模式的话，我暂时貌似没出啥毛病，但是不知道哪天会发神经，所以能关就关开吧，

写错勿喷，好好说我还是会改的，

那就这样吧

以上

thinkphp5插入wangEditor

推荐阅读更多精彩内容