リッチテキストエディタを利用する
Struts 2 JQueryプラグインの2.2以降ではJQueryを利用したテキストエディタを同梱しています。このエディタはHTMLタグを生成する機能を備えており、もちろんスタイル指定や画像挿入などもサポートされています。バージョン2.2ではCKEditor、2.3ではTinymceが利用できます。まずは、これらはどういったものなのかをサンプルで見てみましょう。
- Tinymceサンプル（http://127.0.0.1:8080/AjaxValidationSample/ajax/tinymce）
図5 Tinymceサンプルの出力画面
- ckeditorサンプル（http://127.0.0.1:8080/AjaxValidationSample/ajax/ckeditor）
図6 CKEditorサンプルの出力画面
これらのエディタを埋め込む手順は以下のとおりです。
- （1）Struts 2 JQueryプラグインの追加ライブラリであるstruts2-jquery-richtext-plugin-2.3.1.jarを/WEB-INF/libへ配置する
- （2）ヘッダ領域に<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>を記述する
- （3）利用するテキストエディタのタグを記述する
これだけです。では実装例を見てみましょう。
リスト8 ckeditor.jsp（抜粋）
…（省略）…
<body>
…（省略）…
<s:form id="formValidate" theme="xhtml" cssClass="yform" action="echocheck">
<!-- リッチテキストエディタ -->
<sjr:ckeditor
id="richtextEditor" name="model.echo" rows="10" cols="80" width="800"/>
<!-- 送信ボタン -->
<div class="type-button">
<sj:submit targets="main" button="true" value="送信する" href="echocheck" />
</div>
</s:form>
…（省略）…
</body>
</html>
リッチテキストを利用するタグは、<sjr:ckeditor>または<sjr:tinymce>のどちらかになります。上記の例で、<sjr:ckeditor>を<sjr:tinymce>に切り替えるだけでエディタが変わります。もちろんそれぞれのエディタに特化した属性もありますので、詳細はCkeditorEditorならびにTinymceEditorを参照してください。
まとめ
今回は簡単なフォーム作成画面を通して、Struts 2 jQueryプラグインの導入方法について解説しました。次回はStruts 2でJSONデータを取り扱うJSONプラグインについて解説します。
