ThinkPHP整合百度Ueditor圖文教程
ThinkPHP整合百度Ueditor,基于黃永成老師的視頻說明的
申明:最好大家都能寫絕對路徑的都寫好絕對路徑比如:window.UEDITOR_HOME_URL
他在教程里面已經(jīng)說了的,我就不再次說了啊,就一筆帶過,好了不廢話!
在調(diào)用編輯器的時候首先先初始化一些值:
<script type="text/javascript" charset="utf-8"> window.UEDITOR_HOME_URL = "/Public/ueditor/"; //UEDITOR_HOME_URL、config、all這三個順序不能改變 window.onload=function(){ window.UEDITOR_CONFIG.initialFrameHeight=300;//編輯器的高度 window.UEDITOR_CONFIG.imageUrl="{:U('admin/Category/checkPic')}"; //圖片上傳提交地址 window.UEDITOR_CONFIG.imagePath=' /Uploads/thumb/';//編輯器調(diào)用圖片的地址 UE.getEditor('contents');//里面的contents是我的textarea的id值 } </script>
然后再引入2個js文件,分別是:1、ueditor.all.min.js 2、ueditor.config.js
在這里申明一下 我以上說的調(diào)用方式,順序絕對不能亂,亂了就會出問題了,所以你就按照我的按部就班的做吧!
因為我重寫了編輯器的圖片提交地址,所以我還得在控制器里面寫一個對圖片處理的方法。
代碼如下:
//改變Ueditor 默認(rèn)圖片上傳路徑 public function checkPic(){ import('ORG.Net.UploadFile'); $upload = new UploadFile();// 實例化上傳類 $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 設(shè)置附件上傳類型 $upload->autoSub =true ; $upload->subType ='date' ; $upload->dateFormat ='ym' ; $upload->savePath = './Uploads/thumb/';// 設(shè)置附件上傳目錄 if($upload->upload()){ $info = $upload->getUploadFileInfo(); echo json_encode(array( 'url'=>$info[0]['savename'], 'title'=>htmlspecialchars($_POST['pictitle'], ENT_QUOTES), 'original'=>$info[0]['name'], 'state'=>'SUCCESS' )); }else{ echo json_encode(array( 'state'=>$upload->getErrorMsg() )); } }
我首先給大家看看代碼先,在繼續(xù)說明,
1、引入tp官方的文件上傳處理類,然后初始化一些配置,這些都不介紹了??!
2、判斷他是否上傳成功了,如果上傳成功了,就先獲取他的上傳成功的信息,然后把數(shù)組轉(zhuǎn)成json,用phpjson_encode。如果上傳失敗就把上傳失敗的信息直接返回!
以上都是在黃永成老師教程里面已經(jīng)說明了的!就不詳細(xì)說明了,不懂的就去看視頻!
在整合好了上傳后,發(fā)現(xiàn)上傳的圖片路徑被轉(zhuǎn)義了,一直顯示不出來如圖:
我就在顯示出數(shù)據(jù)的哪里用反轉(zhuǎn)義函數(shù),進行操作了一下{$article.content|stripslashes}這樣就是把轉(zhuǎn)義的字符串進行反轉(zhuǎn)義,這樣數(shù)據(jù)就能正常顯示了
如圖:
然后在前臺模版顯示數(shù)據(jù)的時候不僅要反轉(zhuǎn)義還要去掉html實體化,{$article.content|htmlspecialchars_decode|stripslashes}這樣就能正常顯示了!
還有喲個問題,百度編輯器當(dāng)里面的內(nèi)容增長時,他的高度也是增長的,如圖:
解決方案就是在Ueditor的配置文件ueditor.config.js,里面的第428行打開注釋,改成true,還有430行注釋打開把他改成你初始化的的高度對應(yīng)就好了。如圖:
這樣編輯器就不會撐高了!如圖:
完結(jié)?。?! 說的不好的大神勿噴~~這個只是分享交流,如果說錯了 指出來就行了 謝謝~~~
補充說明:關(guān)于Ueditor在ie7下面調(diào)用不出來的bug問題解決辦法,這個是前天逛官網(wǎng)的時候,發(fā)現(xiàn)一個人的這個問題的,因為我只有人見人愛的ie6,也都沒有去測試,所以還是別人提醒,現(xiàn)在更正一下ie7的bug解決方案~感謝這位大濕啊~
如圖:
- Thinkphp3.2.3整合phpqrcode生成帶logo的二維碼
- Thinkphp整合微信支付功能
- thinkphp整合微信支付代碼分享
- thinkPHP5框架整合plupload實現(xiàn)圖片批量上傳功能的方法
- ThinkPHP 整合Bootstrap Ajax分頁樣式
- ThinkPHP整合datatables實現(xiàn)服務(wù)端分頁的示例代碼
- ThinkPHP上使用多說評論插件的方法
- ThinkPHP3.2.2的插件控制器功能簡述
- 基于ThinkPHP5.0實現(xiàn)圖片上傳插件
- Thinkphp和onethink實現(xiàn)微信支付插件
- ThinkPHP使用Smarty第三方插件方法小結(jié)
- thinkPHP框架整合tcpdf插件操作示例
相關(guān)文章
laravel 關(guān)聯(lián)關(guān)系遍歷數(shù)組的例子
今天小編就為大家分享一篇laravel 關(guān)聯(lián)關(guān)系遍歷數(shù)組的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Yii2實現(xiàn)上下聯(lián)動下拉框功能的方法
這篇文章主要介紹了Yii2實現(xiàn)上下聯(lián)動下拉框功能的方法,簡單分析了上下聯(lián)動下拉框功能的概念、原理與實現(xiàn)技巧,需要的朋友可以參考下2016-08-08詳解WordPress中提醒安裝插件以及隱藏插件的功能實現(xiàn)
這篇文章主要介紹了WordPress中提醒安裝插件以及隱藏插件的功能實現(xiàn),這兩種功能通常在多用戶模式下進行管理時用得比較多,需要的朋友可以參考下2015-12-12