[umbraco] Enabling the insert predefined template content for TinyMCE

2012-07-18

2315
0
CMS
2012-08-15

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

回首頁