ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

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

ブログや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:"テンプレート1",
                //テンプレートを適用したときのサムネイル画像
                image:"template1.gif",
                //テンプレートの内容
                description:"メイン画像1点とタイトル、回り込みテキスト",
                //Ajax同期通信で取得したテンプレートデータ
                html:tpl1
        },{
                title:"テンプレート2",
                image:"template2.gif",
                description:"2カラムに各1タイトル、及びいくつかのテキストを定義するテンプレート",
                html:tpl2
        },{
                title:"テンプレート3",
                image:"template3.gif",
                description:"タイトルといくつかのテキスト及びテーブル",
                html:tpl3
        }]
});

この記事を共有する

投稿者:i.M.D. Staff
    2014年08月11日月曜日 | 20:58
    ホームページ制作・Web制作・WEBコンサルティングならお任せあれ

    この人が書いたその他のブログ記事

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    • I.M.Dコーポレートサイト
    お問い合わせ