網頁內嵌編輯器(Fckeditor+Filemanager)，讓你的網頁圖文並茂
今年的天氣不曉得是怎麼搞得~去大陸沒遇到下雪，回國隔天就下了...
接著過年一整天都沒出去，因為都在下雨T_T....
然後....阿批也有CASE要趕，所以只好....也乖乖待在家做CASE...
anyway....還是得做，就算世界末日也要做完阿(誤).....
----------我是言歸正傳的分隔線--------------
越來越多網站後台都會須要用到編輯器，一來是可以讓一些使用者更方便的編輯，二來有些人不想要寫程式，可以用編輯器蒙混一下(XD)，再來就是.....阿批拖稿拖太久~連老師都看不下去了(誤)
這篇文章要介紹的是阿批最近使用的一款編輯器－Fckeditor
這款編輯器目前已有更新的強化版－Ckeditor...但是，卻沒有阿批想要的功能－圖片上傳 Orz，讓原本使用Ckeditor的阿批，瞬間被丟到垃圾山(喔~其實是心情跌到谷底拉~)...其實有第三方作者寫的程式一樣可以支援上傳，但只能做簡易的上傳，至於真的需要上傳的朋友可能還是不夠用，因此這篇文章還是以Fckeditor無痛內嵌為主!
雖說Ckeditor是較新的版本，但對像阿批這種其實是跟一般的Fckeditor使用者沒有甚麼差別。而基於想要更方便的(其實是懶惰...)使用圖像上傳功能，於是download了Fckeditor來玩玩....
Fckeditor跟Ckeditor都是同一家公司的，所提供的原始碼都是免費的。而雖然Ckeditor較新且功能完整，但使用Fckeditor的網站還是佔多數（當然要尋求幫助也比較有門路）。可以先至官網玩玩看Demo的版本，但Demo版以Ckeditor為主，(上面的上傳圖片功能是騙人的:P，下載後不會有)。
首要工作：認識一下會用到的檔案吧！
1.打開你要置入的php頁面，加入：
include_once(“./fckeditor/fckeditor.php”) ; //呼叫fckeditor設定檔，也可把此檔放在你的include資料夾方便分類
$editor = new FCKeditor(‘fck_editor′) ; //new一個物件來用，要傳送的變數名稱，可自行修改
$editor ->BasePath = ‘./fckeditor/’ ; //Fckeditor的路徑
$editor ->ToolbarSet = 'Default' ;
$editor ->Value = ‘Hello World’ ; //要顯示在編輯器內的預設文字，你可以把資料庫抓出來的內容變數丟在這邊。
$editor ->Width = ‘500′; //編輯器寬度
$editor ->Height = ‘400′; //編輯器高度 "; ";
2.因為要有參數傳送的路徑，所以我們給個Form，直接承上接續（方法不一定要照此，可自行變化）
echo "< /form action="接收的頁面路徑" method="post">
$editor ->Create() ; //建立FCKeditor編輯器的物件
echo "< /form>"; //結束form
3.以上程式碼已可顯示一個編輯器以供使用，但現今的網站都有搭配後端資料庫，故以下提供簡短的接收DATA的程式碼做接收示範
$content = $_POST['fck_editor'];
//接收編輯器的內容變數，因編輯器所Create時的變數為第1步驟程式碼所設定，故需一至(本例以fck_editor為變數名稱)
設定完以上的程式碼，就可以先玩一下編輯器了~OK~大功告成!!!總算........不對，還有圖片上傳功能啊!!!!
別急著走開~以下我們要介紹上傳圖片的設定，當然也是非常無痛的設定!
在首要準備工作的第三個檔案，位於fckeditor/editor/filemanager/connectors/php/內，因阿批是使用php，所以就進入php資料夾來設定(若是其他語言的使用者則可以選擇其他的程式語言資料夾)，內有一config.php檔案，打開並設定：
$Config['Enabled'] = true ; //預設是關閉的，只要將它設為true就可以開啟圖片上傳功能。
其他的設定在config檔案裡都有說明，路徑、擴充套件等等，就讓大家自己摸摸啦!!不然就等下次的教學文(誤!)OK~這次真的是大功告成!!!可以再偷懶一陣子了~XD
接著過年一整天都沒出去，因為都在下雨T_T....
然後....阿批也有CASE要趕，所以只好....也乖乖待在家做CASE...
anyway....還是得做，就算世界末日也要做完阿(誤).....
----------我是言歸正傳的分隔線--------------
越來越多網站後台都會須要用到編輯器，一來是可以讓一些使用者更方便的編輯，二來有些人不想要寫程式，可以用編輯器蒙混一下(XD)，再來就是.....阿批拖稿拖太久~連老師都看不下去了(誤)
這篇文章要介紹的是阿批最近使用的一款編輯器－Fckeditor
這款編輯器目前已有更新的強化版－Ckeditor...但是，卻沒有阿批想要的功能－圖片上傳 Orz，讓原本使用Ckeditor的阿批，瞬間被丟到垃圾山(喔~其實是心情跌到谷底拉~)...其實有第三方作者寫的程式一樣可以支援上傳，但只能做簡易的上傳，至於真的需要上傳的朋友可能還是不夠用，因此這篇文章還是以Fckeditor無痛內嵌為主!
雖說Ckeditor是較新的版本，但對像阿批這種其實是跟一般的Fckeditor使用者沒有甚麼差別。而基於想要更方便的(其實是懶惰...)使用圖像上傳功能，於是download了Fckeditor來玩玩....
Fckeditor跟Ckeditor都是同一家公司的，所提供的原始碼都是免費的。而雖然Ckeditor較新且功能完整，但使用Fckeditor的網站還是佔多數（當然要尋求幫助也比較有門路）。可以先至官網玩玩看Demo的版本，但Demo版以Ckeditor為主，(上面的上傳圖片功能是騙人的:P，下載後不會有)。
首要工作：認識一下會用到的檔案吧！
- fckconfig.js：工具列設定、外觀設定...等等都靠它!
- fckeditor.php：有提供php用的呼叫函式和功能。因為阿批是寫PHP，當然就要找它來幫我呼叫嚕!
- fckeditor/editor/filemanager/connectors/php/config.php：圖片上傳的設定檔，稍後用到
- 傳送及接收參數的頁面：放心，這邊阿批會寫一點範例給大家先玩玩!
1.打開你要置入的php頁面，加入：
include_once(“./fckeditor/fckeditor.php”) ; //呼叫fckeditor設定檔，也可把此檔放在你的include資料夾方便分類
$editor = new FCKeditor(‘fck_editor′) ; //new一個物件來用，要傳送的變數名稱，可自行修改
$editor ->BasePath = ‘./fckeditor/’ ; //Fckeditor的路徑
$editor ->ToolbarSet = 'Default' ;
$editor ->Value = ‘Hello World’ ; //要顯示在編輯器內的預設文字，你可以把資料庫抓出來的內容變數丟在這邊。
$editor ->Width = ‘500′; //編輯器寬度
$editor ->Height = ‘400′; //編輯器高度 "; ";
2.因為要有參數傳送的路徑，所以我們給個Form，直接承上接續（方法不一定要照此，可自行變化）
echo "< /form action="接收的頁面路徑" method="post">
$editor ->Create() ; //建立FCKeditor編輯器的物件
echo "< /form>"; //結束form
3.以上程式碼已可顯示一個編輯器以供使用，但現今的網站都有搭配後端資料庫，故以下提供簡短的接收DATA的程式碼做接收示範
$content = $_POST['fck_editor'];
//接收編輯器的內容變數，因編輯器所Create時的變數為第1步驟程式碼所設定，故需一至(本例以fck_editor為變數名稱)
設定完以上的程式碼，就可以先玩一下編輯器了~OK~大功告成!!!總算........不對，還有圖片上傳功能啊!!!!
別急著走開~以下我們要介紹上傳圖片的設定，當然也是非常無痛的設定!
在首要準備工作的第三個檔案，位於fckeditor/editor/filemanager/connectors/php/內，因阿批是使用php，所以就進入php資料夾來設定(若是其他語言的使用者則可以選擇其他的程式語言資料夾)，內有一config.php檔案，打開並設定：
$Config['Enabled'] = true ; //預設是關閉的，只要將它設為true就可以開啟圖片上傳功能。
其他的設定在config檔案裡都有說明，路徑、擴充套件等等，就讓大家自己摸摸啦!!不然就等下次的教學文(誤!)OK~這次真的是大功告成!!!可以再偷懶一陣子了~XD
留言
張貼留言