CKEditor 4にテンプレートを追加するためのポイント2つ

目次

CKEditor 4の初期設定ではテンプレートがカスタムしづらい

CKEditor 4のテンプレート機能に、自作のテンプレートを追加する機会がありました。
知見がなかったのでググってみるといくつかの記事を発見。
それらを参考にさせていただき設定してみました。

設定方法に問題もなく、デベロッパーツールで確認してみても追加されている模様。

「さて、使ってみるか」とテンプレートのアイコンをクリックしてみると、あら不思議。
テンプレートが反映されていません。

いろいろと調査して、あれやこれやと試行錯誤した結果、
なんとか反映することができたのでその方法をまとめようと思います。

私がCKEditorについて詳しくないだけで、他にもやり方はあるはずです。

あくまで「数ある対応策の中のひとつ」として参考にしてください。

【基本コード】CKEditor 4にテンプレートを追加しよう

ckeditor/plugins/templates/templates/default.js

CKEDITOR.addTemplates("default", {
  imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
  templates: [
    {
      title: "Image and Title",
      image: "template1.gif",
      description: "One main image with a title and text that surround the image.",
      html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
    },
    {
      title: "Strange Template",
      image: "template2.gif",
      description: "A template that defines two columns, each one with a title, and some text.",
      html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
    },
    {
      title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
      html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
    },
    {
      title: 'テンプレートのタイトル',
      image: 'テンプレート選択画面の画像',
      description: 'テンプレートの説明',
      html: 'テンプレートのHTML'
    },
  ]
});

ダウンロードしてきたファイル一式の中から、下記ファイルを編集します。
ckeditor/plugins/templates/templates/default.js

ckeditor/config.js

//初期設定を無効化
CKEDITOR.editorConfig = function( config ) {
  config.allowedContent = true; //このコードを追加する
};

ダウンロードしてきたファイル一式の中から、下記ファイルを編集します。
ckeditor/config.js

【Point】CKEditor 4にテンプレートを追加しよう

  • 公式サイトからファイルをダウンロードして組み込む必要がある
    (CDN経由ではテンプレートの追加ができない)
  • 初期設定を解除する必要がある

【事前準備】CKEditor 4にテンプレートを追加しよう

  • CKEditorの反映は下記のとおりです。

HTML

<!-- CKEditorに置きかわる要素を用意する -->
<textarea id="editor"></textarea>

<!-- 
 ダウンロードしてきたファイルの中からckeditor.jsを読み込む。
 パスは任意で変更してください。
-->
<script src="ckeditor/ckeditor.js"></script>

JavaScript

//CKEditorに置きかわる要素に指定したID名を設定する
CKEDITOR.replace('editor');

こちらのJavaScriptファイルはCKEditorの設定用に作成してください。
JavaScriptファイルを作成せずに、HTMLファイルに記述しても問題ありません。
ファイル名も任意で結構です。

以上で設定は完了です!
これだけでエディターを表示してくれます。
ありがとうございます中の人。

【解説】CKEditor 4にテンプレートを追加しよう

自作のHTMLやJavaScriptファイルにテンプレートを追加するコードを書いても反映されない

ネットで調査をしているといくつか参考記事を発見することができました。
概ねの内容は、下記の記述で自作テンプレートを追加できるといったものでした。

CKEDITOR.addTemplates("default", {
  imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
  templates: [
    {
      title: 'テンプレートのタイトル',
      image: 'テンプレート選択画面の画像',
      description: 'テンプレートの説明',
      html: 'テンプレートのHTML'
    },
  ]
});

templatesプロパティに自作テンプレートの情報を追加すると反映される仕組みのようです。

参考サイトを元にJavaScriptファイルを作成し情報を設定しました。
そしていざ確認してみたところ、なぜかテンプレートが反映されません
原因がわからず試行錯誤してみましたがうまくいきませんでした。

不安にかられながら他の方法を探してみたところ、
ダウンロードしてきたこちらのファイルを編集すればいいことがわかりました。
ckeditor/plugins/templates/templates/default.js

中身はこのようになっています。
すでに3つの情報が登録されていますが、
これらはデフォルトのテンプレート情報です。

CKEDITOR.addTemplates("default", {
  imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
  templates: [
    {
      title: "Image and Title",
      image: "template1.gif",
      description: "One main image with a title and text that surround the image.",
      html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
    },
    {
      title: "Strange Template",
      image: "template2.gif",
      description: "A template that defines two columns, each one with a title, and some text.",
      html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
    },
    {
      title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
      html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
    }
  ]
});

