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

f:id:ryoutaku_jo:20190723225015p:plain

【結論】

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

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

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

【目次】

CKEditorのテンプレート機能について
テンプレート機能の導入方法
自作テンプレートの追加方法
参考情報
《今日の学習進捗（3年以内に10000時間に向けて）》

【本題】

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

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

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

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

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

CKEDITOR.replace( 'editor', {

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

f:id:ryoutaku_jo:20190724001630p:plain

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

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

なお、テンプレートは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>'
  } );