欢迎来到资源库(www.zyku.net)

工具资源

当前位置:首页 > 网站运营 > 工具资源

CKEditor结合CKFinder上传管理图片教程

时间:2017-12-16|栏目:工具资源|点击:

CKEditor编辑器已不再自带图片上传功能,如果需要用到上传图片的功能,要么自己开发,不想自己开发的可以使用官方的文件管理CKFinder进行图片的上传管理!

CKFinder是一款强大而易于使用的Web浏览器的Ajax文件管理器,可以配合CKEditor编辑器进行图片文件的上传管理,下面介绍基本的使用方法:

首先到官方网站下载CKEditor和CKFinder,这里下载的是PHP版本的CKFinder,所以在使用前确保已安装PHP的运行环境,然后在需要显示编辑器的地方调用编辑器,如不会调用编辑器的,请看这篇文章《CKEditor编辑器在项目中简单的调用方法

1、打开CKEditor文件夹找到配置文件“config.js”,在里面写入下面代码然后保存,注意根据自己的项目需求修改下面的链接:

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; 
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl  = 'ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl  = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

2、打开CKFinder配置文件“config.php”找到如下代码:

$config['authentication'] = function () {
    return false;
};

将“false”改为“true”,保存!

此时点击编辑器图片上传按钮,上传标签和浏览服务器功能已经出现了,上传一张图片试试,如下图所示:

CKEditor结合CKFinder上传管理图片教程

图片显示已经上传成功了,然后我们点击浏览服务器按钮,如下图所示:

CKEditor结合CKFinder上传管理图片教程

这里会显示已经上传的图片,如果图片比较多的话,可以到CKFinder文件管理器中进行批量上传,点击图片可以进一步操作,如下图所示:

CKEditor结合CKFinder上传管理图片教程

但是我们在点击“删除”图片操作的时候会弹出提示“ This is a demo version of CKFinder 3 ”,其实CKFinder是要收费的,所谓的试用版,也和收费之后一样的功能,只是无法删除图片会有提示而已,看着不爽,用起来还是一样,如果实在不行,可以在网上找一下破解方法。

3、去除图片预览里的英文提示的方法:

CKEditor结合CKFinder上传管理图片教程

找到CKEditor编辑器的配置文件“config.js”,在里面写入下面一行代码:

config.image_previewText=' '; //预览区域显示内容

从新打开编辑器发现已经没了提示:

CKEditor结合CKFinder上传管理图片教程

(资源库 zyku.net)

上一篇:CKEditor利用ThinkPHP上传图片的方法

栏    目:工具资源

下一篇:CKEditor编辑器上传图片禁止自动设置宽高的方法

本文标题:CKEditor结合CKFinder上传管理图片教程

本文地址:https://www.zyku.net/gongju/1575.html

推荐教程

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

沪ICP备15050984号-2