發表文章

目前顯示的是 四月, 2011的文章

html線上所見即得編輯器套件 懶人包

圖片
我們在建置動態網站的時候其實在後台讓使用者可以自由編輯內文已經是很普遍的現象了
不過還要要來介紹一下CKeditor和Ckfinder這兩個東西

CKeditor 這是一套目前非常多人使用的線上編輯套件,基本上一般人會需要的功能都已經在裡面了,不過不知道為什麼裡面沒有包含圖檔上傳的功能。
好家在,官方有推出一個外掛叫做Ckfinder可以用來支援檔案上傳的功能(那幹嘛不建在一起)因此,大部分的教學文章都會把這兩個套件合在一起說明

下載檔案:
http://ckeditor.com/download  這裡面可以找到CKeditor和Ckfinder

step1:解壓縮CKeditor和Ckfinder
把兩個套件的壓縮檔解開後放在同一個階層的資料夾中(建議)另外在建立一個資料夾當作檔案上傳的資料夾

step2:修改CKeditor設定
CKeditor的設定檔只要修改 ckeditor/config.js 一個檔案就可以完成設定
剛開始打開的時候應該是什麼都沒有設定,這時候你只要把要使用ckfinder外掛的語法貼進來



CKEDITOR.editorConfig = function( config )
{

//ckfindor上傳功能設定
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'…