drupal的ckeditor編輯器

前言

一款好用的線上文本編輯器一直是部落格作者，網文作者夢寐以求的創作工具，随着 javascript技術的改進和各種文本編輯器的開發和更新，線上文本編輯器也逐漸的成熟和易用起來，本文将以現在較為流行的文本編輯器 ckeditor和drupal子產品來介紹在drupal網站上配置一款近乎完美的所見即所得的文字編輯和排版環境。

需要的子產品和第三方軟體

首先介紹一下配置需要的子產品和第三方的開源軟體。使用的drupal子產品wysiwyg, WYSIWYG Filter, IMCE , IMCE Wysiwyg bridge, GeSHi Filter for syntax highlighting, WYSIWYG - GeSHi bridge, 使用的第三方的軟體主要就是ckeditor和geshi。

drupal wysiwyg子產品和CKEditor的安裝與配置

首先安裝并且啟用wysiwyg，wysiwyg就是所見即所得(What You See Is What You Get)的簡稱。wysiwyg子產品提供了衆多和其他所見即所得編輯器的內建接口。已經預設支援了CKEditor, FCKeditor, jWysiwyg, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor, YUI editor 這些流行的編輯器，而且現在很多drupal的使用者和子產品開發者也有意向支援這個統一的接口，是以本文就沒有采用其他專門支援一種編輯器的子產品來配置。打開wysiwyg配置界面，在下面的安裝說明處“Installation instructions”可以看到wysiwyg對編輯器的支援情況。

默認的wysiwyg子產品是不帶任何編輯器的，本文由于是配置之後補寫，是以這裡的狀态已經安裝了Ckeditor。好讓我們為wysiwyg安裝 Ckeditor。進入到你的站點的sites/all目錄下，建立libraries目錄，從網上下載下傳ckeditor最新版并且解壓縮。

cd sites/all/
mkdir libraries
cd libraries/
wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.2.1/ckeditor_3.2.1.tar.gz
tar zxvf ckeditor_3.2.1.tar.gz
rm ckeditor_3.2.1.tar.gz

正确下載下傳并且解壓後，libraries目錄裡面會多一個ckeditor目錄，所有的ckeditor檔案都在這個目錄下，我們可以删除下載下傳的 ckeditor_3.2.1.tar.gz這個壓縮包了。重新整理你的wysiwyg配置頁面，你會看到ckeditor已經被wysiwyg識别并且安裝了。就像上面圖檔顯示的一個對号，後面顯示已經安裝 ckeditor的版本号。接下來需要配置在哪個輸入格式使用ckeditor，選擇上面的Filtered HTML輸入格式配置ckeditor編輯器，并且點選下面的儲存按鈕。

讓我們把ckeditor的界面修改為中文顯示，點選編輯按鈕在基礎設定那裡，選擇語言，在下拉項中設定為zh-cn。這樣ckeditor就會使用中文顯示界面了。

備注@1

經過這樣簡單的配置之後，你用filtered HTML這個輸入格式建立一個node，就可以看到ckeditor已經被加載到頁面上，你已經可以用它來編輯文檔了。但是有一個不友善的地方就是你在文章中插入圖檔的時候，必須先上傳圖檔到網絡上，才能在ckeditor裡面排版，能不能在ckeditor裡面上傳圖檔呢？當然可以。我們繼續為 ckeditor增加圖檔上傳功能。

配置wysiwyg CKEditor IMCE上傳圖檔

IMCE子產品安裝與配置

我們下載下傳和啟用drupal的IMCE子產品，IMCE子產品是基于javascript的應用，

是一個通用的文檔管理子產品，它可以友善的浏覽，上傳，删除伺服器上的圖檔并且可以建立縮略圖。IMCE是一個功能強大而且非常成熟的子產品，很早就已經支援 cck，也是使用最多的drupal子產品之一，這裡就不再做更多介紹。接下來簡單的對IMCE進行配置，首先建立一個名為blog的配置檔案，并且讓注冊使用者預設使用blog配置檔案。

