CKEditor利用ThinkPHP上传图片的方法
CKEditor可以说是一款流行度非常高的在线富文本编辑器,作为网站后台文本编辑器使用起来还是比较方便的,最近在安装CKEditor编辑器后发现并没有上传图片到服务器的功能甚至连上传图片的按钮都没有,原来CKEditor已经取消了图片上传功能,需要自己去配置才可实现图片上传,下面介绍下CKEditor利用ThinkPHP 5.0 来完成图片上传的小功能。
CKEditor版本:4.7.3
ThinkPHP版本:5.0
首先在页面引入CKEditor编辑器,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在线编辑器</title> <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> </head> <body> <div align="center"> <h1>在线编辑器</h1> <textarea id="editor2" name="editor2"></textarea> <script type="text/javascript">CKEDITOR.replace('editor2')</script> </div> </body> </html>
此时,我们就可以在浏览器中看到CKEditor编辑器了,点击插入图片功能,可以发现默认只能输入图片URL而不能本地上传图片,也没有浏览服务器的功能,如下图所示:
打开本地图片上传功能标签:
进入CKEditor文件夹,打开“plugins ->dialogs ”找到“image.js”文件,用编辑器打开,搜索hidden,找到id为'Upload'的hidden,将'!0'的'!'去掉,如下图所示:
此时刷新页面点击图片上传按钮会发现多了个上传标签,如下图所示:
此时就可以点击选择文件上传图片了,但是点击上传到服务器并不能上传,此时需要在ckeditor文件夹中的config.js配置文件中加一段代码:
config.filebrowserUploadUrl = '/ckeditorUpload?type=File'; config.filebrowserImageUploadUrl = "/ckeditorUpload?type=image"; config.filebrowserFlashUploadUrl = '/ckeditorUpload?type=Flash';
一般就加第一个就行了,也可以三个都加,顾名思义,看它的名字就会懂什么意思了吧,后面的是你的服务器后台响应过去的链接地址,在你的服务器实现上传,每种语言实现也就不一样,这里主要讲下ThinkPHP 5.0上传的方法。
控制器中上传方法如下:
public function upload(){ // 获取表单上传文件 例如上传了001.jpg $file = request()->file('upload'); // 移动到框架应用根目录/public/upload/ 目录下 $info = $file->validate(['size'=>15678000,'ext'=>'jpg,png'])->move(ROOT_PATH . 'public' . DS . 'upload'); if($info){ // 成功上传后 获取上传信息 $url = DS . 'upload' . DS .$info->getSaveName(); $cb = $_GET['CKEditorFuncNum']; $data = ['suffix' => $info->getExtension(), 'file_path' => $info->getSaveName(), 'create_time' => time(), 'user_id' => 1 ]; Db::name('asset')->insert($data); // 输出 jpg echo "<script>window.parent.CKEDITOR.tools.callFunction($cb, '$url', '');</script>"; }else{ // 上传失败获取错误信息 $cb = $_GET['CKEditorFuncNum']; $error = $file->getError(); echo "<script>window.parent.CKEDITOR.tools.callFunction($cb, '', '$error');</script>"; } }
然后就是浏览服务器的功能,可是在上面连按钮都没有,怎么实现呢?其实很简单的,只需在刚才的config.js文件里面加入以下这段代码即可:
config.filebrowserImageBrowseUrl = '/browerServer?type=image';
后面的是你服务器响应地址,保存后去刷新页面,发现,按钮已经出来了,如下图所示:
(资源库 www.zyku.net)
栏 目:工具资源
下一篇:CKEditor结合CKFinder上传管理图片教程
本文标题:CKEditor利用ThinkPHP上传图片的方法
本文地址:https://www.zyku.net/gongju/1574.html
您可能感兴趣的文章
- 06-27ThinkPHP 5.1 伪静态规则
- 06-26CKEditor 4 编辑器添加code标签按钮的方法
- 05-14CKEditor 5 编辑器设置语言高度以及项目中调用方法
- 05-13CKEditor 5 在线生成工具online-builder使用方法
- 05-13CKEditor 5 npm方式安装调用与配置教程
- 03-30thinkphp5 使用H-ui+ajax 提交数据
- 03-30ThinkPHP做文字水印时提示call an undefined function
- 03-30ThinkPHP 5.0 URL重写规则
- 04-24ThinkPHP将APP_DEBUG常量设置为false后报错的问题
- 12-11ThinkPHP 5.0 报错 A non well formed numeric value
- 03-13linux mount报错:you must specify the
- 01-10iphone13Pro盲人模式如何关闭
- 06-10PHP获取文件扩展名的方法
- 11-23小米wifi连接路由器教程介绍
- 03-05帝国CMS删除信息来源超链接和作者超链
- 02-13matplotlib画混淆矩阵与正确率曲线的
- 01-27华为手机NFC功能开启方法
- 01-11点都社区政务端-点都社区政务端应用软
- 03-25华为nova8开启nfc功能方法
- 10-04高德地图iOS开启车道级导航教程分享
最近更新
阅读排行
猜你喜欢
- 01-11疯狂看书-疯狂看书应用软件功能介绍
- 01-12北京汽车智惠管家-北京汽车智惠管家应
- 01-24华为手机拍照格式RAW设置方法
- 04-03thinkphp 字母函数详解T/I/N/D/M/A/R/
- 02-13python 如何在list中找Topk的数值和索
- 04-27opporeno5设置手机桌面时钟方法
- 01-09知学中文老师-知学中文老师应用软件功
- 01-11王牌扫描仪-王牌扫描仪应用软件功能介
- 11-27ios15开启无痕浏览模式教程分享
- 02-17vivox60pro自拍补光功能开启方法