本文實例講述了Laravel5.6框架使用CKEditor5相關配置。分享給大家供大家參考，具體如下：

Laravel 相關配置

文件的上傳與存儲

參考文檔：

創(chuàng)建符號鏈接

php artisan storage:link

project/public/storage -> project/storage/app/public

修改配置文件config/filesystem.php

'default' => env('FILESYSTEM_DRIVER', 'public')

修改nginx和php的配置文件中上傳內容大小的限制

#修改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 上傳文件的標準返回格式

* @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中復制內容時，自動上傳圖片路由

Route::post('/create/uploadFile&responseType=json','Admin\Articles\CreateController@uploadFile');

CKEditor相關配置

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保護

首先，在頁面head部分添加csrf參數(shù)

然后，為CKEditor編輯器的xhr請求增加請求頭參數(shù)

fileTools_requestHeaders : {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

隱藏“瀏覽服務器”按鈕

“瀏覽服務器”按鈕，用于實現(xiàn)對已上傳文件的管理，可以借助CKFinder實現(xiàn)，由于目前沒有該需求，并且引入該功能會導致文件安全問題，本文采用了隱藏該按鈕的方案。

基本思路是從一下三個文件中，查找關鍵字browseServer，通過設置display屬性隱藏該按鈕。

ckeditor/plugins/image/dialogs/image.js

ckeditor/plugins/flash/dialogs/flash.js

ckeditor/plugins/link/dialogs/link.js

image

flash

link

由于ckeditor中的"上傳圖片""上傳文件""上傳FLASH” 三個功能中都有“瀏覽服務器”按鈕，所以我們要修改3個JS文件，先打開ckeditor文件夾中的ckeditor\plugins\image\dialogs\image.js文件，CTRL+F，搜索"browseServer”，找到該詞第一次出現(xiàn)的位置，在后面添加雙引號內的內容",style:'display:none;'"。如下圖：

再搜索"filebrowser",找到該詞第二次出現(xiàn)的位置，如下圖填入

CTRL+S保存該JS文件，出去刷新下自己的ckeditor，點擊圖片上傳按鈕后，你會發(fā)現(xiàn)瀏覽服務器按鈕不見了。

下面去弄掉文件上傳中的“瀏覽服務器”按鈕。

打開ckeditor\plugins\link\dialogs\link.js文件，還是搜索"browseServer"第一次出現(xiàn)的地方，如下圖插入雙引號內的內容",style:'display:none;'"。

CTRL+S保存該JS文件，出去刷新下自己的ckeditor，點擊“鏈接”按鈕后，你會發(fā)現(xiàn)“文件上傳選項”中的瀏覽服務器按鈕不見了。

最后弄掉上傳FLASH中的瀏覽服務器按鈕，打開ckeditor\plugins\flash\dialogs\flash.js文件，還是搜索"browseServer"第一次出現(xiàn)的地方，如上圖位置處插入雙引號內的內容",style:'display:none;'"。(這個和上面的幾乎一樣，就不截圖了)。CTRL+S保存該JS文件，出去刷新下自己的ckeditor，點擊“上傳FLASH”按鈕后，你會發(fā)現(xiàn)瀏覽服務器按鈕不見了。

至此，一個從前端到后臺，瀏覽服務器被全面禁用了的ckeditor誕生了！

希望本文所述對大家基于Laravel框架的PHP程序設計有所幫助。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的php ckeditor 配置,Laravel5.6框架使用CKEditor5相关配置详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。