本日は Drupal （ドルーパル）に WYSIWYG 機能を追加する CKEditor モジュールをご紹介したいと思います。
本題に入る前にまずはことばの解説から。
「 WYSIWYG 」（ウィジウィグ）とは「 What You See Is What You Get 」の略で、「テキストや画像などの素材を見たとおりのまんま編集できること」を指すことばです。 「 WYSIWYG エディタ」と「エディタ」と組み合わされて使われることが多く、「 WYSIWYG エディタ」というと Word やワードパッドのような使い勝手のテキストエディタツールことを指します。
WYSIWYG エディタはスマートフォンアプリやウェブの世界では非常に一般的なので、たとえ WYSIWYG ということばを知らなかったとしても多くの方が日々 WYSIWYG なインタフェースに接していることと思います。 CMS の世界では WYSIWYG はもはや「対応しているのが当たり前」ともいえるくらいの普及状況です。 メジャーな CMS の中から WYSIWYG 対応していない CMS を見つけることの方が難しいくらいになっています。
今回はそんな WYSIWYG インタフェースでコンテンツが書けるようになる CKEditor モジュールのご紹介です。
以下、 CKEditor モジュールとは何なのかというところをご説明した後、実際の使い方をご説明していければと思います。
CKEditor モジュールとは
CKEditor （シーケーエディタ）モジュールとは、 CKEditor というオープンソース WYSIWYG エディタの機能を Drupal で利用可能にしてくれるモジュールです。
これを使えば Drupal のコンテンツ（=ノード）が Word のような直感的なインタフェースを使って書けるようになります。 ブログ感覚で投稿ができるので、 HTML にちょっと疎い方なんかでも気軽な感じで Drupal での投稿ができるようになります。
デフォルトで WYSIWYG エディタが入っていない Drupal 7 では定番人気のモジュールとなっており、ダウンロード数ランキングでも常に上位に位置しています。 ちなみに次期最新版である Drupal 8 では CKEditor がコアに組み込まれるため別途インストールせずともデフォルトで使用できるようになる模様です（ CKEditor モジュールは廃止となります）。
CKEditor についてより詳しく知りたい方は公式ページをご覧になってみてください。
Drupal の CKEditor モジュールのページはこちらです。
使い方
ここからは実際の使い方を見ていきます。 対象の Drupal バージョンは Drupal 7 です。
- インストール
- 設定
- 利用
まずはインストール方法から。
1. インストール
CKEditor モジュールをインストールするには、 CKEditor モジュールのファイル群をダウンロードしてきて Drupal プロジェクトのディレクトリに展開する必要があります。
今回詳細の手順は割愛しますが、モジュールの一般的なインストール/有効化の方法は以下の記事でご紹介していますので CMS の操作に馴染みのある方であればこちらを参考にしていただければ問題なくインストールできるのではないかと思います。
Drupal のコマンドラインツール Drush を使うとよりかんたんにセットアップすることが可能です。 CKEditor をインストール/有効化する Drush コマンドは次のとおり。 出てくる y/n の確認ダイアログには y と答えましょう。
$ drush en ckeditor
Drush が何かわからない方は以下の記事などを参考にしてみてください。
- Drupalの開発効率を劇的に向上させるDrushのインストール方法8通り
- Composer で Drush をインストールする方法
- MacでHomebrew + Drush + Drupalの開発環境を整える
2. 設定
CKEditor が無事インストールできたら、つづいて初期設定を行いましょう。
管理者としてログインし、管理画面の CKEditor の設定ページ（ /admin/config/content/ckeditor ）を開きます。
私が入れたバージョンの CKEditor モジュールでは、テキストフォーマットの FIltered HTML と Full HTML のためのプロフィールが作成されています。
必要に応じてプロフィールを追加したり、編集したりしましょう。
特に問題なければプロフィールはこのままでも大丈夫です。
共通の設定ページ（ /admin/config/content/ckeditor/editg ）では CKEditor ライブラリの場所をすることができます。
デフォルトでは外部の CDN の URL が入力されているかと思います。
とりあえず使い始める場合にはこのあたりも設定の変更は不要ですが、 CDN に依存したくない場合には CKEditor （ライブラリの方です）をダウンロードしてきてローカルディレクトリに展開しましょう。
展開した場所を管理画面上で指定すると、 CKEditor モジュールはローカルの CKEditor を読み込んでくれるようになります。
CKEditor の場所は index.php からの相対パスでも絶対パスの形でも指定することができます。
設定が終われば実際に使いはじめることができます。
3. 利用
実際に利用してみましょう。
Filtered HTML や Full HTML など CKEditor を有効にしたテキストフォーマットでの編集が可能がユーザとコンテンツタイプでコンテンツの新規作成ページを開くと、 WYSIWYG エディタが利用できるかと思います。
CKEditor の豊富な機能のうちどの機能を利用するかは上述の CKEditor の設定ページ（ /admin/config/content/ckeditor ）で細かく設定することができます。
機能が多すぎてもかえって使いづらいので、必要最小限の機能だけに絞り込んで使うのがよいかと思います。
上の画像のように編集して保存すると次の画像のように HTML で正しくフォーマットされた結果が出力されます。
以上です。 いかがだったでしょうか？
今回は Drupal に WYSIWYG エディタを導入してくれる CKEditor モジュールをご紹介しました。
今回は細かなところまで言及していませんが、このモジュールでは CKEditor の豊富な機能を活用できるように管理画面上から非常に細かいところまで設定ができるようになっています。 Drupal サイトに使い勝手のよい直感的な WYSIWYG インタフェースを導入したい場合にはぜひこの CKEditor モジュールの利用を検討してみてください。
もっと突っ込んだ詳細の使い方などについてはまた機会を見つけてご紹介していければと思います。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。