FCKeditor

FCKeditor及IMCE的使用及安裝：2010年03月01日星期一
適用於：Drupal初學者，想更改Drupal theme外觀 的人，對CSS有興趣的人，對PHP有興趣的人，以前用Dreamweaver的人，以前用其他Blog CMS的人。本文用Drupal6.14，想在Drupal中使用Flash，詳見本文的環境。
一個內容網站不可少的是一個輸入內容的編輯器，本文介紹Drupal模組 FCKeditor及IMCE的使用及安裝(在drupaltaiwan.org已有IMCE模組介紹)。FCKeditor及IMCE的安裝是節譯自Oreilly的Using Drupal第82~89頁。FCKeditor只是個編輯器，加上IMCE這個影像/檔案上傳下載器才能產生圖文並茂的內容。可以先很快地去看一下如何上傳下載影像/檔案。
FCKeditor並非新東西，已有很多資訊，尤其是阿舍的FCKeditor安裝文章更是詳盡，但是，因FCKeditor很繁雜，加上IMCE更是令人困惑，看到Oreilly的Using Drupal第82~89頁以簡單方法安裝，十分有效率，故節譯之，一方面做個筆記，一方面以饗眾人。Drupal有些東西太多，近來覺得學Drupal應注重"不需要更改的東西"，而非"東試試設定這個西試試設定那個"，結果不work，找半天問題，浪費很多時間。用FCKeditor，先依本文簡易安裝成功，再試其他功能(可參考阿舍文章)，由簡入繁，以免多花費時間。
(一)使用FCKeditor：

舉例來說，如何安插一個影像？

1. Click<內容管理><建立內容><一般文章>後，出現FCKeditor，可以看到有許多tool，見圖一。
2. 圖中箭頭所指處是<插入/編輯影像>按紐，Click該按紐，會出現圖二。
3. Click 箭頭所指的<瀏覽伺服器端>，會出現圖三。注意圖三的三個星號處，上方星號處有<上傳><Thumnails><刪除><Resizes><Send to RCKEditor>五大功能，左方星號處<導覽>下方出現可以找到影像檔的資料夾，右方星號處為某個資料夾中的影像檔。如何將一個影像檔放到內容中？只需Click該影像檔名，再Click<Send to FCKEditor>即可。

見圖一，其他各個按紐均有其不同用途，將滑鼠移至按紐上即會顯示出用途。除了<插入/編輯影像>這個按紐外，再挑幾個按紐來看看：

1. 圖一第一排<原始碼>按紐：Click後會顯示html原始碼。如果不知"html原始碼"是什麼意思也不要緊，因為這正是FCKeditor的用處--讓不懂"html原始碼"的人也可以製作網頁。
2. 圖一第二排由左算起第四個按紐，<插入/編輯超連結>。
3. 圖一第三排最右的按紐是<顯示區塊>。

(二)安裝FCKeditor：以下節譯自Oreilly的Using Drupal第82~89頁。

(A)安裝模組。到http://drupal.org/project/fckeditor下載fckeditor模組，到http://drupal.org/project/imce下載imce模組。需注意，下載的fckeditor模組並不包含fckeditor本尊，因為fckeditor本尊是由非Drupal社群開發的，所以需再下載fckeditor本尊，詳如下：

阿羯經驗：下載fckeditor模組6.x-2.0版(2010-Jan-31)。下載imce模組6.x-1.3版(2009-Sep-25)。

1. 到http://www.fckeditor.net下載fckeditor本尊。
2. 下載列在最前面的版本--2.6.3版。
   

   阿羯經驗：(a) 最新版已進化至2.6.6版。(b)使用drupal module FCKeditor內的link至sourceforge下載fckeditor本尊2.6.6版(FCKeditor_2.6.6.tar.gz)。

   注意：若用http://www.fckeditor.net，會轉成http://ckeditor.com，再Click download後，需找FCKeditor下載，不要下載CKEditor，CKEditor和FCKEditor不同。

3. 將檔案自.tar.gz抽取出來成為fckeditor 資料夾。
   

   阿羯經驗：用7-Zip較Winzip更好抽取檔案。

