CKEditor4で自作テンプレートを作成する方法

【結論】

・CKEditorでは、あらかじめ用意された雛形を元に文章を作成するテンプレート機能が実装されている

・テンプレートは標準のものの他、自身で自作することも可能

・自作する場合は、HTML形式で記述する

【目次】

【本題】

CKEditorのテンプレート機能について

CKEditorでは、記事をブロックに分けてレイアウトしたテンプレートが用意されており、それを利用することで、簡単に記事作成を行うことが出来ます。

今回は、そのテンプレート機能の導入方法についてまとめます。

テンプレート機能の導入方法

ツールバーにテンプレートを追加するには、以下の様にdoctoolsを追加する必要があります。

CKEDITOR.replace( 'editor', {

  toolbarGroups: [
    { name: 'document', groups: [ 'doctools' ] },
  ],
});

自作テンプレートの追加方法

自作のテンプレートを利用したい場合は、以下の様に定義します。

なお、テンプレートはHTML形式で記述します。

// 自作テンプレートの定義
CKEDITOR.addTemplates( 'original', {
  // テンプレートのショートカットプレビューイメージが保存されているサブフォルダの名前
  imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

  // テンプレート定義
  templates: [ {
    title: '画像配置フォーマット（3列、見出し有り）',
    image: 'template1.gif',
    description: '画像３枚を均一幅で横並びするためのフォーマットです。見出しの入力も可能です。',
    html: '<div>' +
      '<table border="0" align="center" cellspacing="0" cellpadding="0" style="width:960px;" class="cke_show_border">' +
      '<tbody>' +
      '<tr>' +
      '<td style="text-align: center;width: 300px;height: 230px;"><br></td>' +
      '<td style="text-align: center;width: 300px;height: 230px;"><br></td>' +
      '<td style="text-align: center;width: 300px;height: 230px;"><br></td>' +
      '</tr>' +
      '<tr>' +
      '<td style="text-align: center;"><br></td>' +
      '<td style="text-align: center;"><br></td>' +
      '<td style="text-align: center;"><br></td>' +
      '</tr>' +
      '</tbody></table><div><br></div></div>'
  } );

テンプレートは、HTML形式で作成できるので、かなり自由に作り込みが出来るので非常に有用な機能です！

参考情報

Toolbar Configurator