このファイルに自作テンプレートの情報を追加すると使用できるようになります。

CKEDITOR.addTemplates("default", {
  imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
  templates: [
    {
      title: "Image and Title",
      image: "template1.gif",
      description: "One main image with a title and text that surround the image.",
      html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
    },
    {
      title: "Strange Template",
      image: "template2.gif",
      description: "A template that defines two columns, each one with a title, and some text.",
      html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
    },
    {
      title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
      html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
    },
  //ここから情報を追加していく
    {
      title: 'テンプレートのタイトル',
      image: 'テンプレート選択画面の画像',
      description: 'テンプレートの説明',
      html: 'テンプレートのHTML'
    },
  ]
});

例としてはこんな感じです。

CKEDITOR.addTemplates("default", {
  imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates") + "templates/images/"),
  templates: [
    {
      title: "Image and Title",
      image: "template1.gif",
      description: "One main image with a title and text that surround the image.",
      html: '\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'
    },
    {
      title: "Strange Template",
      image: "template2.gif",
      description: "A template that defines two columns, each one with a title, and some text.",
      html: '\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'
    },
    {
      title: "Text and Table", image: "template3.gif", description: "A title with some text and a table.",
      html: '\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'
    },
    {
      title: 'テキストの回り込み',
      image: 'template1.gif',
      description: 'テキストを回り込ませたいときに使います。',
      html: '<div class="floating-box">' +
          '<img src="https://●●●●/assets/img/float-img.jpg">' +
          'テキストを回り込ませたいときに使います。テキストを回り込ませたいときに使います。<br>' +
          'テキストを回り込ませたいときに使います。<br>' +
          'テキストを回り込ませたいときに使います。テキストを回り込ませたいときに使います。' +
          '</div>'
    }
  ]
});

テンプレートの追加方法は以上です!

CDN経由ではテンプレートのカスタマイズができない

CKEditorを使用するには2つの方法があります。

  1. 公式サイトからファイルをダウンロードして組み込む
  2. CDNで必要なファイルを読み込む

これまで説明してきたように、テンプレートをカスタマイズするには
ダウンロードしてきたファイルを修正する必要があります。

しかし、CDNで読み込む方法では対象のファイルをさわることができません

なのでテンプレートをカスタマイズするのであれば、
CDNを利用せずに、ファイル一式をダウンロードしてきて組み込まなければならないのです。

逆に言うと、デフォルトのまま使用するならCDNで読み込むほうがラクです。

<!-- 標準的な機能のみ使用する場合 -->
<script src="//cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>

<!-- 機能てんこもりトッピング全部のせ -->
<script src="//cdn.ckeditor.com/4.16.0/full/ckeditor.js"></script>

というわけで、
「カスタマイズするならファイル一式ダウンロード!!」

CKEditor 4のテンプレートを柔軟にカスタマイズしたいなら初期設定を解除する

CKEditorの初期設定で許可されていない属性やタグは自動でエスケープされてしまいます

私が経験した例はこんな感じです。

  • class属性が削除される
  • figureタグがpタグに置きかわる
  • style属性に設定したプロパティのうち、いくつかが削除される

例)

CKEDITOR.addTemplates("default", {
  templates: [
    {
      title: 'h3',
      image: 'template1.gif',
      description: 'h3タグ。小見出しに使用します。',
      html: '<h3 class="title-03">小見出しに使用します。</h3>' //h3タグにclassを指定しているのに…
    }
  ]
});
<!-- 出力結果 -->
<h3>小見出しに使用します。</h3>

テンプレートの登録時に指定していたclass属性が削除されてしまいました。
これでは指定していたCSSが反映されません。

頭をかかえ、再度調査したり同僚に相談したりしたところ、
初期設定が影響していることがわかりました。

というわけで初期設定を解除します
解除するのは簡単で、ckeditor/config.jsに一文を追加するだけです。

CKEDITOR.editorConfig = function( config ) {
  config.allowedContent = true; //このコードを追加する
};

これですべてのタグや属性が許可されるようになりました。

以上でテンプレートのカスタマイズに必要は設定は完了です!

【まとめ】CKEditor 4にテンプレートを追加しよう

CKEditor 4に自作テンプレートを追加する方法についてまとめてみました。

  • ファイル一式をダウンロードしてきて、テンプレート設定ファイルを編集する
  • 初期設定を解除する

これらのポイントを押さえておけば簡単にカスタマイズできますね。

以上です!
少しでもお役に立てたら嬉しいです。

参考サイト

Share

Comments

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA