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

f:id:ryoutaku_jo:20190723225015p:plain

【結論】

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

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

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

【目次】

【本題】

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: '画像3枚を均一幅で横並びするためのフォーマットです。見出しの入力も可能です。',
    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>'
  } );

f:id:ryoutaku_jo:20190724001647p:plain

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

参考情報

Toolbar Configurator

《今日の学習進捗(3年以内に10000時間に向けて)》

先週の障害対応の振り返りを行なったが、ファクトの収集/分析の重要性を改めて認識した。

前回の障害対応では、前日に処理との関連性を疑い過ぎて切り分けの方向性を誤ったり、ログの上辺だけを見て見当違いな箇所の調査ばかりしたりと、非常に手際が悪かった。

CTOに前回の障害のログを解説していただいて、初めてログの中に原因を特定できる情報がある事が理解出来たので、今後は障害対応にあたる際はログの分析に注力したい。

学習開始からの期間 :228日
今日までの合計時間:2188h
一日あたりの平均学習時間:9.6h
今日までに到達すべき目標時間:2082h
目標との解離:106h
「10,000時間」まで、

残り・・・「7812時間!」