DrupalにCKEditorのプラグインを実装する方法


Post:2021/04/09

Update:2021/04/09

モジュール その他
DrupalにCKEditorのプラグインを実装する方法
DrupalにCKEditorのプラグインを実装する方法

Asako Okumura

Drupal8以降、DrupalのWYSIWYGエディタとしてCKEditorがコアに実装されました。
(Drupal8以降しか馴染みのない方は驚かれるかもしれませんが、Veiwsモジュールと同様にCKEditorもDrupal7ではコアモジュールではありませんでした!)

CKEditorはオープンソースの軽量なエディタで、標準機能も充実しています。 見出しなどのフォーマットを指定したり、画像を追加したりすることもできます。

標準のCKEditorイメージ

ただ、Drupalに標準で実装されているCKEditorには、一般的によく使われるフォントサイズとフォントファミリー(フォントの種類)やカラーのボタンがなく、カスタマイズが必要な場合もあります。
CKEditorにはさまざまなプラグインが充実しているので、今回はその実装方法を紹介します。

1. 必要なモジュールをインストールする

このチュートリアルでは、フォントサイズとフォントファミリー、そしてカラーパネルを追加してみます。

まずは、以下の3つのモジュールをインストールしてください。

  1. CKEditor Font Size and Family
  2. CKEditor Panel Button
  3. CKEditor Color Button

次にプラグインをCKEditorの公式サイトから導入してください。
今回必要な、以下の5つのプラグインをダウンロードします。

  1. Font Size and Family
  2. Color Button
  3. Panel Button
  4. Floating Panel
  5. UI Button
CKEditorの公式サイトからダウンロード

Drupalのroot直下にlibrariesフォルダを作成し、先程ダウンロードしたプラグインをアップロードします。

ライブラリフォルダにプラグインをアップロード

drupalの管理画面のモジュール一覧ページへ移動し、最初に追加した3つのモジュールをインストールします。

CKEditor関連のモジュールをインストールする

2. プラグインをCKEditorに追加する

Drupalの管理画面で、環境設定 > テキストフォーマットとエディターに移動します。

テキストフォーマットとエディターの設定画面に移動する

今回変更するフルHTMLの設定をクリックします。

フルHTMLの設定を変更する

グループの追加をクリックして、「Font」グループを作成。利用可能なボタンから追加したいアイコンをドラッグ&ドロップでグループに入れて「保存」をクリックします。

Fontグループを作成
Fontグループを作成

3. エディタでテストをします。

Drupalの管理画面でコンテンツ作成画面を開きます。

テストの文章を追加し、実際に先程追加したボタンで操作をします。

CKEditor拡張機能をテストする。

まとめ

DrupalのCKEditorは、モジュールやプラグインを追加して簡単に機能拡張することができます。このような軽微な機能でもクライアント様の作業効率向上につながる場合もあります。簡単に、柔軟に、機能拡張ができる点は、やはりDrupalの大きな魅力ですね。

Profile picture for user Asako Okumura
Asako Okumura
マネージャー
神戸生まれ、神戸育ちの2児の母。デザイナーとして入社後、Drupal(ドルーパル)の面白さにすっかりはまってしまい、デザインだけに止まらず、ある程度の案件なら開発までしてしまいます。 AcquiaのDrupal認定試験は「サイトビルダー」「デベロッパー」「フロントエンドスペシャリスト」を取得。残りの1つ「バックエンドスペシャリスト」を取得し、グランドマスター資格を目指して勉強中。