tinymce的template功能

搞了好久,終於弄懂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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *