[Drupal 7 Module] Wysiwyg + TinyMCE

• Wysiwyg 模組頁面：http://drupal.org/project/wysiwyg

Wysiwyg 英文就是 「what you see is what you get」，中文叫做「所見即所得」。
在 Drupal 要發表文章，預設是純文字介面。我們可以使用 Wysiwyg 模組，搭配其他線上文字編輯器，讓使用者能更方便的發表文章。

一、安裝、啟用模組

安裝模組方法請參閱  [Drupal 7 ] 安裝模組 Module 。
安裝完成，按下「設置」，可以看到的相關設定說明。

二、文字編輯器程式 TinyMCE

Wysiwyg 模組支援多種文字編輯器，這邊以安裝 TinyMCE 為主。

下載 TinyMCE 程式後，放到 sites/all/libraries/ 下面即可。

三、下載 TinyMCE

• TinyMCE 下載頁面 ：http://www.tinymce.com/download/download.php
• 下載版本TinyMCE 3.5.8：http://download.moxiecode.com/tinymce/3.5.8/tinymce_3.5.8.zip

前面說 TinyMCE 程式要放在 sites/all/libraries/ ，libraries 這目錄預設是沒有的，所以要先新增 libraries 這目錄，下面以 ssh 操作

• cd sites/all/
• mkdir libraries
• cd libraries/
• wget http://download.moxiecode.com/tinymce/3.5.8/tinymce_3.5.8.zip
• unzip tinymce_3.5.8.zip

完成後，再 Reload 剛剛 Wysiwyg 模組的「設置」頁面，就可以看到已經可以選擇 TinyMCE 了。

四、下載 TinyMCE 繁體中文語言包

• 檔案下載頁面：http://www.tinymce.com/i18n/index.php?ctrl=lang&act=download&pr_id=1

下載、解壓縮後會有 langs、plugins、themes  這三個目錄，把這三個目錄上傳放到 /sites/all/libraries/tinymce/jscripts/tiny_mce 下面即可。

五、設定 TinyMCE

如下圖，按下編輯來設定 TinyMCE 的樣式


設定為「繁體中文」介面，及勾選你想要使用的功能選項。


下面還有個「CLEANUP AND OUTPUT」的設定，其中記得要勾選「Apply source formatting」的選項。


不然 TinyMCE 的 html 格式會顯示不出來

六、看不到 TinyMCE 文字編輯器介面

設定完成，準備發表文章時，卻發現在 Chrome 下，根本看不到TinyMCE 的介面。在 IE ，可以看到介面，但卻不是繁體中文的介面。


原來是因為語言包的關係，TinyMCE 繁中語言包檔名是設定為「zh-tw」，但 Drupal 是設定為「zh-hant」，所以讀不到正確的語言檔。
【解決方式】
修改 /includes/iso.inc ，第 477 行

'zh-hant' => array('Chinese, Traditional', '繁體中文'),
改成
'zh-tw' => array('Chinese, Traditional', '繁體中文'),

┌ 結果


另一種改法，是把 TinyMCE 語言包裡面，zh-tw 的檔名，一個個改成 zh-hant ，不過這要改很多檔名，我就不採用啦！