Labels

2005 (136) 2004 (99) 2006 (84) 2007 (41) 2008 (41) 簡單生活 (24) 2012 (14) 網頁設計 (14) 電腦技巧 (13) 2009 (12) 2010 (10) PHP (10) 台灣晃一晃 (9) Learn Note (7) 地球這麼大 (6) 2011 (5) Mysql (3) Smarty (3) Vista (3) 手機待吐 (2) 2014 (1) 2021 (1) Composer (1) Laravel (1) MAC (1) MAMP (1) 新新人類新科技 (1)

20100225

網頁內嵌編輯器(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,下載後不會有)

首要工作:認識一下會用到的檔案吧!

  • fckconfig.js:工具列設定、外觀設定...等等都靠它!
  • fckeditor.php:有提供php用的呼叫函式和功能。因為阿批是寫PHP,當然就要找它來幫我呼叫嚕!
  • fckeditor/editor/filemanager/connectors/php/config.php:圖片上傳的設定檔,稍後用到
  • 傳送及接收參數的頁面:放心,這邊阿批會寫一點範例給大家先玩玩!
主要是以上幾個檔案就可以很簡單的設定Fckeditor!再來就開始我們的Fckeditor簡易設定之旅!
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">
"; //建立表單(因網至設定問題,直接複製請把form前的斜線(/)拿掉

$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