您在這裡

Wysiwyg+TinyMCE+IMCE+IMCE Wysiwyg API bridge

carllee413's 的頭像
carllee413 在 2009-10-15 (四) 14:23 發表

總於把drupal的編輯器弄好了,
小弟的方法是使用
Wysiwyg
TinyMCE
IMCE
IMCE Wysiwyg API bridge
這四個模組。

連結網址:
http://drupal.org/project/wysiwyg
http://tinymce.moxiecode.com/download.php
http://drupal.org/project/imce
http://drupal.org/project/imce_wysiwyg

一、將wysiwyg模組下載解壓至sites\all\modules,並啟用它。
二、將tinymce主程式解壓至sites/all/libraries。
三、安裝imc。
以上的介紹可以參考:
http://www.eb.wfc.edu.tw/node/2492
http://drupal.soa.tw/node/76

四、安裝完成後,在您要插入圖片時,出現如下圖所示:

並無法與imce結合直接上傳圖片。
因此上網google一下,
找到了IMCE Wysiwyg API bridge模組,
它的主要功用是橋接Wysiwyg與編輯器。

五、最後我們安裝IMCE Wysiwyg API bridge模組,
安裝好後,要到Wysiwyg的配置裡面對imce進行設定。
Administer -> site Configuration -> Wysiwyg

編輯->按鈕與外掛工具->將imce打勾。

最後就會得到我們要的結果了...

終於出現我可愛的小紅旗(IMCE)圖...

不好意思,我再描述清楚我的問題,
wysiwyg + tinymce 編輯時都正常顯示,但儲存後顯示的內容確變成了html語法
如:[color=#008000; font-size: medium][size= xx-large]經營理念[/size][/color]
我找到http://drupal.soa.tw/node/500 和我的問題是一樣的,
但是我在設定/內容撰寫/文字格式/Full HTML 裡面將啟用過濾器下方的選項全部取消勾選,但仍然無法正常.
請問問題出在哪裡??

錯誤的圖看不到,
不過很明顯是過濾器的設定問題。

「文字格式」(text formats)的概念是這樣的:
使用者透過網頁或是編輯器(如TinyMCE)輸入的資料,
會原樣的進到資料庫裡面,
然後在使用者要瀏覽這篇文章的時候,
drupal 會把資料從資料庫裡獨出來,
然後照「文字格式」設定的各個過濾器(filter)照順序跑一次,
再呈現出來給使用者看。

Drupal 7 預設有兩個「文字格式」:Filtered HTML 和 full HTML。
以 Filtered HTML 為例,
他使用的過濾器好像有以下幾個(我的已經都改掉了,不確定原本到底有哪些):
Limit allowed HTML tags (把不允許使用的HTML標籤去除)
Convert URLs into links (把網址改成可以按的連結)
Convert line breaks into HTML (把換行符號改成HTML標籤)
Correct faulty and chopped off HTML (更正錯誤的HTML標籤)
所以使用者在瀏覽套用 Filtered HTML 文字格式的文章時,
drupal 會從資料庫裡讀出文章的內容,
然後照上述四個過濾器照順序跑一次,
最後再把結果輸出給使用者。

以 vivilee66 的例子來說,
用 TinyMCE 編輯完之後,
如果選「原始碼」來看,
就會出現如『 [color=#008000; font-size: medium][size= xx-large]經營理念[/size][/color] 』的東西,
這也是存進資料庫裡的東西。
因為 TinyMCE 看得懂這樣 bbcode 的格式,
所以可以呈現出我們想要的樣子。
但是儲存後要瀏覽的時候,
瀏覽器可看不懂 bbcode ,
所以就照原樣呈現出來。

所以 vivilee66 應該做的是,
首先,
先搞清楚你用的是哪一個「文字格式」,
(不是不分青紅皂白地去改 full HTML!)
在發表文章或編輯文章的時候,
底下都有選項可以選要用哪一個文字格式的。
再來,
進入編輯「文字格式」之後,
要新增一條過濾器規則來把 bbcode 轉換成瀏覽器看得懂的 HTML 標籤。
我沒有用過 bbcode ,
不過我猜應該安裝 bbcode 之後,
在「啟用過濾器」底下應該會有一個是 bbcode 的選項,
要把那個勾起來。
(其他選項?就看你的需求囉。)
這樣應該就可以正常了。