Laravel5.6框架使用CKEditor5相关配置详解
本文实例讲述了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.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','AdminArticlesCreateController@uploadFile');
#从word中复制内容时,自动上传图片路由
Route::post('/create/uploadFile&responseType=json','AdminArticlesCreateController@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参数
<!-- CSRF Token --
<meta name="csrf-token" content="{{ csrf_token() }}"
然后,为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文件夹中的ckeditorpluginsimagedialogsimage.js文件,CTRL+F,搜索”browseServer”,找到该词第一次出现的位置,在后面添加双引号内的内容”,style:’display:none;'”。如下图:
再搜索”filebrowser”,找到该词第二次出现的位置,如下图填入
CTRL+S保存该JS文件,出去刷新下自己的ckeditor,点击图片上传按钮后,你会发现浏览服务器按钮不见了。
下面去弄掉文件上传中的“浏览服务器”按钮。
打开ckeditorpluginslinkdialogslink.js文件,还是搜索”browseServer”第一次出现的地方,如下图插入双引号内的内容”,style:’display:none;'”。
CTRL+S保存该JS文件,出去刷新下自己的ckeditor,点击“链接”按钮后,你会发现“文件上传选项”中的浏览服务器按钮不见了。
最后弄掉上传FLASH中的浏览服务器按钮,打开ckeditorpluginsflashdialogsflash.js文件,还是搜索”browseServer”第一次出现的地方,如上图位置处插入双引号内的内容”,style:’display:none;'”。(这个和上面的几乎一样,就不截图了)。CTRL+S保存该JS文件,出去刷新下自己的ckeditor,点击“上传FLASH”按钮后,你会发现浏览服务器按钮不见了。
至此,一个从前端到后台,浏览服务器被全面禁用了的ckeditor诞生了!
- 厚土Go学习笔记 | 22. 实现Pic
- ie8和chrome获取上传图片的宽度和高度等尺寸
- 厚土Go学习笔记 | 21. range用法
- Golang Stub初体验
- 厚土Go学习笔记 | 20. slice 继续
- 数据挖掘算法之深入朴素贝叶斯分类
- 歪?我想要一个XXE。
- 厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素
- 工具| 手把手教你制作信息收集器之网站备案号
- 厚土Go学习笔记 | 18. 数组
- 厚土Go学习笔记 | 17. 结构体及用指针访问结构体
- Java枚举类型的原理
- 厚土Go学习笔记 | 27. 斐波纳契闭包
- 代码审计| APPCMS SQL-XSS-CSRF-SHELL
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- 强大的 Stream API(三)
- 微软发布代码智能新基准数据集CodeXGLUE,多角度衡量模型优劣
- 强大的 Stream API(二)
- 无限想象空间,用Python玩转3D人体姿态估计
- 300亿美元,AMD为什么要买Xilinx?
- Angular5.0.0新特性
- 用Python实现坦克大战游戏 | 干货贴
- android studio 3.0 升级 项目遇到的问题及更改思路(问题小结)
- Android Studio 3.0被调方法参数名提示的取消方法
- Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
- 解决python多线程报错:AttributeError: Can't pickle local object问题
- TensorFlow2.1.0最新版本安装详细教程
- Android仿京东首页秒杀倒计时
- 超实用的android自定义log日志输出工具类
- spring进行mock测试