PHP中配置Ckeditor+Ckfinder 完成圖片上傳

用久了fckeditor，看慣了其略顯陳舊的界面，據說其弟弟CKeditor更酷更炫，今天就來試試吧。CKeditor文件下載：http://ckeditor.com/download ，目前的最新版本是CKEditor 3.4.2。

CKeditor是徹底基於插件，它經過擴展組件以符合具體需求。好比常見的文件上傳功能是默認沒有的，僅提供了基本的文本編輯功能。要實現圖片上傳，則須要由另外一擴展個組件 CKFinder。

第一：安裝配置CKEditor

在擴展CKfinder實現圖片上傳以前，咱們先把最基本的CKeditor編輯器安裝一下。

1．  將下載的ckeditor_3.4.2.zip解壓，複製目錄下的ckeditor文件夾至所需目錄，如/admin/。

2． 頁面引用CKeditor，關鍵代碼以下

<script type="text/javascript" src="http://blog.163.com/chudaozhe@126/blog/ckeditor/ckeditor.js"></script> <textarea cols="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。

function CheckAuthentication()     {           return false;//改成return false     }

3．  設置文件上傳路徑。打開上一步中的config.php文件，找到」$baseUrl」，這個變量定義了ckfinder文件上傳的目錄，將值設 爲」$baseurl=’../data /’，文件上傳後程序他會在此目錄下自動創建相應的文件夾如image、flash等。

第三：整合，實現圖片上傳功能

1．  在編輯器頁面頭部引用ckfinder.js文件，代碼以下：

<script type="text/javascript" src="http://blog.163.com/chudaozhe@126/blog/ckeditor/ckfinder/ckfinder.js"></script>

在編輯器textarea下面引用以下代碼：

    <script type="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．測試圖片上傳，看看是否出現了以下畫面，其中紅線內的按鈕就是上述步驟的成果。