4. 將http://drupal.org/project/fckeditor下載的fckeditor模組及http://drupal.org/project/imce下載的imce模組抽取出來後，放在sites/all/modules，再將(3.)的fckeditor 資料夾放到sites/all/modules/fckeditor 資料夾內去蓋掉其中原有的fckeditor 資料夾，檢查一下，如果有sites/all/modules/fckeditor/fckeditor/fckeditor.php檔，就對了。詳見圖四。

(B)設定fckeditor/IMCE模組。

1. Click <網站建置><模組>，Click <其他>，在FCKeditor及IMCE左方勾選<啟用>。
2. Click<使用者管理><權限>中勾選相關權限如下。
   • <access fckeditor> --> 匿名使用者(anonymous user)、已登入使用者(authenticated user)、編輯(editor)、網站管理者(site administrator)。
   • <administer editor> --> 網站管理者(site administrator)。
   • <allow fckeditor file uploads> --> 編輯(editor)、網站管理者(site administrator)。
     

     注意：所有的角色必需勾選<access fckeditor>。
     阿羯經驗：因Using Drupal書中例子是分匿名使用者(anonymous user)、已登入使用者(authenticated user)、編輯(editor)、網站管理者(site administrator)四項。故作如上設定，每個人可各自做不同設定。阿羯的設定見圖五。

3. 需將User 1設為網站管理者(site administrator)。設定方法：用User 1 (原始安裝Drupal時的user) 登入，Click <我的帳號 > <編輯> ，並勾選網站管理者(site administrator)角色。
4. 現在設定fckeditor profile。Click<網站設定><FCKeditor>。
5. 出現FCKediotr畫面，如圖六，有Default及Advanced兩個fckeditor profile。Click <Default>右的<編輯>，出現Edit FCKeditor profile畫面後作如下的修改後Click<儲存>：
   • Basic setup

   Roles allowed to use this profile --> 匿名使用者(anonymous user)、已登入使用者(authenticated user)。

   • File browser settings
     

     File browser type --> IMCE

6. Click<網站設定><FCKeditor>到FCKediotr畫面，如圖六， Click <Advanced>右的<編輯>，出現Edit FCKeditor profile畫面後作如下的修改後Click<儲存>：
   • Basic setup

     Roles allowed to use this profile --> 編輯(editor)、網站管理者(site administrator)。
     (去掉已登入使用者(authenticated user)的勾選)

   • File browser settings

   File browser type --> IMCE

   注意：可更改FCKeditor的tool bar 及增加tool bar 按紐(button)，在sites/all/modules/fckeditor中有fckeditor.config.js檔，用vim打開後修改即可。
   阿羯經驗：圖七是阿羯的Default profile設定。圖八是阿羯的Advanced profile設定。

(C)調整Drupal的輸入格式(input format) 及 FCKeditor之間對HTML處理的予盾關係。FCKeditor會在不知不覺中加入HTML，而Drupal經由輸入格式(input format)的"default Filtered HTML format"設定會消除很多HTML。

1. editor 用的 Advanced toolbar(見圖一)有許多按紐，可以產生各種HTML。editor toolbar給內部人士使用，例如：編輯(editor)、網站管理者(site administrator)，因而輸入格式(input format) 用Full HTML filter，以便讓editor toolbar加入的所有之HTML發揮功能。
2. 匿名使用者(anonymous user)、已登入使用者(authenticated user)所使用的default toolbar只加入少許HTML， 匿名使用者(anonymous user)、已登入使用者(authenticated user)並非內部人士，為了讓default toolbar加入的少許HTML可以顯現其功能，將設為"default Filtered format"的輸入格式(input format)，並加入一些其他的HTML(不能設為Full HTML filter)。
3. Click <網站設定><輸入格式>。
4. Click <Full HTML format>右的<設定>。
5. 只勾選編輯(editor)、網站管理者(site administrator)。其後Click<儲存設定>。
6. 現在，editor 用的 Advanced profile可以施展其HTML功能了。接著替default profile 調整HTML，Click <網站設定><輸入格式>後，Click <Filtered HTML> 的<設定>。在"Filtered HTML"畫面中Click上方的<設定>，出現"設定Filtered HTML"畫面，往下找到<可使用約HTML標簽>(見圖九)，在其下框框內加入<img> <div> <pre> <address> <h1> <h2> <h3> <h4> <h5> <h6> (HTML以空白分隔)，這些HTML會讓<插入/編輯影像>按紐(見圖一第二排箭頭處)、<格式>下拉選單顯示出來(見圖一第三列左邊第一個下拉式選單)。其後Click<儲存設定>。

