Laravel5.6框架使用CKEditor5相关配置详解

Laravel  /  管理员 发布于 8年前   231

本文实例讲述了Laravel5.6框架使用CKEditor5相关配置。分享给大家供大家参考，具体如下：

Laravel 相关配置

文件的上传与存储

参考文档：

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

创建符号链接

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.confhttp {  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.inipost_max_size = 20Mupload_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配置参数：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保护

相关文档：
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参数

然后，为CKEditor编辑器的xhr请求增加请求头参数

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

隐藏“浏览服务器”按钮

 

“浏览服务器”按钮，用于实现对已上传文件的管理，可以借助CKFinder实现，由于目前没有该需求，并且引入该功能会导致文件安全问题，本文采用了隐藏该按钮的方案。

参考附录：ckeditor隐藏“浏览服务器”按钮

基本思路是从一下三个文件中，查找关键字browseServer，通过设置display属性隐藏该按钮。

ckeditor/plugins/image/dialogs/image.js
ckeditor/plugins/flash/dialogs/flash.js
ckeditor/plugins/link/dialogs/link.js

image

flash

link

附录：ckeditor隐藏“浏览服务器”按钮

由于ckeditor中的"上传图片""上传文件""上传FLASH” 三个功能中都有“浏览服务器”按钮，所以我们要修改3个JS文件，先打开ckeditor文件夹中的ckeditor\plugins\image\dialogs\image.js文件，CTRL+F，搜索"browseServer”，找到该词第一次出现的位置，在后面添加双引号内的内容",style:'display:none;'"。如下图：

再搜索"filebrowser",找到该词第二次出现的位置，如下图填入

CTRL+S保存该JS文件，出去刷新下自己的ckeditor，点击图片上传按钮后，你会发现浏览服务器按钮不见了。

下面去弄掉文件上传中的“浏览服务器”按钮。

打开ckeditor\plugins\link\dialogs\link.js文件，还是搜索"browseServer"第一次出现的地方，如下图插入双引号内的内容",style:'display:none;'"。

CTRL+S保存该JS文件，出去刷新下自己的ckeditor，点击“链接”按钮后，你会发现“文件上传选项”中的浏览服务器按钮不见了。

最后弄掉上传FLASH中的浏览服务器按钮，打开ckeditor\plugins\flash\dialogs\flash.js文件，还是搜索"browseServer"第一次出现的地方，如上图位置处插入双引号内的内容",style:'display:none;'"。（这个和上面的几乎一样，就不截图了）。CTRL+S保存该JS文件，出去刷新下自己的ckeditor，点击“上传FLASH”按钮后，你会发现浏览服务器按钮不见了。

至此，一个从前端到后台，浏览服务器被全面禁用了的ckeditor诞生了！

更多关于Laravel相关内容感兴趣的读者可查看本站专题：《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

您可能感兴趣的文章:

• 详解Laravel5.6 Passport实现Api接口认证
• 在Laravel5.6中使用Swoole的协程数据库查询
• 浅析Laravel5中队列的配置及使用
• Laravel5框架自定义错误页面配置操作示例
• Laravel5中Cookie的使用详解
• Laravel5中contracts详解
• Laravel5权限管理方法详解
• Laravel5中防止XSS跨站攻击的方法
• laravel5.4+vue+element简单搭建的示例代码
• CKeditor4 字体颜色功能配置方法教程
• 手把手教你 CKEDITOR 4 扩展插件制作
• CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】