本文实例讲述了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','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参数

<!-- 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文件夹中的ckeditor\plugins\image\dialogs\image.js文件,CTRL F,搜索"browseServer”,找到该词第一次出现的位置,在后面添加双引号内的内容",style:'display:none;'"。如下图:

ckeditor 中去掉浏览服务器按钮

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

ckeditor 中去掉浏览服务器按钮

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

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

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

ckeditor 中去掉浏览服务器按钮

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框架使用CKEditor5相关配置详解的更多相关文章

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

    这篇文章主要介绍了Laravel5.6框架使用CKEditor5相关配置,结合实例形式详细分析了Laravel5.6框架整合CKEditor5编辑器相关操作技巧与注意事项,需要的朋友可以参考下

  2. 详解Laravel5.6 Passport实现Api接口认证

    这篇文章主要介绍了详解Laravel5.6 Passport实现Api接口认证,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. laravel5.6框架操作数据curd写法(查询构建器)实例分析

    这篇文章主要介绍了laravel5.6框架操作数据curd写法(查询构建器),结合实例形式分析了laravel5.6查询构建器基本实现及操作数据curd相关使用技巧,需要的朋友可以参考下

  4. 浅谈laravel 5.6 安装 windows上使用composer的安装过程

    今天小编就为大家分享一篇浅谈laravel 5.6 安装 windows上使用composer的安装过程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  5. laravel5.6 框架操作数据 Eloquent ORM用法示例

    这篇文章主要介绍了laravel5.6 框架操作数据 Eloquent ORM用法,结合实例形式详细分析了laravel5.6 框架使用Eloquent ORM操作数据增删改查相关实现技巧,需要的朋友可以参考下

  6. laravel5.6中的外键约束示例

    今天小编就为大家分享一篇laravel5.6中的外键约束示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  7. 详解Laravel5.6通过路由进行API版本控制的简单方法

    这篇文章主要介绍了详解Laravel5.6通过路由进行API版本控制的简单方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. laravel5.6实现数值转换

    今天小编就为大家分享一篇laravel5.6实现数值转换,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  9. laravel5.6 框架邮件队列database驱动简单demo示例

    这篇文章主要介绍了laravel5.6 框架邮件队列database驱动,结合实例形式详细分析了laravel5.6邮件队列database驱动具体设置、实现步骤与相关操作技巧,需要的朋友可以参考下

随机推荐

  1. PHP个人网站架设连环讲(一)

    先下一个OmnihttpdProffesinalV2.06,装上就有PHP4beta3可以用了。PHP4给我们带来一个简单的方法,就是使用SESSION(会话)级变量。但是如果不是PHP4又该怎么办?我们可以假设某人在15分钟以内对你的网页的请求都不属于一个新的人次,这样你可以做个计数的过程存在INC里,在每一个页面引用,访客第一次进入时将访问时间送到cookie里。以后每个页面被访问时都检查cookie上次访问时间值。

  2. PHP函数学习之PHP函数点评

    PHP函数使用说明,应用举例,精简点评,希望对您学习php有所帮助

  3. ecshop2.7.3 在php5.4下的各种错误问题处理

    将方法内的函数,分拆为2个部分。这个和gd库没有一点关系,是ecshop程序的问题。会出现这种问题,不外乎就是当前会员的session或者程序对cookie的处理存在漏洞。进过本地测试,includes\modules\integrates\ecshop.php这个整合自身会员的类中没有重写integrate.php中的check_cookie()方法导致,验证cookie时返回的username为空,丢失了登录状态,在ecshop.php中重写了此方法就可以了。把他加到ecshop.php的最后面去就可

  4. NT IIS下用ODBC连接数据库

    $connection=intodbc_connect建立数据库连接,$query_string="查询记录的条件"如:$query_string="select*fromtable"用$cur=intodbc_exec检索数据库,将记录集放入$cur变量中。再用while{$var1=odbc_result;$var2=odbc_result;...}读取odbc_exec()返回的数据集$cur。最后是odbc_close关闭数据库的连接。odbc_result()函数是取当前记录的指定字段值。

  5. PHP使用JpGraph绘制折线图操作示例【附源码下载】

    这篇文章主要介绍了PHP使用JpGraph绘制折线图操作,结合实例形式分析了php使用JpGraph的相关操作技巧与注意事项,并附带源码供读者下载参考,需要的朋友可以参考下

  6. zen_cart实现支付前生成订单的方法

    这篇文章主要介绍了zen_cart实现支付前生成订单的方法,结合实例形式详细分析了zen_cart支付前生成订单的具体步骤与相关实现技巧,需要的朋友可以参考下

  7. Thinkphp5框架实现获取数据库数据到视图的方法

    这篇文章主要介绍了Thinkphp5框架实现获取数据库数据到视图的方法,涉及thinkPHP5数据库配置、读取、模型操作及视图调用相关操作技巧,需要的朋友可以参考下

  8. PHP+jquery+CSS制作头像登录窗(仿QQ登陆)

    本篇文章介绍了PHP结合jQ和CSS制作头像登录窗(仿QQ登陆),实现了类似QQ的登陆界面,很有参考价值,有需要的朋友可以了解一下。

  9. 基于win2003虚拟机中apache服务器的访问

    下面小编就为大家带来一篇基于win2003虚拟机中apache服务器的访问。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. Yii2中组件的注册与创建方法

    这篇文章主要介绍了Yii2之组件的注册与创建的实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下

返回
顶部