接下來就複雜的多了,仔細看清楚了。

自訂功能鈕

  首先到目錄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'] = '<br/> <!--pagebreak--> <br />';

(請將全形字轉成半形字)

上面是增加一個叫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='<button type=button onClick=makeSo("'+button+'")>' + 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'] = ["","<p style='font-size:1.5em; font-weight:bold; text-align:center;'>","<p style='text-indent: 2em;'>"];

(請將全形字轉成半形字)(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(' <option value="' + values[i] + '">' + options[i] + "\n");
}

將中間w(     );那一行換成

var tmp = ' <option value="' + values[i] + '">' + 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的順序,就可以了,至於這些是什麼東西,可以在上面幾行找到,我也就不多說了。

 

同步分享於Drupal Taiwan中。

創作者介紹

緒含的部落格

senkao 發表在 痞客邦 PIXNET 留言(0) 人氣()