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';//可上傳圖檔
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案
};


step3:修改Ckfinder設定
如同CKeditor，CKfinder也是只需要修改一個檔案就可以完成設定
是的！就是ckfinder/config.js

不過這個檔案會有兩個地方需要設定
a.  return flase 改成 return true
b. 設定檔案上傳後的路徑 $baseUrl

基本上上面的功能已經把CKeditor和CKfinder環境建好了，接下來就是在php頁面上面的套用啦！
html表單部分
<textarea name="editor1"></textarea>
php部分
include_once "ckeditor/ckeditor.php";
$CKEditor = new CKEditor();
$CKEditor->basePath = 'ckeditor/';
$CKEditor->replace("editor1");

include_once 指向的位置就是ckeditor資料夾中ckeditor.php的執行位址，basePath表示放置ckeditor主程式的路徑，replace裡面的參數就是textarea的name

要注意的是，php的那段語法需要皆在textarea後面才有用喔太早使用是沒用的


參考文章：
http://www.minwt.com/?p=2848

留言

張貼留言