Top > 開発ガイド > コンポーネント開発逆引きリファレンス > TinyMCEでテキストエリアをWYSIWYG化する

TinyMCEでテキストエリアをWYSIWYG化する

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

TinyMCEはWYSIWYGを実現する優れたOSSのJavaScriptライブラリです。 RubricksではTinyMCEをある程度簡易に導入するためのヘルパを提供しています。

TinyMCE ホームページ http://tinymce.moxiecode.com/

イメージ

使い方

Rubricksは容易にTinyMCEの機能を利用するためにJavaScriptの関数と、それらを利用して更に使いやすくしたヘルパを準備しています。
全てのケースにおいてヘルパを用いることができるのが理想ですが、実際にはAjaxなどの利用が原因でうまく動かない場合があります。 その場合にはJavaScript関数を用いて問題を解決できる可能性があります。

したがって、まずはヘルパを用いて実装し、うまく動かない場合にはJavaScript関数を用いるという手順で適用してみてください。

基本的な使い方

方法1：Rubricksで提供するヘルパを使用する

  1. init_tiny_mceヘルパをページ上部に記述する
  2. WYSIWYG化したいテキストエリアを通常のtextareaとして記述する
  3. 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 %>

方法2：Javascript関数を使用する

  1. init_tiny_mceヘルパをページ上部に記述する
  2. WYSIWYG化したいテキストエリアを通常のtextareaとして記述する
  3. add_tiny_mce関数でtextareaをWYSIWYG化する
  4. 必要に応じてinit_textarea関数でWYSIWYGテキストエリアの表示内容を指定する
  5. WYSIWYGテキストエリアを含むformのonsubmitにsubmit_tiny_mce関数を記述する

応用的な使い方

SeleniumでTinyMCEを用いたページをテストする

IE上のSeleniumでTinyMCEを用いたページをテストした場合、画面レイアウトが崩れてテストの続行が困難になることがあります。 その場合、TinyMCEライブラリの下記の場所をコメントアウトすることで回避できる場合があります。

今後更新予定・・・

関連項目

API

ヘルパ

init_tiny_mce(options)

  • TinyMCEのライブラリとRubricksで提供するJavaScript関数を読み込みます。
引数必須初期値型説明
options---下記「オプション」を参照してください。

オプション：

キー 必須 初期値 型 説明
:height - - String エディタの高さ。
:width - - String エディタの横幅。
:content_css - - String エディタ内に適用するCSS。
:plugins - - String プラグイン ＊TinyMCEの指定と同じ。
:theme - - String テーマ ＊TinyMCEの指定と同じ。
:theme_advanced_toolbar_location - - String ツールバーの上下の位置 ＊TinyMCEの指定と同じ。
:theme_advanced_buttons1 - - String 1列目に配置するボタン ＊TinyMCEの指定と同じ。
:theme_advanced_buttons2 - - String 2列目に配置するボタン ＊TinyMCEの指定と同じ。
:theme_advanced_buttons3 - - String 3列目に配置するボタン ＊TinyMCEの指定と同じ。
:theme_advanced_toolbar_align - - String ツールバーの左右の位置 ＊TinyMCEの指定と同じ。
:use_wysiwyg - - Boolean wysiwyg利用を必須とする場合はtrue。

tiny_mce_form_remote_tag(optinos)

  • AjaxでWYSIWYGエリア混じりのフォームを送信したい場合に利用します。利用イメージはRailsのform_remote_tagと同様です。
引数必須初期値型説明
options○-Hash下記「オプション」を参照してください。

オプション：

キー 必須 初期値 型 説明
:update - - String 更新するDOM要素のID。
:url - - Hash ポストするコントローラ及びアクション。
:textarea_id - - String WYSIWYG化したいテキストエリアのID。
:max_length - - Integer 入力文字列長の上限値。

tiny_mce_form_tag(options)

  • WYSIWYGエリア混じりの通常フォームを送信したい場合に利用します（非Ajax）。
    利用イメージはRailsのform_tagと同様です。(1.2系のようにブロックを利用する記述はできません)
引数必須初期値型説明
options○-Hash下記「オプション」を参照してください。

オプション：

キー 必須 初期値 型 説明
:url - - Hash ポストするコントローラ及びアクション。
:textarea_id - - String WYSIWYG化したいテキストエリアのID。
:max_length - - Integer 入力文字列長の上限値。

TinyMCE制御向けに提供するJavaScript関数タグ

add_tiny_mce(textarea_id)

  • テキストエリアをWYSIWYG化します。
引数必須初期値型説明
textarea_id○-StringWYSIWYG化したいテキストエリアのID。

remove_tiny_mce(textarea_id)

  • WYSIWYG化されたテキストエリアを通常に戻します。
引数必須初期値型説明
textarea_id○-StringWYSIWYG化を解除したいテキストエリアのID。

resize_tiny_mce(textarea_id, width, height)

  • WYSIWYGテキストエリアの大きさを指定します。
引数必須初期値型説明
textarea_id○-Stringサイズを指定したいテキストエリアのID。
width○-Integerテキストエリアの幅。
height○-Integerテキストエリアの高さ。

init_textarea(textarea_id, message)

  • WYSIWYGテキストエリアの表示内容を変更します。
引数必須初期値型説明
textarea_id○-StringWYSIWYG化したいテキストエリアのID。
message○-Stringテキストエリアに表示させたいHTML文字列。

overflow_textarea(textarea_id, max_length)

  • WYSIWYGテキストエリアが上限文字列長を超えていないかをチェックします。
引数必須初期値型説明
textarea_id○-StringWYSIWYG化したいテキストエリアのID。
max_length○-Integerテキストエリアの最大文字列長。

戻り値

テキストエリアの文字列長が指定内に収まっているtrue
テキストエリアの文字列長が指定内に収まっていないfalse

submit_tiny_mce(form_id, textarea_id, max_length)

  • WYSIWYGテキストエリアに記述された表示内容を本来のtextareaに転記します。通常formのonsubmitに記述します。
引数必須初期値型説明
form_id○-FormオブジェクトサブミットしたいformのID。
textarea_id○-StringWYSIWYG化したいテキストエリアのID。
max_length○-Integerテキストエリアの最大文字列長。

戻り値

サブミット可能な状態true
サブミット不可能な状態false

Attachments