CKeditor for MT5のテンプレート(雛形)のカスタマイズ

2010/03/17

MT5の記事/ページ投稿でテンプレートを利用しようと思った場合、カスタムフィールドで設定を行うか、CKeditor for MT5のテンプレート(雛形)を利用する方法があるかと思います。

しかし、カスタムフィールドの場合、カテゴリ/フォルダ別にしか設定を記憶できないのが少々やっかい。そこでCKeditor for MT5のテンプレート(雛形)をカスタマイズしてテンプレートを簡単に呼びだしてあげたいなと思い色々模索しました。

テンプレート(雛形)のカスタマイズで手を加える場所及びファイル

テンプレート(雛形)のサンプル画像は下記フォルダパスに置いてます。
mt\mt-static\plugins\CKEditor\template\images
※mtをmtというフォルダに入れていると仮定して。

テンプレート(雛形)の編集ファイルは下記ファイルパスのconfig.jsを編集します。
mt\mt-static\plugins\CKEditor\template\config.js

config.jsのコード

/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see http://ckeditor.com/license

Modify By Taku Amano <taku@toi-planning.net>
*/

CKEDITOR.addTemplates('movabletype',
{
	imagesPath: StaticURI + '/plugins/CKEditor/template/images/',

	templates :
		[
			{
				title: 'Image and Title',
				image: 'template1.gif',
				description: 'One main image with a title and text that surround the image.',
				html:
					'<h3>' +
						'<img style="margin-right: 10px" height="100" width="100" align="left"/>' +
						'Type the title here'+
					'</h3>' +
					'<p>' +
						'Type the text here' +
					'</p>'
			},
			{
				title: 'Strange Template',
				image: 'template2.gif',
				description: 'A template that defines two colums, each one with a title, and some text.',
				html:
					'<table cellspacing="0" cellpadding="0" style="width:100%" border="0">' +
						'<tr>' +
							'<td style="width:50%">' +
								'<h3>Title 1</h3>' +
							'</td>' +
							'<td></td>' +
							'<td style="width:50%">' +
								'<h3>Title 2</h3>' +
							'</td>' +
						'</tr>' +
						'<tr>' +
							'<td>' +
								'Text 1' +
							'</td>' +
							'<td></td>' +
							'<td>' +
								'Text 2' +
							'</td>' +
						'</tr>' +
					'</table>' +
					'<p>' +
						'More text goes here.' +
					'</p>'
			},
			{
				title: 'Text and Table',
				image: 'template3.gif',
				description: 'A title with some text and a table.',
				html:
					'<div style="width: 80%">' +
						'<h3>' +
							'Title goes here' +
						'</h3>' +
						'<table style="float: right" cellspacing="0" cellpadding="0" style="width:150px" border="1">' +
							'<caption style="border:solid 1px black">' +
								'<strong>Table title</strong>' +
							'</caption>' +
							'</tr>' +
							'<tr>' +
								'<td>&nbsp;</td>' +
								'<td>&nbsp;</td>' +
								'<td>&nbsp;</td>' +
							'</tr>' +
							'<tr>' +
								'<td>&nbsp;</td>' +
								'<td>&nbsp;</td>' +
								'<td>&nbsp;</td>' +
							'</tr>' +
							'<tr>' +
								'<td>&nbsp;</td>' +
								'<td>&nbsp;</td>' +
								'<td>&nbsp;</td>' +
							'</tr>' +
						'</table>' +
						'<p>' +
							'Type the text here' +
						'</p>' +
					'</div>'
			}
		]
});

HTMLを' ' +で囲む形で記述しています。サンプル画像の指定などもわかりやすいですね。ここを増やしていくとテンプレート(雛形)のパターンを増やしていけます。

何かと便利なCKeditorですが、配布元サイトでは本文・続き、概要以外にもカスタムフィールドにも適用できると記述されてましたが、どのように設定すれば適用できるかわからずじまいでした。このあたりを次回は掘り下げてみたいと思います。

この記事について