前言
一款好用的在線文本編輯器一直是博客作者，網文作者夢寐以求的創作工具，隨着 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最新版並且解壓縮。
1 2 3 4 5 6 |
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 |
讓我們把ckeditor的界面修改爲中文顯示，點擊編輯按鈕在基礎設置那裏，選擇語言，在下拉項中設置爲zh-cn。這樣ckeditor就會使用中文顯示界面了。
經 過這樣簡單的配置之後，你用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的模板有關係，所以我這裏不一一講述。下面是我的配置代碼：
1 2 3 4 5 6 |
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將代碼和行號使用表格將它們分在了兩個不同的單元格里面，複製的時候就不會再有問題了。 
編寫模塊個性化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
1 2 3 4 5 6 |
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
1 2 3 4 5 6 7 8 9 10 |
/** * 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的背景色。這個模塊很簡單，不過你可以按照這個方法添加自己的設置。
編寫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的文件末尾。
1 2 3 4 5 6 7 8 |
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 |
這樣在CKEditor編輯的時候就可以在源碼模式和可視編輯模式下面自由切換不必擔心你設置的代碼段會被改動了。
備註：
- 由於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 返回
