umbraco version : 4.5.2
在預設的安裝下,umbraco的Richtext editor裡的insert predefined template content也是未啟用的.
如果要啟用的話,可以照下列的步驟執行.
1.修改/config/tinyMceConfig.config
1.1. 新增下面片段在[tinymceConfig \ commands]裡
<command>
<umbracoAlias>Templates</umbracoAlias>
<icon>images/editor/template.gif</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="template">template</tinyMceCommand>
<priority>76</priority>
</command>
其中的icon可以找一張好辨識的圖片,這圖片是用在data type的設定上,跟editor的tool bar上的圖片無關.
而priority請找一個未使用的數字,如果跟其他的command重複的話,執行時會有錯誤.
1.2. 新增下面片段在[tinymceConfig \ plugins]裡
<plugin loadOnFrontend="true">template</plugin>
1.3 新增下面片段在[tinymceConfig \ customConfig]裡
<config key="nonexistingkey”>
<![CDATA[',
template_templates:[
{
title : "Two Column",
src : "/home/TwoCol.aspx",
description : "Two Column layout"
}],
template_popup_height : '400]]>
</config>
其中,nonexistingkey可以隨意命名,只要不跟其它的重複就可以.
而src當然就是template的路徑,只要確定可以存取到就好了.
2.重啟application pool
因為改過了config檔,所以要重啟application pool才能讓config生效.
3.修改Data Type中的Richtext editor設定
在Richtext editor的buttons設定中會出現剛剛所設定的圖示,
勾選剛剛新增的圖示後儲存.
4.確認editor的結果!
還沒結束!
上面的設定大致上說明了怎麼在umbraco下啟用tinymce的template功能.
不過如果每次要加template就要改設定檔,然後要重啟app pool,那就太累了.
在tinymce editor除了透過template_templates設定外,也允許將template的list設定外獨立的js中.
如果你要設定成獨立的js檔,
可以將步驟1.3改成如下:
<config key="template_external_list_url">/home/templatelist.js</config>
<config key="template_popup_height">400</config>
改成使用template_external_list_url,並指定js的路徑.
而js的內容格式如下:
var tinyMCETemplateList = new Array(
// Name, URL
["Tab layout","/home/layoutTab.htm"],
["Solution Form","/home/formSolution.htm"]
);
這樣修改後,以後如果要新增新的template給editor,只要新增template後,修改js檔就可以了.
就不用再動到config檔.
到這,就真的結束了.
參考資料 :
Enabling the 'Template' plugin for TinyMCE
http://our.umbraco.org/wiki/how-tos/enabling-the-'template'-plugin-for-tinymce
TinyMCE – Template
http://www.tinymce.com/wiki.php/Plugin:template
