これでリッチになった? - Magnolia5のリッチテキストエディタ設定を変更する

Magnolia5.2.2でリッチテキストエディタの設定をカスタマイズする方法が追加されました。デフォルト設定では、『ここだけ文字を大きくしたい』、『ここの文字色を変えたい』 といった要件に対応できませんが、設定のカスタマイズによって、これら問題が解決できます。
ここでは、5.2.2 を利用した設定手順に関して説明します。

はじめに

Magnolia5のリッチテキストエディタ (デフォルト)
Zoom
Magnolia5のリッチテキストエディタ (デフォルト)
設定変更を行わない状態のckeditor

Magnolia CMSでコンテンツを作成する場合に最も利用されるのは、おそらく "Text and Image (テキストと画像)" コンポーネントです。

このコンポーネントを利用する事でリッチテキストエディタで文を記述し、関連する画像を選択/表示する事ができます。

しかし、マイクロインスタンスでも動く! JavaベースのCMS - Magnolia CMS の問題点の部分で書いたように、Magnolia5では リッチテキストエディタとして利用されているCKEditorの機能が制限されていて、リッチなテキスト表現が行えるという状態にはありません。

"HTML Paragraph (HTMLパラグラフ)" コンポーネントを利用する事でHTMLを直接記述できるため、私の場合はこれでも問題ないのですが、自分でHTMLコードを記述しないと文字サイズや文字色も変更できないというのでは機能不足な感は否めません。

これまでのMagnolia5ではリッチテキストエディタの機能を変更する場合、Javaソースをカスタマイズする事で対応するしか方法がなかったのですが、5.2.2で リッチテキストフィールドの設定オプションが追加された旨アナウンスされました ( Release notes for Magnolia 5.2.2 )。

実際にどこまで設定可能か実際に試した手順、及び、結果を以下に示します。

環境

弊社では編集用 ( Author ) インスタンスは社内の仮想サーバで動作しており、OSはCentOSになります。 ( EC2上の 公開用インスタンスとは異なる )
Magnolia 5.2.2 (以降) が動作している環境であれば、リッチテキストエディタの設定変更は行えるはずです。

Magnolia Magnolia Community Edition 5.2.2
OS CentOS 6.5 ( 64bit )
Java Oracle JDK 1.7.0_25
Tomcat tomcat7.0.42

設定手順

リッチテキストエディタの設定方法に関しては、Rich text - Magnolia 5 Documentation に記載があります。
以下設定手順を示します。

  1. 管理コンソールから [Configuration ( 設定 )] アイコンをクリックします。
  2. 設定ウィンドウが開くので、ノードツリーを展開し、/modules/standard-templating-kit/dialogs/generic/controls/text に移動します。
  3. text ノードの下にプロパティを追加します。
    text を選択/右クリックし、表示されるコンテキストメニューから [プロパティの追加] をクリックします。
  4. 追加したプロパティの値を適宜編集します。上記 Magnolia Documentation の内容に従い、今回は以下のものを設定してみました。
    プロパティ説明設定内容
    alignmentテキストの配置を設定するボタンを追加する(値がtrueなら表示)true
    colors文字色を設定するためのボタンを追加する(CKEditor.configのcolorButton_colorsの値を指定する)000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' + 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' + 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' + 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' + 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF
    fontSizesフォントサイズを設定するためのボタンを追加する(CKEditor.configのfontSize_sizesの値を指定する)8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px
    imagesDAMから画像を追加するためのボタンを追加する(値がtrueなら表示)
    ※今回試してみたが機能せず。
    true
    sourceHTMLソースを表示/編集するためのボタンを追加するtrue

    以下に関しては設定しませんでした。

    • configJsFile
      リソースに追加して参照するか、クラスパス上のリソースを参照する必要があるらしく、設定手順が複雑になりそうだったので今回はパス。
    • fonts
      弊社サイトに関しては、フォントに関してはCSSで定義する方針としたいため。弊社サイトのコンテンツ内容を考えた場合、途中でフォントを変えたくなる要因は殆どない。
    • height
      リッチテキストエディタの高さ。高さが足りない場青、エディタ右上にある拡大ボタンで最大化できるため、必要性を感じない。
    • lists
      デフォルトでリスト(ul, ol タグ)は使えるようになっている。
    • tables
      テーブルに関してもデフォルトで使える。

    colors、及び、fontSizes の設定値は CKEditor.configの設定値を指定する必要があります。
    これについては、CKEditor.config - CKEditor 4 Documentation を参照して下さい。


確認

設定が完了したら、リッチテキストエディタの動作を確認します。
適当な 記事(Article)ページで、"テキストと画像(Text and Image)"コンポーネントを追加、編集してみればよいでしょう。

今回、私が試したところでは、images プロパティに関しては正しく動作しませんでした。imagesプロパティの値を true にした場合、リッチテキストエディタ自体が表示されないという問題が発生しています。
最新の5.2.3やEnterprise版での動作は確認していないため、これらでどうなるか確認に必要に応じてコミュニティにレポートするなりしようと考えています。

images 以外についてはボタンが追加され、動作する事が確認できました。
5.2.3にてimages含めた動作を確認できました。
テキストの表現に関しては概ね問題ないレベルになったのではないかと思います。

設定変更後のリッチテキストエディタ

まとめ

前述の通り、5.2.1時点ではリッチテキストエディタを利用した場合コンテンツの表現が制限される印象がありました。
5.2.2でCKEditorの設定をカスタマイズする事ができるようになった事で、(少なくともテキストの表現に関しては) 十分なレベルのものになったと思います。

images プロパティに関しては、追加調査の結果何か分かった際には、この記事に追記予定です。
※Authorインスタンスを 5.2.3 にアップグレードしたらできるようになっていました。これで本文中にも自由に画像を入れる事ができるようになりました。