并且在這個blog的配置裡面設定每個使用者的預設圖檔管理目錄，我們使用u(uid)作為目錄名稱，使用者1的目錄就為u1，2的目錄就是u2。配置的方法如下圖所示。這樣使用者打開IMCE的圖檔管理界面時，預設就會進入到他自己的目錄裡面。

IMCE與CKEditor整合

對 IMCE進行簡單的配置後，我們要把ckeditor和IMCE這兩個功能整合起來，我們安裝和啟用IMCE Wysiwyg bridge 這個子產品，這個子產品已經做了整合，啟用後，我們再次回到wysiwyg的配置頁面，選擇編輯Filter HTML的ckeditor的配置，在中間Buttons & Plugins的位置，可以看到多了一個IMCE的plugin。讓我們選擇這個plugin來啟用它，并且找到Image這個button，也啟用它。

儲存之後，ckeditor的圖檔屬性編輯界面中就增加了圖檔浏覽和上傳的功能。在你看到它們之前你需要清理一下drupal的緩存，甚至于你本地浏覽器的緩存，確定你本地的ckeditor的js檔案得到了更新。

點擊這個按鈕，就會打開IMCE的圖檔管理界面，上面有上傳，删除，resize，縮略圖，另外還多了一項“Send to ckeditor”。對就是這個，上傳完圖檔選擇一個圖檔後，點選這個連結，就可以把圖檔加入到ckeditor的圖檔編輯界面了，當然直接點選下面的圖片預覽也可以的。Ckeditor加入IMCE的圖檔管理功能，确實變得友善了很多。

動動手，在CKEditor上傳個圖檔并且排版

接下來請讀者建立一個文章，并且上傳一個圖檔，在ckeditor裡面設定它的居右顯示，

然後儲存這篇文章。你會發現你的圖檔仍然是靠左顯示的，如果你無法看到圖檔，那是因為你的Filtered HTML輸入格式裡面沒有加入顯示img。你可以手動加入，在站點配置->輸入格式->Filtered HTML那裡。

使圖檔标記img和div标記可以顯示。

好，雖然我們加入了img的顯示，但是圖檔仍然不能夠居右顯示。下面我來解釋一下原因，其實問題就在HTML過濾器上，HTML過濾器是drupal核心自帶的過濾器，出于安全上面的考慮HTML過濾器會過濾并且删除HTML标記裡面的style等屬性，如果非要圖檔支援style等css标記，那麼必須将 HTML過濾器停用，但是這樣會給網站帶來很大的安全隐患，因為不對使用者送出的網頁内容過濾，有可能不法使用者會在網頁裡面挂入木馬、病毒等有害内容，破壞網站和網站讀者。為了讓我們的網站更加安全，我們需要更多的配置來確定我們的編輯器的安全性，同時也要提供足夠的強大的線上編輯功能來滿足我們的網絡作者。

定制WYSIWYG Filter，讓排版随心所欲

WYSIWYG Filter簡介

接下來我們安裝啟用WYSIWYG Filter這個子產品，WYSIWYG Filter是專門為wysiwyg設計的一款網頁代碼過濾器，相較于HTML過濾器，它提供了強大的過濾功能和更加靈活的配置，能夠對HTML标記，标記屬性，标記值的有效性，自定義标記名稱css類等進行嚴密的控制。WYSIWYG Filter會從你的網頁中過濾掉任何不符合規則的内容，是以在配置WYSIWYG Filter的時候你要多注意盡量避免錯誤。

過濾網頁顯示的内容

接下來我們繼續配置Filtered HTML這個輸入格式，

我們停止HTML過濾器，啟用WYSIWYG Filter，并且為了避免沖突，我們也停止了換行轉換器。

然後在設定那裡對WYSIWYG Filter進行更加詳細的配置，首先我對HTML elements and attributes進行了調整，加入了img對圖檔的支援，同時對img允許的屬性也進行了配置，如src、style、width、height、 title、alt，另外還對div标記加入了class和style屬性，確定div可以用來配置css。由于這些配置在不同的網站上是不盡相同的，和你使用的drupal的模闆有關系，是以我這裡不一一講述。下面是我的配置代碼：

