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

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

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

 

実装方法

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

今回実装を行う環境

  1. Drupal CMSに、3つモジュールをダウンロードし、有効化します。
    モジュール設置ディレクトリ:/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でソースコードを見やすくする

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。