接下來就複雜的多了,仔細看清楚了。
自訂功能鈕
首先到目錄modules/whizzywig/library中,複製「whizzywig058.js」檔案為「test.js」,然後編輯test.js檔案(也可以選whizzywig059.js)。
這裡先講一下,功能鈕分成兩種,一種是下拉選單式的,像是選擇字體、字型大小等的功能鈕;另一種就是單純的按鈕,這兩種按鈕在whizzywig模組是定義在不同地方的。打開test.js檔案之後,找到
var sels='';
var buts='';
var vals=new Array();
var opts=new Array();
var dobut=new Array();
其中sels、vals及opts分別定義下拉式選單功能鈕,而buts及dobut則定義一般的按鈕鍵。
一般按鈕設定
先從簡單的說起,buts定義按鈕名稱,dobut定義按下按鈕後要做什麼。將下面的文字貼到上面文字的下方:
buts = 'Pages';
dobut['Pages'] = ' ';
上面是增加一個叫 Pages的按鈕,模組所做的就是在游標的地方插入兩個 ' ' 之間的內容,所以這個新增按鈕的功能是在游標的地方插入一個分頁的標記,Drupal在遇到這個標記的時候會自動分頁(搭配Paging模組),可惜我在做teaser的時候沒有成功,原因還不知道。
上述就是新增一個按鈕的方法,要怎樣讓他作用呢?在後台管理-->網站設定-->whizzywig裡面有一個設定,在「Whizzywig library file: 」的空格中填入「test.js」,意思是要whizzywig模組去使用test.js這個檔案。現在去新增一篇文章,在編輯區的工具列上是不是多出一個Pages的按鈕,那就成功了。但是能不能中文化呢?當然也可以,不過要動些手腳:
在language.js中新增一行:
language['Pages'] = "分頁符號";
language[' ']中的文字要跟buts=' ' 中的一樣,後面則是要顯示的文字。還有最重要的一步:
尋找test.js檔案中的
if (buttonPath == "textbuttons")
butHTML=''+ucBut+"\n";
將「ucBut」換成「t(ucBut)」,這很重要,因為翻譯要靠它。全部弄好之後,一樣卸載再掛上模組一次,現在工具列應該就會出現「分頁符號」的按鈕吧!
要新增多個按鈕呢?一樣
buts = 'Fn1 Fn2 Fn3'; (用space隔開)
dobut['Fn1'] = 'function 1';
dobut['Fn2'] = 'function 2';
dobut['Fn3'] = 'function 3';
下拉式按鈕設定
接著是更複雜的下拉式選單鈕,在test.js剛才加入dobut設定的下面,再加入
sels = 'custom1';
opts['custom1'] = ["Custom Style", "Title", "Par"];
vals['custom1'] = ["","",""];
(sels以space隔開,opts及vals以逗點隔開,每個項目用" "包起來)
sels是設定「下拉選單組」的名稱,opts是設定選單,第一個是選單名稱,vals是設定每個選單要做的事,前述的例子是新增一組叫custom1的選單,選單的名稱叫做Custom Style,其下有兩個選項,Title是在選取的文字之前插入所定義的CSS碼,Par也是一樣的功能。有了這個選單我們就可以輕鬆的設定各段落的 CSS碼。
同樣地,要能有作用還是要再動些手腳的:在test.js檔案中
尋找
if (!navigator.userAgent.match('AppleWebKit')){dsels+=' fontname fontsize'}
修改成
if (!navigator.userAgent.match('AppleWebKit')){dsels+=' fontname fontsize custom1'}
新增的選單會出現在字型大小的後面。那中文化呢?這個部份因為我不會javascript,不知道為何會如此?那就是 t 這個function的有效範圍,不能在最外層opts這個array中作用,也不能在 w 這個function中作用,所以只能用變通的方法,下面是修改方法:
尋找
for (var i=0; i < values.length; i++) {
w(' ' + options[i] + "\n");
}
將中間w( );那一行換成
var tmp = ' ' + t(options[i]) + "\n";
w(tmp);
這樣就能夠完成中文化了,記得要在language.js中增加Custom Style,Title及Par的中文定義設定,還有卸載、掛上模組一次。
總算交待完全了,有一點要補充的就是在權限設定的地方,最好都設成「whizzywig: toolbar - full」,其實也沒有什麼「破壞性」的功能需要被隱藏起來,這只是個建議而已。
最後一個補充的地方,如果覺得按鍵排列的方式不盡如意,可以去一個地方修改,在test.js檔案中,
尋找
if (controls == "all") controls=dsels +' newline '+ buts + dbuts + tbuts;
else controls += tbuts;
調整一下buts、dbuts及tbuts的順序,就可以了,至於這些是什麼東西,可以在上面幾行找到,我也就不多說了。
同步分享於我的部落格中。