目錄

介紹CKEdiotr4+CKFinder3

CKEditor4是一個強大的富文本編輯器，這是國外開源，功能非常齊全，大部分基本滿足需求，插件擴展功能強大。 但是訪問官方速度有點慢，因為它是國外嘛！！！全都是英文，看不懂英文的話瀏覽器應該有自帶翻譯即可。

CKFinder3主要用于一個文件上傳器功能的插件，上傳圖片、視頻、文檔等都支持的，非常有好處就是它擁有自帶Ajax文件管理器，不需編寫關于ajax的代碼，能提供文件夾樹形結構，選擇好圖片后只要一點擊上傳服務器即可，相當于把你的圖片已經放在Ajax文件管理器里。它的功能非常強大，比如可以刪除、上傳、下載等一些功能，用起來非常方便！

安裝

1.CKEditor4官方下載鏈接:

我選擇是全包的共有72個插件并下載：

2.CKFinder3官方下載鏈接:

這個CKFinder3支持三種編程語言分別是php、.net及java，我一般寫后端都是php，因此選擇php版本，然后選擇下載ZIP。

使用

1.CKEditor4

下載好之后，如何把這富文本編輯器放入網頁中呢？

首先在編寫html代碼：

為什么要用元素，而不用

元素呢？因為它本來是文本域，但是對于終端來說，文本域是不可見的，為了生成富文本編輯器的實現，所以必須要用元素。

因為它本身是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整合，大功告成！用起來是不是很簡單？

如有問題，歡迎可留言！

總結

以上是生活随笔為你收集整理的ckfinder 配置 php,CKEditor4+CKFinder3（php版本）安装及配置方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。