php-文章編輯器套件 ckeditor+kcfinder

#1 下載 CKEditor
CKEditor 其實就是一個像部落格新增文章頁面會出現的東西。點選右上角的 download 進行下載。並且放置於 /var/www/html （或 /var/www）

這裡你可以選擇三種不同的封包。或者點選左下角的 Or let me customize CKEditor 去勾選自己想要的編輯器內容。
 #2 修改 .html
<script src="ckeditor/ckeditor.js"></script> <!--這行是要把 textarea 裝飾成編輯器-->
<textarea class="ckeditor" id="editor" name="editor"></textarea> <!--class 設定成 ckeditor 才抓的到ckeditor.js喔。別忘記 id 跟 name 要設成一樣的-->
這時醜醜的textarea就變成美美的編輯器了。（我使用的是 standard package）

做到這邊你的文章大致上就能編輯了。最後還差一個步驟：圖片不能上傳！沒有圖片的網誌太可怕了。這時候就是kcfinder出場的時機啦。其實ckeditor 也有出ckfinder，但很可惜他是付費版的，因此這裡找了穩定的替代品kcfinder來管理圖片上傳。再使用kcfinder之前別忘了要確定你有php的圖片處理套件。可以利用
$ sudo apt-get install php5-gd
$ sudo apt-get install php5-imagick
$ sudo service apache2 restart
進行下載
 #3 下載 kcfinder
有時候 google 搜尋會找不到他，所以提供一些載點：
sourceforge 載點 官方網頁載點
這個資料夾也要放在 /var/www/html 內
#4 修改 ckeditor/config.js
再kcfinder的官方網頁點選右上角的 intergrate 可以看到要如何與 ckeditor 一起使用。開啟ckeditor 的檔案資料夾可以找到 config.js 檔案。在 CKEDITOR.editorConfig = function( config ) { 下插入

    config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
       config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
       config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';
       config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
       config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
       config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';
就完成了！所有一切接正常~
附上測試圖：

參考：https://www.https://www.youtube.com/watch?v=CCGeD1DrEOU