Top > 開発ガイド > コンポーネント開発Tips集 > TinyMCEの利用
TinyMCEの利用
対象バージョン
当ドキュメントはRubricks-0.6.x向けです。
概要
TinyMCEはWYSIWYGを実現する優れたOSSのJavaScript?ライブラリです。 RubricksではTinyMCEをある程度簡易に導入するためのヘルパを提供しています。
XSSなどのセキュリティ対策のためにCustum Sanitizerを利用しています。 Custum Sanitizerはホワイトリスト形式でサニタイジングを行うRubyライブラリであり、Rubricksのサブプロジェクトとして開発されています。
TinyMCE ホームページ http://tinymce.moxiecode.com/
適用の手順
Rubricksは容易にTinyMCEの機能を利用するためにJavaScript?の関数と、それらを利用して更に使いやすくしたヘルパタグを準備しています。 全てのケースにおいてヘルパタグを用いることができるのが理想ですが、実際にはAjaxなどの利用が原因でうまく動かない場合があります。 その場合にはJavaScript?関数を用いて問題を解決できる可能性があります。
したがって、まずはヘルパタグを用いて実装し、うまく動かない場合にはJavaScript?関数を用いるという手順で適用してみてください。
ヘルパタグの利用
Rubricksで提供するヘルパタグ
| ヘルパ名 | 概要 |
| init_tiny_mce | TinyMCEのライブラリとRubricksで提供するJavaScript?関数を読み込む |
| tiny_mce_form_remote_tag | AjaxでWYSIWYGエリア混じりのフォームを送信したい場合に利用します。利用イメージはRailsのform_remote_tagと同様です。 |
| tiny_mce_form_tag | WYSIWYGエリア混じりの通常フォームを送信したい場合に利用します（非Ajax）。利用イメージはRailsのform_tagと同様です。(1.2系のようにブロックを利用する記述はできない) |
ヘルパタグ利用の手順
- init_tiny_mceをページ上部に記述する
- WYSIWYG化したいテキストエリアを通常のtextareaとして記述する
- textareaのDOM要素IDを指定したフォームをtiny_mce_form_remote_tagもしくはtiny_mce_form_tagを用いて記述する
サンプル
<%= init_tiny_mce %>
<%= tiny_mce_form_remote_tag(
:update => 'show_topics',
:url => {:controller=>'/bbs/bbs_topic', :action=>'create_topic'},
:textarea_id => 'create_topic_message',
:max_length => 5000) %>
<textarea id="create_topic_message" class="rubricks_general_window" name="create_topic[message]" style="height: 300px; width: 100%;"></textarea>
<%= end_form_tag %>
ヘルパタグ詳細
- init_tiny_mce
パラメータ
| :height | エディタの高さ |
| :width | エディタの横幅 |
| :content_css | エディタ内に適用するCSS |
| :plugins | プラグイン ＊TinyMCEの指定と同じ |
| :theme | テーマ ＊TinyMCEの指定と同じ |
| :theme_advanced_toolbar_location | ツールバーの上下の位置 ＊TinyMCEの指定と同じ |
| :theme_advanced_buttons1 | 1列目に配置するボタン ＊TinyMCEの指定と同じ |
| :theme_advanced_buttons2 | 2列目に配置するボタン ＊TinyMCEの指定と同じ |
| :theme_advanced_buttons3 | 3列目に配置するボタン ＊TinyMCEの指定と同じ |
| :theme_advanced_toolbar_align | ツールバーの左右の位置 ＊TinyMCEの指定と同じ |
| :use_wysiwyg | wysiwyg利用を必須とする場合はtrue |
サンプル
<%= init_tiny_mce %>
- tiny_mce_form_remote_tag
パラメータ
| :update | 更新するDOM要素のID |
| :url | ポストするコントローラ及びアクション |
| :textarea_id | WYSIWYG化したいテキストエリアのID |
| :max_length | 入力文字列長の上限値 |
サンプル
<%= tiny_mce_form_remote_tag(
:update => 'show_topics',
:url => {:controller=>'/bbs/bbs_topic', :action=>'create_topic'},
:textarea_id => 'create_topic_message',
:max_length => 5000) %>
- tiny_mce_form_tag
パラメータ
| :url | ポストするコントローラ及びアクション |
| :textarea_id | WYSIWYG化したいテキストエリアのID |
| :max_length | 入力文字列長の上限値 |
サンプル
<%= tiny_mce_form_tag(
:url => {:controller=>'/bbs/bbs_topic', :action=>'create_topic'},
:textarea_id => 'create_topic_message',
:max_length => 5000) %>
Javascript関数の利用
TinyMCE制御向けに提供するJavaScript?関数タグ
| 関数名 | 概要 |
| add_tiny_mce | テキストエリアをWYSIWYG化する |
| remove_tiny_mce | WYSIWYG化されたテキストエリアを通常に戻す |
| resize_tiny_mce | WYSIWYGテキストエリアの大きさを指定する |
| init_textarea | WYSIWYGテキストエリアの表示内容を変更する |
| overflow_textarea | WYSIWYGテキストエリアが上限文字列長を超えていないかをチェックする |
| submit_tiny_mce | WYSIWYGテキストエリアに記述された表示内容を本来のtextareaに転記する。通常formのonsubmitに記述する。 |
JavaScript?関数利用の手順
- init_tiny_mceヘルパタグをページ上部に記述する
- WYSIWYG化したいテキストエリアを通常のtextareaとして記述する
- add_tiny_mce関数でtextareaをWYSIWYG化する
- 必要に応じてinit_textarea関数でWYSIWYGテキストエリアの表示内容を指定する
- WYSIWYGテキストエリアを含むformのonsubmitにsubmit_tiny_mce関数を記述する
JavaScript?関数詳細
- add_tiny_mce
パラメータ
| 引数1 | textarea_id | WYSIWYG化したいテキストエリアのID |
サンプル
<script>
add_tiny_mce('textarea_id')
</script>
- remove_tiny_mce
パラメータ
| 引数1 | textarea_id | WYSIWYG化したいテキストエリアのID |
サンプル
<script>
remove_tiny_mce('textarea_id')
</script>
- resize_tiny_mce
パラメータ
| 引数1 | textarea_id | サイズを指定したいテキストエリアのID |
| 引数2 | width | テキストエリアの幅 |
| 引数3 | height | テキストエリアの高さ |
サンプル
<script>
resize_tiny_mce('textarea_id', 100, 50)
</script>
- init_textarea
パラメータ
| 引数1 | textarea_id | WYSIWYG化したいテキストエリアのID |
| 引数2 | message | テキストエリアに表示させたいHTML文字列 |
サンプル
<script>
init_textarea('textarea_id', <%= @news.content %>)
</script>
- overflow_textarea
パラメータ
| 引数1 | textarea_id | WYSIWYG化したいテキストエリアのID |
| 引数2 | max_length | テキストエリアの最大文字列長 |
戻り値
| テキストエリアの文字列長が指定内に収まっている | true |
| テキストエリアの文字列長が指定内に収まっていない | false |
サンプル
<script>
overflow_textarea('textarea_id', 3000)
</script>
- submit_tiny_mce
パラメータ
| 引数1 | form_id | サブミットしたいformのID |
| 引数2 | textarea_id | WYSIWYG化したいテキストエリアのID |
| 引数3 | max_length | テキストエリアの最大文字列長 |
戻り値
| サブミット可能な状態 | true |
| サブミット不可能な状態 | false |
サンプル
<form action='/aaa/bbb'
onsubmit="if(submit_tiny_mce(this.id, '#{options[:textarea_id]}', #{options[:max_length]})) {#{remote_function(options)}}} else {rubricks_message_window_open('#{RubricksLib.hl('[_Common_ExceedMaxCharacter]', options[:max_length])}', 'error');}; return false;">
TinyMCEで入力されたデータの出力
Custum Sanitizerの利用
Custum Sanitizerとは
TinyMCEで記述された文字列は通常のHTML文字列としてサーバにポストされるため、XSSなどのトラップを仕掛けることが出来てしまいます。
RubricksではCustum Sanitizerを用いてこの問題を解決しています。 Custum Sanitizerはホワイトリスト方式でサニタイジングを行います。 ホワイトリストとはその名の通りブラックリストの逆であり、表示してもかまわない形式の文字列が精査された上で登録されています。 例えば、<script>～</script>という文字列はホワイトリストに登録されていないため、文字列の表示自体が一切実施されません。
Rubricksからは、TinyMCEで正当に利用されるタグだけが表示されるように構成されたホワイトリスト群が提供されています。
Custum Sanitizerを用いたサニタイジング
Custum Sanitizerは下記のように利用します。
<%= cs(news.article, {:rule => :tiny_mce}) %>
メソッドcsを用います。 パラメータ「:rule => :tiny_mce」で指定することでTinyMCE用のホワイトリストが適用されます。 TinyMCEで入力された情報を表示する場合には原則的に全ての箇所にcsメソッドを記述してください。
その他の情報
SeleniumでTinyMCEを用いたページをテストする
IE上のSeleniumでTinyMCEを用いたページをテストした場合、画面レイアウトが崩れてテストの続行が困難になることがあります。 その場合、TinyMCEライブラリの下記の場所をコメントアウトすることで回避できる場合があります。
今後更新予定・・・
