为了账号安全,请及时绑定邮箱和手机立即绑定

PHP中配置Ckeditor+Ckfinder 完成图片上传

标签:
PHP

CKeditor文件下载:http://ckeditor.com/download ,目前的最新版本是CKEditor 4.2.1。

CKeditor是完全基于插件,它通过扩展组件以符合具体需求。比如常见的文件上传功能是默认没有的,仅提供了基本的文本编辑功能。要实现图片上传,则需要由另一扩展个组件 CKFinder。

第一:安装配置CKEditor

在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下。

1.  将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/。

2. 页面引用CKeditor,关键代码如下

<scripttype="text/javascript"class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ckeditor/ckeditor.js"></script><textareacols="80"name="content"rows="10"></textarea>

至此,默认版CKeditor就已经安装部署好了,此时你可以通过修改/admin/ckeditor/ckeditor.js来配置编辑器,如字体、背景色、语言、界面高宽、编辑器按钮分布等,详细参数见官方文档:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoUpdateElement。

把需要设置的内容加入此函数中间即可。


CKEDITOR.editorConfig =function( config ){// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';};


第二:安装配置CKfinder

CKfinder是官方组件,下载地址如下:http://ckfinder.com/download (注意:与ckeditor不是同一网站)。

1.  将下载的ckfinder_php_2.0.1.zip 解压,复制目录下的ckfinder文件夹至编辑器目录,/admin/ckeditor。

2.  Ckfinder默认配置是不能上传文件到服务器的,所以要对ckfinder文件下的config.php做修改,将其文件里的CheckAuthentication() 返回值return false 改为return true。


functionCheckAuthentication(){returnfalse;//改为return false}


3.  设置文件上传路径。打开上一步中的config.php文件,找到”$baseUrl”,这个变量定义了ckfinder文件上传的目录,将值设 为”$baseurl=’../data /’,文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

第三:整合,实现图片上传功能

1.  在编辑器页面头部引用ckfinder.js文件,代码如下:


<scripttype="text/javascript"class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ckeditor/ckfinder/ckfinder.js"></script>

在编辑器textarea下面引用如下代码:


<scripttype="text/javascript">    CKEDITOR.replace('editor1',{    filebrowserBrowseUrl :'ckeditor/ckfinder/ckfinder.html',    filebrowserImageBrowseUrl :'ckeditor/ckfinder/ckfinder.html?Type=Images',    filebrowserFlashBrowseUrl :'ckeditor/ckfinder/ckfinder.html?Type=Flash',    filebrowserUploadUrl :'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',    filebrowserImageUploadUrl :'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',    filebrowserFlashUploadUrl :'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'});</script>

3.测试图片上传,看看是否出现了如下画面,其中红线内的按钮就是上述步骤的成果。


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消