CKeditor for MT5のテンプレート（雛形）のカスタマイズ
2010年3月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> </td>' +
'<td> </td>' +
'<td> </td>' +
'</tr>' +
'<tr>' +
'<td> </td>' +
'<td> </td>' +
'<td> </td>' +
'</tr>' +
'<tr>' +
'<td> </td>' +
'<td> </td>' +
'<td> </td>' +
'</tr>' +
'</table>' +
'<p>' +
'Type the text here' +
'</p>' +
'</div>'
}
]
});
HTMLを‘ ‘ +で囲む形で記述しています。サンプル画像の指定などもわかりやすいですね。ここを増やしていくとテンプレート（雛形）のパターンを増やしていけます。
何かと便利なCKeditorですが、配布元サイトでは本文・続き、概要以外にもカスタムフィールドにも適用できると記述されてましたが、どのように設定すれば適用できるかわからずじまいでした。このあたりを次回は掘り下げてみたいと思います。