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模式不要开了,开一次死一次,调试模式的话,我暂时貌似没出啥毛病,但是不知道哪天会发神经,所以能关就关开吧,

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

那就这样吧

以上

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 文/墨丁 我听到一个声音对我说 沉默 让黑喑临到你身 因为 爱 给你指引 灵魂终将起舞
    墨丁阅读 752评论 5 1
  • 上帝怜悯幼儿园的孩子 对每个人的童年往往要添上一笔丰富的颜色 涂在画纸上也曾像彩虹般绚烂 他们在想象的草原上欢笑狂...
    鹿宥宥阅读 239评论 0 5
  • 开始记录自己的生活
    故人在北阅读 138评论 0 0