DrupalのCKEditorにテンプレート挿入機能を追加

前回掲載した記事「CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？」で、WYSIWYGエディターにテンプレート挿入機能を付けたデモをご紹介しました。

今回の記事では下記デモのテンプレートを挿入する機能を実装します。

実装方法

今回の実装はDrupal CMSを元にし、CKEditor + Template機能の組み合わせ実装します。

今回実装を行う環境

• Drupal7
• Drupal Module : CKEditor
• Drupal Module : IMCE
• Drupal Module : Wysiwyg API template plugin
   

1. Drupal CMSに、３つモジュールをダウンロードし、有効化します。
   モジュール設置ディレクトリ：/sites/all/modules

   CKEditor
   IMCE
   Wysiwyg API template plugin

    

2. CKEditorのコンフィグを一部変更

   CKEditorはデフォルトの状態ですと、Classや、StyleなどのAttributesが手入力ができません。
   下記の設定をCKEditorのコンフィグファイルに追記します。

   CKEDITOR.editorConfig = function(config) {
   
     // テンプレート利用時に、コンテンツリプレイスのデフォルトOFF
     config.templates_replaceContent = false;
   
     // class、IDなどのAttributesを全て許可
     config.allowedContent = true;
   
     // 許可するattributesを指定したい場合
     // config.extraAllowedContent = 'h1(fuga,hoge),p{text-align}';
   
   }

   CKEditorのコンフィグドキュメント
   Drupalとの連携にかかわらずCKEditorの設定を変更する場合にconfigの変更が必要です。
    

3. CKEditorの設定変更

   管理画面の「環境設定 > CKEditor」を開き
   プロフィール編集画面を開きます。
   

   エディターの外見を開き、「テンプレートボタン」を追加し、設定を保存します。
   
    

4. Templateを作成する

   以上で設定が完了しましたので、テンプレートを作成します。
   「環境設定 > Wysiwyg templates」から、テンプレートを追加してください。
    

5. CKEditorで入力

   CKEditorを開き、手順3で追加したボタンを押すと、手順4で追加したテンプレートが表示されます。
   

最後に

webサイトで利用するパーツをWYSIWYGエディターのテンプレートに登録しておくことで、サイトのデザインを統一しつつ誰でも記事を入力することが可能になります。

実際にこの手法で記事を入力している会社は20〜40個くらいのテンプレートを用意し運用しています。
次の記事は、WYSIWYGエディターのカスタムボタン（Plugin）を作成します。

関連記事

CKEditor Document Configs （外部サイト）
Drupalとの連携にかかわらずCKEditorの設定を変更する場合にconfigの変更が必要です。

CKEditorにカスタムボタン（Plugin）を追加する

CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか？？

google-code-prettifyでソースコードを見やすくする