Laravel5.6框架使用CKEditor5相關(guān)配置詳解
本文實(shí)例講述了Laravel5.6框架使用CKEditor5相關(guān)配置。分享給大家供大家參考,具體如下:
Laravel 相關(guān)配置
文件的上傳與存儲(chǔ)
參考文檔:
https://laravel-china.org/docs/laravel/5.6/requests/1367#1d60f1
https://laravel-china.org/docs/laravel/5.6/filesystem/1390
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html#response-file-uploaded-successfully
創(chuàng)建符號(hào)鏈接
php artisan storage:link
project/public/storage -> project/storage/app/public
修改配置文件config/filesystem.php
'default' => env('FILESYSTEM_DRIVER', 'public')
修改nginx和php的配置文件中上傳內(nèi)容大小的限制
#修改nginx配置文件 vim /usr/local/nginx/conf/nginx.conf http { include mime.types; default_type application/octet-stream; client_max_body_size 10M; ..... } #重啟nginx /usr/local/nginx/sbin/nginx -s reload #修改php-fpm配置文件 vim /usr/local/etc/php/7.2/php.ini post_max_size = 20M upload_max_filesize = 20M #重啟php-fpm /usr/local/sbin/php72-fpm restart
編寫文件處理方法
/** * 處理上傳文件 * @return [type] [description] */ public function uploadFile(Request $request){ $postFile = 'upload'; $allowedPrefix = ['jpg','png','doc','docx','xls','xlsx','zip','ppt','pptx','rar','pdf']; //檢查文件是否上傳成功 if(!$request->hasFile($postFile) || !$request->file($postFile)->isValid()){ return $this->CKEditorUploadResponse(0,'文件上傳失敗'); } $extension = $request->file($postFile)->extension(); $size = $request->file($postFile)->getClientSize(); $filename = $request->file($postFile)->getClientOriginalName(); //檢查后綴名 Log::info('extension',[$filename=>$extension]); if(!in_array($extension, $allowedPrefix)){ return $this->CKEditorUploadResponse(0,'文件類型不合法'); } //檢查大小 Log::info('size',[$filename=>$size]); if($size > 10*1024*1024){ return $this->CKEditorUploadResponse(0,'文件大小超過限制'); } //保存文件 $path = '/storage/'.$request->file($postFile)->store('images'); return $this->CKEditorUploadResponse(1,'',$filename,$path); } /** * CKEditor 上傳文件的標(biāo)準(zhǔn)返回格式 * @param [type] $uploaded [description] * @param string $error [description] * @param string $filename [description] * @param string $url [description] */ private function CKEditorUploadResponse($uploaded,$error='',$filename='',$url=''){ return [ "uploaded" => $uploaded, "fileName" => $filename, "url" => $url, "error" => [ "message" => $error ] ]; }
路由配置
#文件上傳路由 Route::post('/create/uploadFile','Admin\Articles\CreateController@uploadFile'); #從word中復(fù)制內(nèi)容時(shí),自動(dòng)上傳圖片路由 Route::post('/create/uploadFile&responseType=json','Admin\Articles\CreateController@uploadFile');
CKEditor相關(guān)配置
CKEditor配置參數(shù):https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html
CKEDITOR.replace('content',{ height:500, fileTools_requestHeaders : { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, isFileUploadSupported : true, filebrowserUploadUrl : '/create/uploadFile', language : 'zh-cn', });
Laravel-CSRF保護(hù)
相關(guān)文檔:
https://laravel-china.org/docs/laravel/5.6/csrf/1365
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-fileTools_requestHeaders
首先,在頁面head部分添加csrf參數(shù)
<!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}">
然后,為CKEditor編輯器的xhr請求增加請求頭參數(shù)
fileTools_requestHeaders : { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
隱藏“瀏覽服務(wù)器”按鈕
“瀏覽服務(wù)器”按鈕,用于實(shí)現(xiàn)對已上傳文件的管理,可以借助CKFinder實(shí)現(xiàn),由于目前沒有該需求,并且引入該功能會(huì)導(dǎo)致文件安全問題,本文采用了隱藏該按鈕的方案。
基本思路是從一下三個(gè)文件中,查找關(guān)鍵字browseServer,通過設(shè)置display屬性隱藏該按鈕。
ckeditor/plugins/image/dialogs/image.js
ckeditor/plugins/flash/dialogs/flash.js
ckeditor/plugins/link/dialogs/link.js
image
flash
link
由于ckeditor中的"上傳圖片""上傳文件""上傳FLASH” 三個(gè)功能中都有“瀏覽服務(wù)器”按鈕,所以我們要修改3個(gè)JS文件,先打開ckeditor文件夾中的ckeditor\plugins\image\dialogs\image.js文件,CTRL+F,搜索"browseServer”,找到該詞第一次出現(xiàn)的位置,在后面添加雙引號(hào)內(nèi)的內(nèi)容",style:'display:none;'"。如下圖:
再搜索"filebrowser",找到該詞第二次出現(xiàn)的位置,如下圖填入
CTRL+S保存該JS文件,出去刷新下自己的ckeditor,點(diǎn)擊圖片上傳按鈕后,你會(huì)發(fā)現(xiàn)瀏覽服務(wù)器按鈕不見了。
下面去弄掉文件上傳中的“瀏覽服務(wù)器”按鈕。
打開ckeditor\plugins\link\dialogs\link.js文件,還是搜索"browseServer"第一次出現(xiàn)的地方,如下圖插入雙引號(hào)內(nèi)的內(nèi)容",style:'display:none;'"。
CTRL+S保存該JS文件,出去刷新下自己的ckeditor,點(diǎn)擊“鏈接”按鈕后,你會(huì)發(fā)現(xiàn)“文件上傳選項(xiàng)”中的瀏覽服務(wù)器按鈕不見了。
最后弄掉上傳FLASH中的瀏覽服務(wù)器按鈕,打開ckeditor\plugins\flash\dialogs\flash.js文件,還是搜索"browseServer"第一次出現(xiàn)的地方,如上圖位置處插入雙引號(hào)內(nèi)的內(nèi)容",style:'display:none;'"。(這個(gè)和上面的幾乎一樣,就不截圖了)。CTRL+S保存該JS文件,出去刷新下自己的ckeditor,點(diǎn)擊“上傳FLASH”按鈕后,你會(huì)發(fā)現(xiàn)瀏覽服務(wù)器按鈕不見了。
至此,一個(gè)從前端到后臺(tái),瀏覽服務(wù)器被全面禁用了的ckeditor誕生了!
更多關(guān)于Laravel相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Laravel框架入門與進(jìn)階教程》、《php優(yōu)秀開發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家基于Laravel框架的PHP程序設(shè)計(jì)有所幫助。
- Laravel如何友好的修改.env配置文件詳解
- Nginx中運(yùn)行PHP框架Laravel的配置文件分享
- Laravel框架環(huán)境與配置操作實(shí)例分析
- Laravel 前端資源配置教程
- laravel config文件配置全局變量的例子
- Laravel數(shù)據(jù)庫讀寫分離配置的方法
- Laravel 數(shù)據(jù)庫加密及數(shù)據(jù)庫表前綴配置方法
- laravel框架數(shù)據(jù)庫配置及操作數(shù)據(jù)庫示例
- laravel-admin自動(dòng)生成模塊,及相關(guān)基礎(chǔ)配置方法
- laravel 配置路由 api和web定義的路由的區(qū)別詳解
- Laravel配置全局公共函數(shù)的方法步驟
- Laravel5框架自定義錯(cuò)誤頁面配置操作示例
- laravel配置Redis多個(gè)庫的實(shí)現(xiàn)方法
- nginx實(shí)現(xiàn)一個(gè)域名配置多個(gè)laravel項(xiàng)目的方法示例
- laravel 框架配置404等異常頁面
- Laravel 5.5官方推薦的Nginx配置學(xué)習(xí)教程
- Laravel Memcached緩存驅(qū)動(dòng)的配置與應(yīng)用方法分析
- Laravel 5+ .env環(huán)境配置文件詳解
相關(guān)文章
yii2.0框架使用 beforeAction 防非法登陸的方法分析
這篇文章主要介紹了yii2.0框架使用 beforeAction 防非法登陸的方法,結(jié)合實(shí)例形式分析了yii2.0框架中beforeAction的基本原理、用法及防止非法登陸的相關(guān)操作技巧,需要的朋友可以參考下2019-09-09淺談laravel orm 中的一對多關(guān)系 hasMany
今天小編就為大家分享一篇淺談laravel orm 中的一對多關(guān)系 hasMany,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10smarty內(nèi)置函數(shù)capture用法分析
這篇文章主要介紹了smarty內(nèi)置函數(shù)capture用法,實(shí)例分析了capture的三種常見用法,需要的朋友可以參考下2015-01-01PHP大批量插入數(shù)據(jù)庫的3種方法和速度對比
這篇文章主要介紹了PHP大批量插入數(shù)據(jù)庫的3種方法和速度對比,3種方法分別使用普通insert語句、insert into語句和事務(wù)提交,需要的朋友可以參考下2014-07-07動(dòng)態(tài)表單驗(yàn)證的操作方法和TP框架里面的ajax表單驗(yàn)證
這篇文章主要介紹了動(dòng)態(tài)表單驗(yàn)證的操作方法和TP框架里面的ajax表單驗(yàn)證問題,需要的朋友可以參考下2017-07-07