CKEditorで外部テンプレートを使用する

javascript

ブログやHTMLメール編集に利用できる、JavaScriptベースの高機能なWYSIWYGエディタ「CKEditor」はそのまま利用しても便利なツールです。

自作した外部テンプレートを読み込んで利用できればもっと便利になるので外部テンプレートを読み込めるようにカスタマイズしてみました。

通常CKEditorのテンプレートは、「default.js」内にテキストデータとしてJavaScriptの書式で記述されています。
そのためテンプレートのカスタマイズや追加を行う場合、ヒアドキュメントが使えないJavaScriptの書式で「default.js」に記述する必要がありとても手間のかかる作業となります。

カスタマイズした「default.js」を使用すれば、通常のHTMLで作成した外部テンプレートを読み込むことができるのでテンプレートの変更、作成が簡単になるメリットがあります。

注）テンプレートを使うためにはCKEditorのFull Packageが必要です。
以下のリンク先からFull Packageを選択してダウンロードしてください。
http://ckeditor.com/download

「/ckeditor/plugins/templates/default.js」を以下のように変更しています。

■default.js

//テンプレートファイルURL
var url = location.p + "//" + location.hostname + "/テンプレートディレクトリ";

//loadDataでテンプレートファイルを取得して変数に代入します。
//ファイル名は適宜変更してください。
//テンプレートを追加する場合はここにファイル名を追加してください。
var tpl1 = loadData(url + "テンプレートファイル1.html");
var tpl2 = loadData(url + "テンプレートファイル2.html");
var tpl3 = loadData(url + "テンプレートファイル3.html");

//Ajax同期通信で外部テンプレートを読み込んでデータを返します。
function loadData(url) {
//XMLHttpRequestオブジェクト初期化
var getData = new XMLHttpRequest();
//同期通信リクエスト作成
getData.open("GET", url, false);
//リクエスト送信
getData.send(null);
//レスポンスデータを取得して値を返す
return(getData.responseText);
}

//CKEditorの「テンプレート」をクリックしたとき表示される内容をJSON形式で作成
//テンプレートを追加する場合はここにテンプレートの情報を追加してください。
CKEDITOR.addTemplates("default",{
//サムネイル画像のディレクトリパス
//デフォルトは「/ckeditor/plugins/templates/templates/images/」
imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),
templates:[{
//テンプレート名
title:"テンプレート１",
//テンプレートを適用したときのサムネイル画像
image:"template1.gif",
//テンプレートの内容
description:"メイン画像1点とタイトル、回り込みテキスト",
//Ajax同期通信で取得したテンプレートデータ
html:tpl1
},{
title:"テンプレート２",
image:"template2.gif",
description:"2カラムに各1タイトル、及びいくつかのテキストを定義するテンプレート",
html:tpl2
},{
title:"テンプレート３",
image:"template3.gif",
description:"タイトルといくつかのテキスト及びテーブル",
html:tpl3
}]
});