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

安装

1.CKEditor4官方下载链接:

https://ckeditor.com/ckeditor-4/download/

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

2.CKFinder3官方下载链接:

https://ckeditor.com/ckfinder/download/#php

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

使用

1.CKEditor4

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

首先在编写html代码：

<!--富文本编辑器-->
<textarea id="editor" name="editor"></textarea>

为什么要用<textarea>元素，而不用<div>元素呢？因为它本来是文本域，但是对于终端来说，文本域是不可见的，为了生成富文本编辑器的实现，所以必须要用<textarea>元素。

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

<script type="text/javascript" src="../../lib/ckeditor/ckeditor.js"></script>

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

<script>

      CKEDITOR.replace( 'editor' );

</script>

最后实现出来了，OK！如下：

2.CKFinder3

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

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

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

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

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

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

配置

1.CKEditor4

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

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

点击后看到如下：

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

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

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

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整合，大功告成！用起来是不是很简单？

如有问题，欢迎可留言！

CKEditor4+CKFinder3（php版本）安装及配置方法

目录

介绍CKEdiotr4+CKFinder3

安装

使用

配置

猜你喜欢