Drupal + CKEditor + Syntaxhighlighter + IMCE 整合安裝整理 - Drupal WYSIWYG

 

Drupal6.x + CKEditor3.2.1 +Syntaxhighlighter2.1.364 + IMCE的整合方法，這可以讓Drupal更容易Post文章。(這邊假設你已經安裝好了Drupal6.x)

增加的功能如下列：

• 所見即所得(WYSIWYG) - CKEditor。
• 圖片/影像/Flash可以輕鬆上傳，並以Ajax的方式瀏覽Server端的檔案，擇一插入 - IMCE。
• 程式碼高亮度表示 - Syntaxhighlighter。(注意：IE不支援)

IE不支援的問題已經在「修正CKEditor Syntaxhighlight plugin在IE會錯誤的問題」進行了修正。

使用到的資源如下：

• http://ckeditor.com/
• http://drupal.org/
• http://www.vcbeta.net/
• http://alexgorbatchev.com/wiki/SyntaxHighlighter

 

接著開始介紹安裝步驟：

安裝步驟詳細說明如下(交代每個安裝的意義)：

1. 將Drupal CKEditor模組與CKEditor主程式整合在一起，使Drupal可透過CKEditor模組設定CKEditor。
2. 整合CKEditor的plugin - syntaxhighlight，讓CKEditor的工具列增加可插入高亮度程式碼的按鈕，此步驟只讓CKEditor可自動產生Syntaxhighlight2.1.364所需要的語法(如<pre class="php">....)，還需安裝Syntaxhighlight2.1.364才可以在網頁上正確顯示。
3. 整合Drupal Syntaxhighlighter模組與Syntaxhighlighter，使Drupal可透過Syntaxhighlighter模組設定Syntaxhighlighter。
4. 安裝CKEditor模組、Syntaxhighlighter模組、IMCE模組至Drupal。(剛剛都只有事前整合而已)
5. 建立網站管理者身分，並勾選CKEditor權限。
6. 將User-1角色指派為網站管理者(神秘的User-1若不指派角色，有些功能似乎無法work...)
7. 將Full HTML輸入格式Filter全關閉。
8. 設定Syntaxhighlighter，勾選需要enable的語言。
9. 設定CKEditor的Advanced Profile，勾選可使用的角色，將Toolbar改成DrupalFull，以及設定File Browser Type為IMCE。
10. 開始使用快樂的編輯！

安裝圖文說明：

 

整合CKEditor3.2.1 + syntaxhighlight plugin

1. 下載CKEditor3.2.1

下載地點

http://ckeditor.com/download

 

 

2. 下載Drupal 的整合模組 CKEditor

 

下載地點

http://drupal.org/project/ckeditor

 

 

3. 整合 Drupal 整合模組 + CKEditor3.2.1主程式

將ckeditor-6.x-1.1.tar.gz解壓縮

 

將CKEditor3.2.1.zip主程式壓縮檔丟進ckeditor資料夾，選擇「解壓縮至此」，如此一來，就完成CKEditor的整合。

 

 

4. 整合CKEditor與syntaxhighlight plugin

這在某大陸同胞的部落格找到CKEditor3.2的syntaxhighlight plugin，連結如下

http://www.vcbeta.net/read.php/241.htm

 

在這邊，我們只需要將他CKEditor底下的syntaxhighlight plugin copy出來給我們自己用就可以了。

 

我們將它copy到CKEditor的主程式底下

 

接著來到CKEditor整合模組，編輯ckeditor.config.js設定檔(請勿編輯CKEditor3.2.1主程式底下的config.js，不但沒作用還可能引發錯誤)

 

接著為CKEditor增加syntaxhighlight plugin

1 config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );

 

為CKEditor工具列增加syntaxhighlight plugin用的button，這邊以DrupalFull為例

 

如此一來就完成了CKEditor主程式與syntaxhighlight的整合。

 

Syntaxhighlighter模組與Syntaxhighlighter整合

syntaxhighlighter模組下載地點

http://drupal.org/project/syntaxhighlighter

 

Syntaxhighlighter2.1.364主程式下載地點

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

 

解壓縮Syntaxhighlighter模組後，將Syntaxhighlighter2.1.364壓縮檔放入Syntaxhighlighter模組的資料夾內，並解壓縮(這邊要注意解壓縮的方式)

 

如此一來，就完成了Syntaxhighlighter模組整合。

 

安裝CKEditor模組、Syntaxhighlighter模組、IMCE模組

IMCE模組下載地點

http://drupal.org/project/imce

 

將剛剛整合好的CKEditor、Syntaxhighlighter、IMCE丟進Drupal modules底下，並進行啟用(這邊假設你已經知道如何新增管理module)

 

開始設定

 

1. 新增一個網站管理者角色，勾選CKEditor的權限，並將#User-1(網站建立者)指派為此角色

 

2. 將Full HTML Filter功能全關閉

輸入格式 -> Full HTML

 

3. 開啟Syntaxhighlighter欲高亮度的語言

 

4. CKEditor設定

 

此設定的目的，是在所設定的頁面下，關閉CKEditor功能。

 

儲存設定後，就可以在Drupal中快樂的使用CKEditor + Syntaxhighlighter + IMCE了！

 

 

来源：http://blog.bmcool.com/node/2