a[!href|target<_blank|title],
div[align<center?justify?left?right|class|style],
p[align<center?justify?left?right],
br,span[style],em,strong,cite,code,blockquote,ul,ol,li[style],dl,dt,dd,
img[src|style|width|height|title|alt],
pre[class|style],table[class|style],tbody,tr[class],td[style]

大家需要注意的是沒一行的配置結束要加上一個逗号，不然配置就不能正确解析。我說過配置的不正确會導緻你網頁内容的不顯示，是以大家一定要小心。配置項中 “!”開頭的是必須值，每個屬性之間用“|”來間隔，除了必須項外，其他都是可選屬性，屬性的值以“<”為開頭标記，不同的屬性值之間以“?”間隔。如果你配置了屬性值，但是你的網頁裡面的值不在有效配置裡面，那麼你的這個屬性就不會顯示，是以說WYSIWYG Filter的過濾控制非常嚴格而且靈活。

配置内嵌樣式Style

接下來我們要對style這個内嵌的css屬性編輯項進行更加詳細的設定，

WYSIWYG Filter提供了一個清單來供我們選擇都支援那些配置，我們需要按需要進行選擇，比如要讓圖檔能夠居右顯示，那麼你至少要選擇float這個配置項。

好了，儲存配置，重新重新整理一下你剛才編輯的那個帶有圖檔的文章，看到了吧，現在圖檔已經可以靠右顯示了。因為我們的WYSIWYG Filter中啟用了img的支援，img裡面可以設定内嵌的style樣式，并且我們還配置了style樣式裡面支援float這個屬性。從這個配置的例子可以看出，如果你為你的網絡作者提供更加靈活的頁面排版方式，那麼你就需要仔細配置WYSIWYG Filter讓這些配置能夠生效并且正常顯示。

至此我們的線上編輯器對普通文檔的編排已經擁有了十分強大和靈活的功能了，但是對網絡上面數量衆多的代碼、腳本和指令能夠完美編輯和顯示嗎？目前還不可以，讓我們來繼續完善它。

讓代碼文法高亮顯示

安裝GeSHi Filter

安裝和啟用GeSHi Filter for syntax highlighting這個子產品，在啟動了這個子產品後，我們仍然需要手動下載下傳Geshi這個第三方的代碼庫來實作代碼文法高亮顯示的功能。注意我們下載下傳的是1.0.x版本。

1
2
3

cd sites/all/modules/geshifilter/
wget http://sourceforge.net/projects/geshi/files/geshi/GeSHi%201.0.8.6/geshi-1.0.8.6.tar.gz/download
tar zxvf geshi-1.0.8.6.tar.gz

為代碼加上行号

接下來我們修改下GeShi Filter的預設配置，首先加入行号的顯示，然後啟用Geshi對代碼中的關鍵字加上連結。

然後選擇我們網站支援那些種類代碼的高亮顯示，我選擇了php, html, xml等，你可以根據自己的需要進行配置。

正确配置代碼的标記可以使用Geshi filter自帶的code或者blockcode。語言的區分用type、lang和language都可以。例如：

[code type="php"]your php code here...[/code]

之後，我們修改輸入格式配置，在Filtered HTML這個格式中我們啟用Geshi filter并且将它的優先級移到第一位。

為代碼加上色彩

