CKeditor for MT5のテンプレート(雛形)のカスタマイズ
更新日:2010年3月17日|公開日: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ですが、配布元サイトでは本文・続き、概要以外にもカスタムフィールドにも適用できると記述されてましたが、どのように設定すれば適用できるかわからずじまいでした。このあたりを次回は掘り下げてみたいと思います。