接著過年一整天都沒出去,因為都在下雨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