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

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

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

CKEDITOR.replace( 'editor' );

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

如有问题，欢迎可留言！