[PHP]CKEditor & CKFinder

很多專案在開發時，都會遇到公告、最新消息等等需要編輯器的問題，

CKEditor就是一個很強大的所見即所得的線上文字編輯器，

官方網站

下載頁面

只要把整個專案抓下來，當作第三方套件，並引用ckeditor.js就可以使用了(專案裡會有sample)

另外CKSource也提供一個套件 CKFinder

CKFinder專門負責你網頁上傳檔案的管理，這部份也可以跟CKEditor結合在一起

結合需要將兩個專案放在同一個目錄底下，並修改以下設定：

1.修改ckeditor/config.js，在CKEDITOR.editorConfig中加入以下設定

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案

2.修改ckfinder/config.php的CheckAuthentication function

function CheckAuthentication()
{
	//將return false改成true (可以讓任何人上傳和管理檔案)
	return true;
}

3.修改ckfinder/config.php的$baseUrl路徑

$baseUrl = "設定圖片上傳路徑";

4.HTML引入ckeditor/ckeditor.js

<script src="ckeditor/ckeditor.js"></script>

5.在要啟用ckeditor的textarea加入class name ckeditor

<textarea  class="ckeditor">TEST</textarea>

另外有個地方要注意，如果用jQuery的serialize()把CKEdditor讀出來，會是修改前的舊內容，必須手動updateElement

CKEDITOR.instances.[textname].updateElement();