您在這裡

安裝WYSIWYG(所見即所得)小心得

Ryneh's 的頭像
Ryneh 在 2011-10-18 (二) 18:01 發表

最近在用 Drupal 架一個網站,
前幾天花了不少功夫把 WYSIWYG 的輸入搞定了(大致上啦),
在這裡分享一些經驗。
野人獻曝,請大家不吝指正。

1. 編輯器選擇

我之前 K 的書介紹的是 FCKeditor,
所以我也照著做。
並沒有特別去比較哪一個編輯器比較好。
不過開始安裝之後才發現已經變成 ckeditor 了。

2. 模組安裝:ckeditor 這個是錯誤的步驟!!

我在 drupal.org 裡搜尋 fckeditor,
被導到 ckeditor,
很自然地就安裝了 ckeditor 這個模組。
好不容易安裝調整好之後才發現這是錯誤的!!

ckeditor 這個編輯器需要安裝一個模組來和 drupal 溝通,
ckeditor 這個模組的確可以起到溝通的功能。
(編輯器和模組的名稱一樣,不要搞混了。)
但是我要安裝 IMCE (插入圖片的模組)時才發現:
IMCE 需要的是另一個模組:wysiwyg
所以如果要安裝 IMCE 的話,
應該要裝 wysiwyg 才對。

2. 模組安裝:wysiwyg + 編輯器安裝:ckeditor

這個模組看起來很強大喔,
可以擔任很多種編輯器與 drupal 之間的橋樑。
先安裝模組,
之後再照它的指示下載編輯器放到指定的位置。

3. 模組安裝:WYSIWYG Filter

由於開放使用 Full HTML 會有安全性的問題,
所以要設定 filter。
但預設的 filtered HTML 選項太少了,
編輯器所輸入的語法都被 filter 濾掉了。
這會導致編輯的時候看起來很漂亮,
但在瀏覽的時候設定的格式通通都顯示不出來。
依照 ckeditor 的說明文件,
他建議了三種 Filter 模組可以安裝。
WYSIWYG Filter 是其中的一種,
而且看起來安裝比較簡單。

安裝完後,
到 text formats 裡把 WYSIWYG filter 加入,
並且設定允許使用的語法「理論上」就可以了。

實際上我還另外遇到了兩個問題:
一個是剛安裝完的時候出現 domain list 相關的錯誤(我是用內部的ip:192.168.0.111),
可以參考這一篇修改 http://drupal.org/node/744970
不過從這一篇也可以看出來,
這個模組的作者很忙碌。
這個 drupal 6 的時候出的問題,
他已經有了一些想法該怎麼做了,
但到 drupal 7 的版本還是沒有改。

另一個問題是:
如果字體名稱是中文的話會有問題,
可以參考這一篇修改 http://blog.sina.com.cn/s/blog_70121e200100xvzl.html
一樣是因為它的檢查寫得比較嚴格的原因。

這兩個問題花了我不少時間,
讓我會想是不是當初應該安裝另外的 filter 才對,
不過我也沒力氣試了。

4. 測試

用編輯器編輯文章,
把每一個功能都用用看,
然後看看經過 filter 之後還出不出得來,
如果出不來就是要調整 filter 的設定。
這個步驟說起來簡單,
實際上花了不少時間。

5. 安裝 IMCE

裝 IMCE 和 IMCE Wysiwyg API bridge 這兩個模組,
很順利,沒什麼好說的。

6. 沒有(力氣)解決的問題

還有幾個(小?)問題沒解決,
也沒有力氣解決了。

(1)
編輯器裡更改字體可以選擇的字體就那麼幾個,
而且通通都是英文字體,
連新細明體和標楷體都沒有。
這個問題我在裝 ckeditor 這個模組的時候有找到解決方法,
但在 wysiwyg 這個模組的時候找不到。
但因為 filter 那邊已經修改好了,
所以如果手動修改 html 原始碼的話是可以正常呈現的。
(舉例來說,把要改字體的部分選擇起來,利用編輯器改成字體「Arial」,然後再透過修改原始碼的方式把「Arial」幾個字改成「標楷體」。)

(2)
編輯器按全螢幕的話,
按鈕會被 drupal 的選單擋住。
奇怪的是 firefox 才有這種狀況,
chrome 是正常的。

(3)
編輯器寫完的內容會進到資料庫裡面,
在使用者要瀏覽網頁時,
從資料庫中讀出來後會經過 filter 的過濾,
所以應該是安全的。
但如果使用者不是瀏覽而是編輯,
資料從資料庫讀出來、進到編輯器裡之前,
有沒有經過 filter 的過濾呢?
如果沒有的話,
是不是也會有安全性的問題?
這個問題在 ckeditor 模組裡的說明有提到,
但 wysiwyg 模組裡並沒有相關的設定。

7. 感想

會不會其實不應該跟 wysiwyg 編輯器硬碰硬,
而是應該用 BBcode 或是其他解決方式會比較單純呢?