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','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;'"。如下图:

再搜索"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程序设计有所帮助。

(0)

相关推荐

  • laravel5.4+vue+element简单搭建的示例代码

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 1.下载laravel5.4,这边是下载地址(里面的配置文件都写得差不多了)! 2.打开package.json 内容如下 { "private": true, "scripts": { "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webp

  • 手把手教你 CKEDITOR 4 扩展插件制作

    本文实例讲述了CKEDITOR 4 扩展插件制作.分享给大家供大家参考,具体如下: 今天让我们来探索一下ckeditor的扩展功能,换句话说就是自定义按钮,以及点击按钮之后实现的功能. 要实现自定义按钮,我们要做几个事情: 1.准备一个图标,最好是16*16大小的png格式图片,你没有的话,姜哥帮你准备了一张. 2.在plugins目录下建立我们和自定义插件同名的目录,并且在里面建立一个叫plugin.js的文件. 3.在我们自己的插件目录中,建立一个dialogs目录,并且在里面新建一个与我们

  • Laravel5权限管理方法详解

    本文实例讲述了Laravel5权限管理的实现方法.分享给大家供大家参考,具体如下: 关于权限管理的思考 最近用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认证部分非常好做,就是管理员登录,记录session.这个laravel中也有自带Auth来实现这个.最麻烦就是权限认证. 权限认证本质上就是谁有权限管理什么东西.这里有两个方面的维度,谁,就是用户维度,在用户维度,权限管理的粒度可以是用户一个人,也可以是将用户分组,如果将用户分组,则涉及到

  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    本文实例讲述了CKEditor 4.4.1 添加代码高亮显示插件功能.分享给大家供大家参考,具体如下: 随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件.下面就来介绍如何使用Code Snippet这个代码高亮插件.本文还介绍了CKEditor中如何安装Code Snippet插件. 新版本附加信息 CKEdi

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

    很多企业做项目使用前后端分离,后端提供接口地址,前端使用接口地址拿数据,并渲染页面.那么,前端用户登录如何使用接口进行认证?网上各种教程写的不堪入目,完全看不懂,所以我根据自己的理解,写下此篇文章,希望能帮助到大家. 后端(Laravel5.6框架) 1.使用 composer 安装 Passport ,打开终端,执行命令: composer require laravel/passport #安装完成后,在composer.json文件中会看到文件版本信息 2.接下来,将 Passport 的

  • Laravel5中防止XSS跨站攻击的方法

    本文实例讲述了Laravel5中防止XSS跨站攻击的方法.分享给大家供大家参考,具体如下: Laravel 5本身没有这个能力来防止xss跨站攻击了,但是这它可以使用Purifier 扩展包集成 HTMLPurifier 防止 XSS 跨站攻击. 1.安装 HTMLPurifier 是基于 PHP 编写的富文本 HTML 过滤器,通常我们可以使用它来防止 XSS 跨站攻击,更多关于 HTMLPurifier的详情请参考其官网:http://htmlpurifier.org/.Purifier 是

  • Laravel5中Cookie的使用详解

    今天在Laravel框架中使用Cookie的时候,碰到了点问题,自己被迷糊折腾了半多小时.期间研究了Cookie的实现类,也在网站找了许多的资料,包括问答.发现并没有解决问题.网上的答案都是互相抄袭,互相转载.其实并没有什么用处.好在最后,我找到了决绝方法.奔着为广大Laravel爱好者和开发人员负责的精神,同时也希望大家在使用Cookie时少走弯路,在这里把在Laravel中Cookie的设置和读取方法贡献出来,供大家批评指正. 概述 Cookie的添加其实很简单,直接使用Cookie::ma

  • CKeditor4 字体颜色功能配置方法教程

    本文实例讲述了CKeditor4 字体颜色功能配置方法.分享给大家供大家参考,具体如下: 今天动手ckeditor编辑器的时候发现工具栏上并没有可以更改字体颜色和背景颜色的按钮,所以我上网搜了下,网上特别多config.js文件配置的代码了,看得眼花缭乱的我选择把全部代码都复制下来.结果当然是没用的--一开始我还能有文本框.工具栏,到后来就变成什么都没有了. 后来我找到了ckeditor的文档:https://ckeditor.com/docs/index.html,找到里面的指南 在搜索框里搜

  • 在Laravel5.6中使用Swoole的协程数据库查询

    什么是Swoole 直接套用Swoole官网的介绍:PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列,毫秒定时器,异步文件读写,异步DNS查询. Swoole内置了Http/WebSocket服务器端/客户端.Http2.0服务器端. Swoole官网的文档不够丰富啊,这比较头疼,但大部分的问题都解释了.如果你对Swoole很感兴趣,那么看看这个S

  • Laravel5框架自定义错误页面配置操作示例

    本文实例讲述了Laravel5框架自定义错误页面配置操作.分享给大家供大家参考,具体如下: ♩ 背景 最近试着学习 laravel 5.5,使用 composer 下载新的框架源代码 composer create-project --prefer-dist laravel/laravel lar5Pro 5.5.* 发现在输入错误的链接时,会有如下的提示信息: 想到,一般成型的网站都会自定义404.501.503等页面,所以通过网上搜索方法,进行测试,可推荐如下的实现过程 - 框架: Lara

  • Laravel5中contracts详解

    我们先来看看官方文档中对contracts的定义: Laravel's Contracts are a set of interfaces that define the core services provided by the framework. 意思是说Laravel的Contracts是一个由 框架提供 的定义了 核心服务接口 的集合. 也就是说,每一个Contract都是一个接口,对应一个框架核心服务. 那它的意义何在?官网给出的解释也很简单:使用接口是为了 松耦合 和 简单 . 先

  • 浅析Laravel5中队列的配置及使用

    前言 队列常常用于两种场景,一种是高并发的情况,一种是耗时的操作,可以将任务放到队列中去,消费者从队列取任务执行,当然还有失败的情况如何处理,以及延迟,重试,更复杂的情况还有优先级的实现. 在Laravel 5中使用队列非常简单,并且失败处理,延迟,重试的方法都已经实现,下面简单尝试了一下Laravel的队列服务. Laravel默认支持以下几种队列服务:sync, database, beanstalkd, sqs, redis,本例使用redis作为队列服务,需先配置好Redis服务. 1.

随机推荐