TinyMCE:Plugins/Template

Plugin: template

このプラグインはカスタムテンプレート機能を追加する。2つのタイプ、テンプレートとスニペットが使用可能。

インストール

1. TinyMCEプラグインオプションリストにプラグインを追加する。例：plugins : "template"
2. ボタンリストにテンプレートボタン名を追加する。例：theme_advanced_buttons3_add : "template"
3. テンプレートを設定する（後述）。
4. テンプレートオプションを設定する（後述）

プラグインオプション

template_external_list_url

テンプレートファイルの配列を含むJSファイル。PHPなどでも可

template_cdate_classes

スペースで区切られたクラス名のリスト。このクラス名を持つテンプレート要素の中身は、'template_cdate_format'で指定されたフォーマットのテンプレート作成日で置き換えられる。A creation date is one that is set if no previous date existed within the element. Once set the original date is stored inside the element in a HTML comment and is designed not to change even with a template change.

template_mdate_classes

スペースで区切られたクラス名のリスト。このクラス名を持つテンプレート要素の中身は、'template_mdate_format'で指定されたフォーマットのテンプレート変更日で置き換えられる。

template_cdate_format

日付フォーマット文字列。

template_mdate_format

日付フォーマット文字列。

template_selected_content_classes

スペースで区切られたクラス名のリスト。このクラス名を持つテンプレート要素の中身は、最初に挿入される際、選択されているエディタの内容に置き換えられる。

template_replace_values

挿入されたテンプレートのコンテンツ置き換えをコントロールするアイテムの配列。配列のキーはテンプレート内で使用されているクラス名。このクラス名を持つテンプレート要素の中身は、配列の中身に置き換えられる。下にサンプルを示す。

template_templates

テンプレートオブジェクトの配列。それぞれのオブジェクトではテンプレートタイトル、ソースURLと説明を指定する。URLが相対パスの場合は、表示中のページからの相対パスである必要がある。

template_popup_width

テンプレートダイアログの幅。デフォルトは700。

template_popup_height

テンプレートダイアログの高さ。デフォルトは600。

値の置き換えのサンプル

クラス名はテンプレートに使用され、変数名はスニペットに使用される。

template_replace_values : {
	className : "Replace with this content",
	anotherClassName: "Replacement content"
}

値の置き換え（関数）サンプル

置き換えるコンテンツ配列値には関数も使用可能。テンプレート要素がマッチするクラス名を持っていた場合、関数が呼ばれ、要素が引数として渡される。

template_replace_values : {
	className : function(element) {
		// do something and then:
		// element.innerHTML = something
	}
}

テンプレートサンプル

template_templates : [
	{
		title : "Editor Details",
		src : "editor_details.htm",
		description : "Adds Editors Name and Staff ID"
	}
]

外部リストのサンプル

これはtemplate_external_list_url optionを使用してURLを指定した場合に、バックエンドページが返す内容。テンプレートを指定する単純な配列。このURLはPHPのようなバックエンドページも可能。

var tinyMCETemplateList = [
	// Name, URL, Description
	["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
	["Layout", "templates/layout1.htm", "HTML Layout."]
];

スニペットの作成

スニペットは挿入されるHTMLコードの塊。値は、テンプレートDIV要素に囲まれた部分以外は、スニペットが挿入される時のみ置き換えられる。template_replace_values配列にsomevar1を定義した場合、プレビュー、または挿入時に置き換えられる。

This is a simple <strong>snippet</strong>. Will be replaced: {$somevar1}.

テンプレートの作成

テンプレートは、DIVで括られたテンプレートデータのファイル。DIVの外側の全てのHTMLは、プレビューフレームで単純に表示される。テンプレートは単純なスニペットよりも拡張性があり、template_replace_valuesに配置された関数により、動的コンテンツ/スマートコンテンツを取得可能。これらの関数は処理がクリーンアップされるごとに実行され続ける。

テンプレートは下のベースHTMLを使用する必要がある

<!-- This will not be inserted -->
<div class="mceTmpl">
<table width="98%%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table></div>

初期化サンプル

tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "template",
	theme_advanced_buttons3_add : "template",
	template_cdate_classes : "cdate creationdate",
	template_mdate_classes : "mdate modifieddate",
	template_selected_content_classes : "selcontent",
	template_cdate_format : "%m/%d/%Y : %H:%M:%S",
	template_mdate_format : "%m/%d/%Y : %H:%M:%S",
	template_replace_values : {
		username : "Jack Black",
		staffid : "991234"
	},
	template_templates : [
		{
			title : "Editor Details",
			src : "editor_details.htm",
			description : "Adds Editor Name and Staff ID"
		},
		{
			title : "Timestamp",
			src : "time.htm",
			description : "Adds an editing timestamp."
		}
	]
});