搞了好久,終於弄懂tiny_mce的template功能。此功能可在編輯器的工具列找到「使用版型」開啟,作用是選擇預先設定的html結構到目前的編輯區裡。此設定我是在舊版tinymce測試,新版應該也可以相容才對。先來說明設定及其運作方式。
#tiny_mce的初始設定
template_replace_values: {
username : “Jack Black”,
staffid : “991234”,
mybb: function(e){
e.innerHTML = ‘mybb’;
}
},
template_templates : [
{
title: “Editor Details”,
src: “templates/editor_details.htm”,
description: “Adds Editor Name and Staff ID”
},
{
title: “Timestamp”,
src: “templates/time.htm”,
description: “Adds an editing timestamp.”
}
]
#templates/time.htm
<div class=”mceTmpl”>
<table width=”98%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<th scope=”col”>sfasdf </th>
<th scope=”col”> asdfasdf</th>
</tr>
<tr>
<td> fadf</td>
<td> asdfas</td>
</tr>
</table>
<div class=”username”>{$username}</div>
<div class=”staffid”>{$staffid}</div>
<div class=”mybb”></div>
</div>
請先將#tiny_mce區塊的初始設定加到tiny_mce的設定檔裡,其中template_replace_values項目為的是將樣版插入編輯器前進行內容的取代,其key值是指變數名稱或classname,內容則可以指定字串及函數,若是指定字串內容,代表要取代樣版裡的變數(變數名稱是對應的key值),需在樣版裡嵌入樣版變數,如此格式:{$var},請參考#templates/time.htm裡的{$username}。
另外,若是指定為函數,則代表要找到選擇樣版裡classname與key值相同的dom物件,函數傳入的參數即是此物件的參考,可以直接操作,例如指定值給其屬性innerHTML,可以這個部份可以做更彈性的動作。
template_templates是設定樣版檔案的說明及位置。title及description會在選擇的時候顯示。檔案路徑則是指樣版存在的位置,如果設成相對位置,則起始位置會是編輯器執行時的路徑。
樣版檔案裡的結構有一些怪異的現象,例如如果使用下述div來包內容,
<div class=”mceTmpl”></div>
div外不能包含其他內容,即便有也會不見。好像是會判斷classname是不是mceTmpl。
另外還有更多設定項目,請見:http://www.tinymce.com/wiki.php/plugin:template