ckfinder 配置 php,CKEditor4+CKFinder3(php版本)安装及配置方法

本文详细介绍了如何集成CKEditor4和CKFinder3,CKEditor4是一个功能强大的富文本编辑器,而CKFinder3则是一个便捷的文件上传器,支持图片、视频等文件的管理。通过CKFinder3的Ajax文件管理器,可以轻松实现文件上传。文章还提供了安装、使用和配置这两款工具的步骤,包括自定义CKEditor4的工具栏和配置CKFinder3的上传接口。此外,解决CKFinder3的安全问题也被提及。

目录

介绍CKEdiotr4+CKFinder3

CKEditor4是一个强大的富文本编辑器,这是国外开源,功能非常齐全,大部分基本满足需求,插件扩展功能强大。 但是访问官方速度有点慢,因为它是国外嘛!!!全都是英文,看不懂英文的话浏览器应该有自带翻译即可。

CKFinder3主要用于一个文件上传器功能的插件,上传图片、视频、文档等都支持的,非常有好处就是它拥有自带Ajax文件管理器,不需编写关于ajax的代码,能提供文件夹树形结构,选择好图片后只要一点击上传服务器即可,相当于把你的图片已经放在Ajax文件管理器里。它的功能非常强大,比如可以删除、上传、下载等一些功能,用起来非常方便!

安装

1.CKEditor4官方下载链接:

我选择是全包的共有72个插件并下载:

75a16830f9f2b21af6780496592537e2.png

2.CKFinder3官方下载链接:

这个CKFinder3支持三种编程语言分别是php、.net及java,我一般写后端都是php,因此选择php版本,然后选择下载ZIP。

bde882ce6ff77d8a442a5f7834c66751.png

使用

1.CKEditor4

下载好之后,如何把这富文本编辑器放入网页中呢?

首先在编写html代码:

为什么要用元素,而不用

元素呢?因为它本来是文本域,但是对于终端来说,文本域是不可见的,为了生成富文本编辑器的实现,所以必须要用元素。

因为它本身是js应用程序,所以需要去加载它,需要在html中引入一个js文件。注:前提是安装好CKEditor的目录,需要根据你CKEditor4的目录路径的不同而不同,路径文件一定要正确:

这个是不可缺少的核心,所以需要调用CKEDITOR.replace办法,否则显示不了,切记!

CKEDITOR.replace( 'editor' );

最后实现出来了,OK!如下:

d023c1f89a502d68e0298eb368653c7e.png

2.CKFinder3

下载好之后,这个使用比较简单,因为它本身是一个插件而已,如何快速地使用?

首先找到文件路径ckfinder->ckfinder.html并打开网页,如果遇到出现这个问题,如下:

032fa4e3edf57b317a697117c0baea49.png

这个意思是本身安全的原因,文件管理器被禁用了。

怎么解决?首先找到文件路径ckfinder->config.php并打开,把第29行的flase改成true:

883a77d38a016816400d363dffd43db1.png

以上的部分内容,如果没问题的话,可忽略。

最后,ckfinder即可正常使用。注:前提是必须要开服务器(php)的环境下,保证能够正常使用,否则就会报错的信息。

5a0fa431e6f634cbbf6f194b77a80515.png

配置

1.CKEditor4

如果你觉得富文本编辑器的工具栏插件太多,或者没必要的插件,这个本身可支持自定义的插件。怎么操作去定制?如下:

首先找到路径文件ckdeitor->samples->index.html并打开;打开后,点击”TOOLBAR CONFIGURATOR”:

607728bed05a5a34bac02d6c29ec5400.png

点击后看到如下:

这就是定制的工具栏编辑器,你觉得没必要的插件可取消打勾;有必要的插件可打勾。

如果你觉得定制的工具栏没问题的话,可以点击“Get toolbar config”。

4baf9584184d403123a295ff3a2a383f.png

点击后就会整个代码出来,然后把它复制到ckeditor->config.js里面去。

eb26ff933bee50297571bd2d34cfbeab.png

CKEDITOR.editorConfig = function( config ) {

config.toolbarGroups = [

'/',

{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },

{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },

{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },

{ name: 'forms', groups: [ 'forms' ] },

'/',

{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },

{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },

{ name: 'links', groups: [ 'links' ] },

{ name: 'insert', groups: [ 'insert' ] },

'/',

{ name: 'styles', groups: [ 'styles' ] },

{ name: 'colors', groups: [ 'colors' ] },

{ name: 'tools', groups: [ 'tools' ] },

{ name: 'others', groups: [ 'others' ] },

{ name: 'about', groups: [ 'about' ] }

];

config.removeButtons = 'Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,PageBreak,Maximize,ShowBlocks,About,CreateDiv,Blockquote,Outdent,Indent,BidiLtr,BidiRtl,Unlink,Anchor,Language,PasteText,PasteFromWord,Paste,Preview,Print,Flash';

};

如上的就是配置分组是由toolbarGroups设置定义的。如果还要再定制的话,可按照以上的操作步骤。

因此,这就是开发人员最常用的需求。

2. CKFinder3

上传图片或视频是我们最常用的,如何去配置它的接口呢?这个配置很简单,需要去写接口即可,把这个接口的代码复制到ckeditor->config.js,添加如下:

config.filebrowserBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html?Type=Images';

config.filebrowserFlashBrowseUrl='../../lib/ckeditor/ckfinder/ckfinder.html?Type=Flash';

config.filebrowserUploadUrl ='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl='../../lib/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

以上的URL值需要根据你的ckfinder路径文件位置,切记,路径文件一定要正确!!!

最后把CKEditor4+ CKFinder3整合,大功告成!用起来是不是很简单?

如有问题,欢迎可留言!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值