這樣配置後，GeSHi filter就已經可以處理位于code标記裡面的代碼了。但是顯示的仍然不正常，原因在于WYSIWYG Filter的配置項沒有包含GeSHi filter添加的css樣式标記，并且将GeSHi filter生成的部分标記誤删除。讓我們把這些被删除的标記加上，根據不同配置标記也不相同，如果你不能确定，可以試着就使用我上面的配置代碼。另外還要将GeSHi filter的css類名标記也加上。配置如下圖(就在WYSIWYG Filter Style properties配置的下面，找不到？

經過以上的配置之後，各種代碼文法高亮的顯示就應該正常了。你可以試着在你的文章裡面嵌入一段代碼，由于CKEditor本身不支援GeShi的高亮顯示，是以在它的界面上沒有相應的按鈕，你需要點選原始碼，以代碼的形式插入。

儲存你的文檔，顯示一下，看看結果是不是代碼已經按照你指定的文法高亮顯示了？應該和這個差不多哦：

複制代碼時去掉行号

顯示的問題解決了，有沒有想過複制Ctrl-c、Ctrl-v也會有問題呢？在firefox等這些以gecko為引擎開發的浏覽器上，複制時會連同行号一起複制過來。這樣就給讀者帶來了很大的不便，一切為了讀者考慮，我們繼續來修正GeShi-filter的配置從根本上解決它，打開GeSHi- filter配置頁面，将代碼顯示模式修改為 GESHI_HEADER_PRE_TABLE 儲存後就可以了。GESHI_HEADER_PRE_TABLE将代碼和行号使用表格将它們分在了兩個不同的單元格裡面，複制的時候就不會再有問題了。

備注@2

編寫子產品個性化CKEditor

為什麼要編寫子產品自定義CKEditor的配置

很多的編輯器都有自定義的功能，他們大多會提供一個js檔案，讓你通過編輯這個檔案，達到自己配置編輯器的目的。Ckeditor也在自己的主目錄中提供了一個叫做config.js的檔案，在這個檔案中，你可以定義Ckeditor的各種屬性。不過在以wysiwyg子產品內建的環境中，這個 config.js檔案裡面的所有配置都無效了，原因在于wysiwyg打算将配置可視化，希望使用者可以通過它提供的配置界面GUI來達到配置所有編輯器的目的。但是以現在wysiwyg版本所提供的配置功能還遠遠達不到對每個編輯器的數百個屬性逐一進行配置的程度。是以wysiwyg的開發人員在 6.x-2.1版本中引入了一個hook_wysiwyg_editor_config_alter方法，通過hook這個方法，讓其他開發者可以對指定的編輯器進行配置。僅僅為了幾個個性化的編輯器設定将以前隻需在js中寫幾行代碼就可以辦到的事情搞的複雜起來，要編寫子產品才行，這麼做有什麼好處呢？其實還是有好處的，首先通過編寫子產品來配置，這樣你就不需要修改編輯器目錄中的任何檔案，對更新是很有利的，你可以毫不猶豫的将舊版編輯器整個目錄删除，再下載下傳新版。另外編寫的子產品也獨立于wysiwyg這個子產品，是以當wysiwyg需要更新時，也可以直接删除wysiwyg目錄。是以，編寫一次子產品，對今後的更新維護帶來了很大的便利，我個人還是很贊同這種個性化的方式的。

編寫子產品修正CKEditor的中文界面

我們來編寫一個簡單的配置子產品來修正一下CKEditor的界面顯示，讓它能夠正常顯示中文。首先是寫info檔案，

ckeditor_custom.info

name = Ckedito custom setting
description = Adds my custom setting to CKeditor via Wysiwyg module.
package = User interface
core = 6.x
 
dependencies[] = wysiwyg

然後編寫module檔案。

ckeditor_custom.module

 
  /**
   * Implementation of hook_wysiwyg_editor_settings_alter().
   */
  function ckeditor_custom_wysiwyg_editor_settings_alter(&$settings, &$context) {
    if ($context['profile']->editor == 'ckeditor') {
      $settings['uiColor'] = '#9AB8F3';
      $settings['language'] = 'zh-cn';
    }
  }

在這個子產品中，我們僅僅對另個設定進行了修改，一個是CkEditor的語言配置，設定成為中文，另外我們修改了一下CkEditor的背景色。這個子產品很簡單，不過你可以按照這個方法添加自己的設定。

備注@3

編寫CKEditor Plugin擴充編輯器功能

CKEditor有其自己的插件機制，允許開發人員編寫插件來擴充功能，同樣wysiwyg也提供了實作編輯器插件功能的接口，不同的是你仍然需要編寫子產品來實作wysiwyg的接口，在你的子產品中加載js檔案來實作插件功能。

Teaser break插件淺析

待續

利用插件修改編輯器設定

我們上面介紹過通過編寫自定義子產品實作wysiwyg的一個alter hook方法來設定編輯器，但是那個方法隻能設定一些簡單的類型，對于複雜的類型無能無力。但是我們仍然可以通過wysiwyg的插件接口來設定編輯器。原因在于插件其實核心是一個js檔案，這樣就避免了通過Drupal核心轉換PHP變量到JS變量的過程，可以在這個檔案中直接設定複雜的JS類型，比如我們下面配置的正規表達式。有的朋友可能會問既然我們編寫了子產品進行配置，為什麼不能在我們的子產品中直接加js檔案來設定複雜的JS資料類型呢？這裡涉及到一個js調用先後的問題，如果在自定義的子產品中加入js進行配置，那麼Drupal在生成頁面的時候所有的js檔案都會加載，你很難保證你的js檔案能夠在CKEditor和wysiwyg的js檔案之後執行。這樣你的設定就是沒有效果的，而把設定代碼放到wysiwyg的plugin接口中，就能保證你的設定代碼是在CKEditor和wysiwyg初始化之後調用的，這樣你的設定就會生效。

設定代碼保護功能避免CKEditor修改GeShi标記中的内容

我們這裡就來設定一下CKEditor的一個配置項CKEDITOR.config.protectedSource，protectedSource是用來保護代碼不會被修改，它是用正規表達式數組來設定的，所有正規表達式所比對的内容将被保護，在用CKEditor進行編輯的過程中，CKEditor不會改動保護的内容。這個功能可以有效的保證我們用GeSHi标記的代碼段不被CKEditor修改，如果不保護起來，之間的一些特殊字元和一些換行标記都會被CKEditor修改或者删除，導緻代碼段的格式面目全非。我們把保護設定附加到plugin的js的檔案末尾。

CKEDITOR.config.protectedSource.push( /<\?[\s\S]*?\?>/g );   // PHP Code
//CKEDITOR.config.protectedSource.push( /<%[\s\S]*?%>/g );   // ASP Code
//CKEDITOR.config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi );   // ASP.Net Code
//CKEDITOR.config.protectedSource.push( /<code[\s\S]*?<\/code>/g );  // GeshiFilter < code >
CKEDITOR.config.protectedSource.push(/\[code[\s\S]*?\[\/code\]/g );  // GeshiFilter [ code ]
//CKEDITOR.config.protectedSource.push( /<blockcode[\s\S]*?<\/blockcode>/g );  // GeshiFilter < blockcode >
//CKEDITOR.config.protectedSource.push( /\[blockcode[\s\S]*?\[\/blockcode\]/g );  // GeshiFilter [ blockcode ]
//CKEDITOR.config.protectedSource.push( /<pre\ .*?<\/pre>/g );    // wysiwyg-geshi

備注：

由于wysiwyg的設計缺陷，目前CKEditor中文配置設定後無效果，可以通過編寫子產品自定義CKEditor配置來解決。傳回
因為将代碼和行号分在不同單元格裡面，當有的字型粗體和普通模式顯示高度不一緻時，會造成行号和代碼的錯位。代碼中不少關鍵字是粗體顯示，而行号都是普通字型，代碼行會比行号略高一些，代碼較多時，錯位會增強，甚至錯行。在IE中遇到。傳回
由于Drupal核心的限制詳情見drupal_to_js，目前wysiwyg提供的這個alter方法隻能對一些具有簡單類型值的配置項進行設定，包括×××，布爾型，簡單的字元串等。對于像用PHP字元串編寫的js方法，js對象，正規表達式等無法支援。傳回
Teaser break插件啟用後，會意外修改被保護的代碼。需要打個更新檔來修正。更新檔下載下傳位址 #Invalid XHTML: missing trailing slashes, absolute urls and uppercase tags 傳回