(D)如果，現在使用一下<插入/編輯影像>按紐，會發現必需自己輸入影像的位址(url)，相當不便。為了要能瀏覽、上載、插入影像，就需要設定IMCE模組。

1. Click<網站設定><IMCE>。
2. 出現兩個profile ---> User-1及Sample profile，User-1 profile顯然是給User-1用的，自然可以給編輯(editor)、網站管理者(site administrator)使用，Sample profile可給一般的匿名使用者(anonymous user)、已登入使用者(authenticated user)所使用。Click User-1 profile右的<編輯>紐。
3. 將Profile name改為Advanced以便和FCKeditor Advanced profile相符。雖然名稱不是一定要相同，一樣的名稱是為了好辨識。
4. 將Maximum resolution改為800x600。
5. Click<儲存設定>。(見圖十)
6. 為了名稱的一致性，將Sample profile也改個名稱。Click<網站設定><IMCE>。出現兩個profile - User-1及Sample profile。Click Sample profile右的<編輯>紐。
7. 將Profile name改為Default以便和FCKeditor default profile相符。Click<儲存設定>。(見圖十一)
8. 最後，將profile和角色連結。Click<網站設定><IMCE>，將Role-profile assignment下的User Role連到Assignment profile，如下：
   • 網站管理者(site administrator) --> Advanced。
   • 編輯(editor) --> Advanced。
   • 已登入使用者(authenticated user) --> Default。
   • Click <儲存設定>。
9. 現在，用<建立內容>去產生一個內容，FCKeditor toolbar就會出現。如圖一。

阿羯經驗：

必需用User-1登入，才可進入<網站設定><IMCE><User-1 profile 或Sample profile>。
見圖十一。Default profile允許上傳的延伸檔名只有幾個-->gif、png、jpg、jpeg，均為影像檔的延伸檔名，Advanced profile 允許上傳的延伸檔名為"*"，代表所有的檔案均可上傳。

