GWT:RichTextAreaを利用する

GWTにはリッチテキストエディターが存在するが、実際にこれを使おうとしたらフォントの設定などの処理をおこなういわゆるツールバーの記述をすべて自前で書く必要がある。これは面倒なわけだが、リッチテキスト用のツールバーのライブラリが存在するのでその利用を含めて使い方を紹介する。

RichTextToolBarクラス（GWT ShowCase版）
GWTのShowCaseで動いているリッチテキストエディターがある。これはApache2.0ライセンスで公開されているので、基本的にこれを使えばよい。ただ、各種操作ボタンの画像などもあわせて取ってくる必要がある。

RichTextToolBarクラス（Erik Scholtz版）
Erik Scholtz  氏が公開しているRichTextToolBarクラス。彼のBLOGにて公開している。また同じものが、GoogleCodeにも公開されている。

どちらも使い方は同じで、制御したいRichTextAreaのインスタンスを宣言時にコンストラクタの引数として渡せばオッケイ。
なお両者の違いだが、後者のErikのクラスはアイコン画像ファイルをErikのサイトからダウンロードする形になっています。ソースを見てもらえばわかりますが、アイコンをまとめたファイルを一気にとってきてそれを分割して各ボタンに割り当てています。こっちのほうがダウンロードして即使えるという利点がありますね。

参考までに、UIBinderでの記述例を以下に載せます。

（～.ui.xmlファイル）

view plainprint?

1. <ui:uibinder xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:ui="urn:ui:com.google.gwt.uibinder">  
2. <ui:style>  
3. </ui:style>  
4. <g:htmlpanel>  
5. </g:htmlpanel></ui:uibinder>  
6.   
7.   
8. <table><tbody>  
9. <tr><td><g:simplepanel ui:field="tbar"></g:simplepanel></td></tr>  
10. <tr>                 <td style="width: 800px;" valign="top"><g:richtextarea ui:field="rtext">サブジェクト</g:richtextarea></td>         </tr>  
11. </tbody></table><g:button>OK</g:button><g:button>Cancel</g:button>  

                 
サブジェクト
         
OKCancel

（～.javaファイル）

view plainprint?

1. @UiField  
2. RichTextArea rtext;  
3. @UiField  
4. SimplePanel  tbar;  
5.   
6. RichTextToolbar toolBar = new RichTextToolbar(rtext);  
7. tbar.add(toolBar);  

@UiField
RichTextArea rtext;
@UiField
SimplePanel  tbar;

RichTextToolbar toolBar = new RichTextToolbar(rtext);
tbar.add(toolBar);

このように記述するだけで、ちょっとしたリッチテキストエディターの完成です。

---

なお、本サイトの掲載内容は、www.keicode.comさんの「書式付入力ボックス ～ RichTextArea の利用」を参考にさせていただきました。