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

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

Laravel相关配置

文件的上传与存储

参考文档：

https://laravel-中国。org/docs/laravel/5.6/requests/1367 # 1d 60 f1 https://laravel-china.org/docs/laravel/5.6/filesystem/1390 https://docs。凯迪特。com/ckeditor 4/latest/guide/dev _ file _ upload。html #响应-文件-上传-成功

创建符号链接

php artisan storage:link项目/公共/存储-项目/存储/应用/公共

修改配置文件config/filesystem.php

default '=env(' file system _ DRIVER '，' public ')修改服务器和服务器端编程语言(专业超文本预处理器的缩写)的配置文件中上传内容大小的限制

#修改服务器配置文件vim/usr/local/nginx/conf/nginx。confhttp { include mime。类型；默认类型应用程序/八位字节流；client _ max _ body _ size 10M.}#重启nginx/usr/local/nginx/sbin/nginx-s重新加载#修改进程配置文件vim/usr/local/etc/PHP/7.2/PHP。inipost _ max _ size=20M upload _ max _ file size=20M #重启PHP-fpm/usr/local/sbin/PHP 72-fpm重启编写文件处理方法

/** * 处理上传文件* @返回[类型][描述]*/public函数上传文件(请求$ Request){ $ postFile='上传'；$allowedPrefix=['jpg '，' png '，' doc '，' docx '，' xls '，' xlsx '，' zip '，' ppt '，' pptx '，' rar '，' pdf ']；//检查文件是否上传成功if(！$request-hasFile($postFile) ||！$ request-file($ postFile)-isValid()){ return $ this-CKEditorUploadResponse(0，'文件上传失败');} $扩展名=$ request-file($ PostFile)-扩展名();$ size=$ request-file($ PostFile)-get client size()；$ filename=$ request-file($ postFile)-getClientOriginalName()；//检查后缀名日志：信息('扩展名，[$ 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 ')；返回$this-CKEditorUploadResponse(1 ' '，$filename，$ path)；}/** * CKEditor上传文件的标准返回格式* @ param[type]$上传的[description]* @ param string $错误[description]* @ param string $ fileName[description]* @ param string $ URL[description]*/私有函数CKEditorUploadResponse($ uploaded，$error=' '，$filename=' '，$ URL=' '){ return[' uploaded '=$ uploaded，' fileName'=$filename，' url'=$url，' error '=[' message '=$ error]]；}路由配置

#文件上传路由路由：帖子('/create/uploadFile '，' Admin \ Articles \[电子邮件保护]')；#从单词中复制内容时，自动上传图片路由路由： post('/create/uploadFileresponseType=JSON '，' Admin \ Articles \[email protected]')；CKEditor相关配置

CKEditor配置参数：https://个文档。cke ditor。com/cke ditor 4/latest/API/cke ditor _ config。超文本标记语言

CKEDITOR.replace('content '，{ height:500，file tools _ request headers : { ' X-CSRF-TOKEN ' : $(' meta[name=' csrf-TOKEN ']')).attr('content') }，isFileUploadSupported : true，file browseruploadurl : '/create/uploadFile '，语言： 'zh-cn '，})；拉弗尔CSRF保护

相关文档：https://laravel-China . org/docs/laravel/5.6/csrf/1365 https://docs。cke ditor。com/cke ditor 4/latest/API/cke ditor _ config。html # CFG-文件工具_请求头

首先，在页面头部分添加跨站点请求伪造参数

！CSRF令牌-元名称='csrf-token '内容='{{ csrf_token() } '然后，为CKEditor编辑器的保险附约请求增加请求头参数

文件工具请求头： { ' X-CSRF-令牌' : $(' meta[name=' csrf-令牌']').attr('内容')}隐藏"浏览服务器"按钮

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

请参阅附录：图标隐藏浏览服务器按钮

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

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

图像

闪光

环

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

由于ckeditor中“上传图片”、“上传文件”和“上传FLASH”三个功能中都有“browseServer”按钮，我们需要修改三个JS文件，首先在ckeditor文件夹中打开cke ditor \ plugins \ image \ dialogs \ image . JS文件，CTRL F，搜索“browseServer”，找到第一次出现该词的位置，并在双引号中添加内容'、style: ' display:none''。下图：

再次搜索“文件浏览器”，找到该词第二次出现的位置，如下图所示

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

接下来，去掉文件上传中的“浏览服务器”按钮。

打开文件cke ditor \ plugins \ link \ dialogs \ link . js，或者搜索“browseServer”最先出现的地方，将内容用双引号插入，如下图所示style: ' display:none''。

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

最后，去掉上传FLASH中的browserver按钮，打开文件ckeditor \ plugins \ FLASH \ dialogs \ FLASH . js，或者搜索“browserver”最先出现的地方，如上图所示，在双引号中插入内容，style: ' display:none''。这个和上面这个差不多，就不截图了。CTRL S保存JS文件，出去刷新自己的ckeditor，点击“上传FLASH”按钮后，会发现浏览服务器按钮不见了。

至此，一台ckeditor诞生了，从前端到后台，浏览服务器完全瘫痪！

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

希望本文对基于Laravel框架的PHP编程有所帮助。