Wikcet で、Tiny-MCE を使ったページを生成する方法
（長いので２回に分けて投稿）
Wicket Stuff が配布している Wicket-contrib-tinymce を sourceforge のサイト
http://sourceforge.net/projects/wicket-stuff/files/
から、wicket-contrib-tinymce-1.0.jar をダウンロードしてこれを使用してみたが、
この中に梱包されてる Tiny-MCE は古くバージョンが、2.0.6.1 である。
さらに日本語未対応なのでこれを使うのはやめる。
Tiny-MCE は、以下から入手
http://tinymce.moxiecode.com/download.php → tinymce_3_3_9_2.zip
日本語化パックを以下で入手
http://tinymce.moxiecode.com/download_i18n.php → tinymce_lang_pack.zip
tinymce_3_3_9_2.zip を解凍してできるフォルダ tinymce/jscripts/tiny_mce
を起点に必要なものが存在する。
WebContent に、これら tiny_mce/ の下,全てを置くフォルダを WebContent/js/tinymce とするなら、
Wicket の org.apache.wicket.markup.html.IHeaderResponse で
renderJavascriptReference は、"js/tinymce/tiny_mce.js" で実行する。
つまり、元の tinymce/jscripts/tiny_mce に存在した tiny_mce.js を指定する。
この、renderJavascriptReference 実行は、Wicket の WebPageクラスで、
<textarea> タグのコンポーネント org.apache.wicket.markup.html.form.TextArea に、
ビヘビアで行う。
ビヘビアは org.apache.wicket.ajax.AbstractDefaultAjaxBehaviorを継承したビヘビアで
renderHead(org.apache.wicket.markup.html.IHeaderResponse)をオーバライドして上記と JavaScript の初期化を行う。
また、onComponentRendered メソッドをオーバライドして、JavaScript をロードするようにする。
このままだと、画面の編集エリア（textarea部分）で文字を入力して改行をすると、
<p> タグで囲まれてしまい改行幅が大きくて使いにくい。
<p>タグで囲まれてしまうことを回避するために、
JavaScript Tiny-MCE 初期化の処理で、tinyMCE.init の中に、
force_br_newlines : true,
forced_root_block : '',
force_p_newlines : false,を追加する。
用意するビヘビアクラスは、、
import org.apache.wicket.Response;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.util.string.JavascriptUtils;
/**
* Tiny-MCE ビヘビア
*/
public class TinyMceBehavior extends AbstractDefaultAjaxBehavior {
private static final long serialVersionUID = 1L;
boolean ajax;
public TinyMceBehavior(boolean ajax){
this.ajax = ajax;
}
@Override
public void renderHead(IHeaderResponse response){
super.renderHead(response);
// Tiny-MCE JavaScript path
response.renderJavascriptReference("js/tinymce/tiny_mce.js");
// initialize tinyMCE
StringBuilder initBuilder = new StringBuilder();
initBuilder.append("tinyMCE.init({\n")
.append("theme: \"advanced\",\n")
.append("theme_advanced_toolbar_location : \"top\",\n")
.append("theme_advanced_toolbar_align : \"left\",\n")
.append("theme_advanced_buttons1 :\"")
.append("fontselect,fontsizeselect,undo,redo,separator")
.append(",forecolor,separator,bold,italic,underline,separator")
.append(",link,unlink,separator")
.append(",justifyleft,justifycenter,justifyright,separator")
.append(",bullist,numlist,separator,outdent,indent")
.append("\",\n")
.append("theme_advanced_buttons2 : \"\",\n")
.append("theme_advanced_buttons3 : \"\",\n")
.append("force_br_newlines : true,\n")
.append("forced_root_block : '',\n")
.append("force_p_newlines : false,\n")
.append("mode : \"exact\"\n")
.append("});");
response.renderJavascript(initBuilder.toString(), "init");
}
@Override
protected void onComponentRendered(){
super.onComponentRendered();
if (this.ajax) {
// load editor script
Response response = getComponent().getResponse();
JavascriptUtils.writeJavascript(response,getCallbackScript(),"load");
} else {
Response response = getComponent().getResponse();
JavascriptUtils.writeJavascript(response
,"tinyMCE.execCommand('mceAddControl',true,'"+getComponent().getMarkupId()+"');");
}
}
@Override
protected void respond(AjaxRequestTarget target){
StringBuilder builder = new StringBuilder();
builder.append("\ntinyMCE.execCommand(
'mceAddControl',true,'"+getComponent().getMarkupId()+"');");
//target.appendJavascript(JavascriptUtils.SCRIPT_OPEN_TAG);
target.appendJavascript(builder.toString());
//target.appendJavascript(JavascriptUtils.SCRIPT_CLOSE_TAG);
}
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
次回は、日本語化の設定方法
