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

日期：2020-05-21 栏目：程序人生浏览：次

路由配置

#文件上传路由
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;'"。如下图：

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

相关推荐