Craft CMS のリッチテキストエディタを拡張するプラグイン「Redactor Extras for Craft」を使ってみた

Craft CMS のリッチテキストエディタを拡張するプラグイン「Redactor Extras for Craft」のインストール方法と使い方を簡単にご紹介します。

Craft CMS Logo

Craft CMS では Redactor というリッチテキストエディタが採用されており、表示するボタンなどは JSON ファイルで簡単に設定できます。

Redactor-Extras01-min.png

デフォルトのエディタにはテキストを左右に寄せるボタンが無かったので JSON に追記しようと思いましたが、残念ながら左右寄せには対応していないようでした。そこで、@BUN さんに教えていただいた Redactor Extras for Craft という Craft プラグインを使ってみることにしました。

なお、以下は Craft 2 での話になります。

Craft プラグインのインストール

Redactor Extras for Craft から ZIP ファイルをダウンロードして展開します。

展開したディレクトリの中に redactorextras というディレクトリがあるので、これを Craft のプラグインディレクトリ( craft/plugins )にアップロードします。

次に、Craft の管理画面の 設定 > プラグイン を開きます。

Redactor-Extras02-min.png

Redactor Extras の右端にある インストール をクリックしてインストール完了です。

Redactor-Extras03-min.png

Redactor Extras の設定

ただし、このままだとテキストの左右寄せはまだ使えません。まずは Redactor Extras の設定をする必要があります。

設定 > プラグイン > Redactor Extras を開きます。

Redactor-Extras04-min.png

今回はテキストの左右寄せが使いたかったので、 Redactor Extras の設定の Extra plugins のところにある Alignment有効 (緑)にして設定を保存します。

Redactor-Extras05-min.png

他にも Custom plugin をインストールできたりもするようなので、今度試してみたいと思います。

Redactor の設定ファイルを作る

ここまでの設定をいよいよエディタに反映させます。設定方法は下記のページに説明があります。

今回は、 Standard の設定ファイルを複製し Standard2 として、テキストの左右寄せを追加してみます。

まず、下記のファイルを複製します。

craft/config/redactor/Standard.json

名前を Standard2 に変更します。

craft/config/redactor/Standard2.json

Standard2.json をエディタで開いて、 plugins の末尾に ,"alignment" を追記します。

{
 "buttons": ["format","bold","italic","lists","link","file","horizontalrule"],
 "plugins": ["source","fullscreen","alignment"]
}

このファイルを再度アップロードします。

フィールドの設定

今度は、この Standard2 を利用するリッチテキストフィールドを設定します。今回はデフォルトで用意されていた Body フィールドの設定を変更します(ここでは予め Body本文 に変えてあります)。

設定 > フィールド > 本文 を開きます。

Redactor-Extras06-min.png

フィールドタイプリッチテキスト になっていると思いますが、その下の 設定 ドロップダウンリストから Standard2 を選択し、設定を保存します。

Redactor-Extras07-min.png

これでリッチテキストでテキストの左右寄せが使えるようになりました。

Redactor-Extras08-min.png

今回はテキストの左右寄せを例にしましたが、他にも色々追加できるのでお試しください。

以上です。

Published 2017-04-26
Updated 2019-08-20