圖二：Click 箭頭所指的<瀏覽伺服器端>，會出現圖三。
圖三：注意三個星號處，上方星號處有<上傳><Thumnails><刪除><Resizes><Send to RCKEditor>五大功能，左方星號處<導覽>下方出現可以找到影像檔的資料夾，右方星號處為某個資料夾中的影像檔。如何將一個影像檔放到內容中？只需Click該影像檔名，再Click<Send to FCKEditor>即可。
圖四：將http://drupal.org/project/fckeditor下載的fckeditor模組及http://drupal.org/project/imce下載的imce模組抽取出來後，放在sites/all/modules，再將(3.)的fckeditor 資料夾放到sites/all/modules/fckeditor 資料夾內去蓋掉其中原有的fckeditor 資料夾，檢查一下，如果有sites/all/modules/fckeditor/fckeditor/fckeditor.php檔，就對了。見兩個星號處。
圖五：Click<使用者管理><權限>中勾選相關權限，Using Drupal書中例子是分匿名使用者(anonymous user)、已登入使用者(authenticated user)、編輯(editor)、網站管理者(site administrator)四項。故作如上設定，每個人可各自做不同設定。以下是阿羯網站的設定。
圖六：Click<網站設定><FCKeditor>，出現FCKediotr畫面，有Default及Advanced兩個fckeditor profile。Click <Default>右的<編輯>，出現Edit FCKeditor profile如圖七。
圖七：阿羯的Default profile設定。Click <Default>右的<編輯>，出現Edit FCKeditor profile畫面後，修改Profile name為Default及Roles allowed to use this profile及File browser type後，Click<儲存>。
圖八：阿羯的Advanced profile設定。出現Edit FCKeditor profile畫面後，修改Profile name為Adanced及Roles allowed to use this profile及File browser type後，Click<儲存>。
圖九：Click <網站設定><輸入格式>後，Click <Filtered HTML> 的<設定>。在"Filtered HTML"畫面中Click上方的<設定>，出現"設定Filtered HTML"畫面，往下找到<可使用約HTML標簽>(如下圖)，在其下框框內加入<img> <div> <pre> <address> <h1> <h2> <h3> <h4> <h5> <h6> (HTML以空白分隔)，這些HTML會讓<插入/編輯影像>按紐(見圖一第二排箭頭處)、<格式>下拉選單顯示出來(見圖一第三列左邊第一個下拉式選單)。其後Click<儲存設定>。
圖十：Click<網站設定><IMCE>。Click User-1 profile右的<編輯>紐，將Profile name改為Advanced以便和FCKeditor Advanced profile相符。雖然名稱不是一定要相同，名稱一樣是為了好辨識。將Maximum resolution改為800x600。
圖十一：Click<網站設定><IMCE>。Click Sample profile右的<編輯>紐，將Profile name改為Default以便和FCKeditor Advanced profile相符。雖然名稱不是一定要相同，名稱一樣是為了好辨識。
圖十二：Click <網站設定><IMCE>，再Click某一個profile右的<編輯>，找到Directories，其下有Diretory path、 Browse、上傳、Thumbnaisl、刪除、Resize五項可以修改。共可放五個Diretory path。
圖十三：Click <網站設定><FCKeditor>，在<個人資訊>下Click <Create new profile>。見下圖，除了原有的Advance、Default profile外，另產生了editor、authentic profile，共有四個profile。
圖十四：Click <網站設定><IMCE>，在<Configuration Profile >下Click <Add new profile>。見下圖，除了原有的Advance、Default profile外，另產生了editor、authentic profile，共有四個profile。下圖下方將同的角色指定不同的profile。
圖十五：Click <網站設定><FCKeditor>，在<個人資訊>下Click某個profile右的<編輯>，出現"Edit FCKeditor profile"畫面，找到<Editor appearance> 下的<Toolbar>下拉選單，共有Basic、Default、DrupalBasic、DrupalFiltered、DrupalFull五種toolbar。選擇時需注意該profile的HTML能力。
圖十六：Click <網站設定><FCKeditor>，在<個人資訊>下Click某個profile右的<編輯>，出現"Edit FCKeditor profile"畫面，找到<Editor appearance> ，設定其下的<Default state> -->停用，<Show disable/enable rich text editor toggle> --> Hide，<Use FCKeditor in a pop up window> --> 是。見下圖。 FCKeditor的螢幕跳出不好用！避免使用。
[附錄]其它FCKeditor + IMCE 或TinyIMCE、及相關的使用及安裝資訊：

drupal.org下載FCKeditor解壓縮後，可用wordpad或vim打開site/all/modules/fckeditor/readme.txt，有詳盡的FCKeditor安裝資訊(含加個按紐)。
在drupaltaiwan.org搜尋fckeditor，結果在此：搜尋後未見有人介紹過FCKeditor模組。
阿舍有關fckeditor安裝文章：part1、part2、part3、part4。十分詳細的好文。
fckeditor和Whyzziwig比較：本文指出FCKeditor的兩大障礙-太大及不能由一般使用者自建資料夾，因而有人轉用whizzywig。
whizzywig上，whizzywig下。senkao介紹whizzywig的好文，同時也指出為何要改用whizzywig。
FCKeditor有經驗使用者：senkao。

本文的環境是：

1. Drupal 6.14。
2. apache server設在Windows XP上，以http://localhost/drupal為例。
3. 所有的檔案在c:/xampp/內，以下的路徑均相對於c:/xampp/。
4. 各檔案均用vim editor打開，行數以vim內的行數為準。
5. 主機是遠振資訊cPanel環境。