■ サンプルの動作確認
［サンプルのコピー］
前ページでDownload＆展開したメインパッケージのフォルダの[/examples]をWEBサイトへコピーします。今回は、[/TestSite/examples]へコピーしました。
コピー先は、メインパッケージ[/jscripts]と同レベルのパスとして下さい。
これは、サンプルのJavaScriptの参照先が[/jscripts/tiny_mce]に設定されているためです。
［サンプルの動作確認］
WEBブラウザーから、先ほどコピーしたフォルダ[/examples]配下の[index.html]へアクセスするとサンプルが実行され、以下のようなページが表示されます。
左フレームに４種類のサンプルのリンクがあり、右フレームにTinyMCEのサンプルが表示されます。
次ページでは、ASP.NET(aspx)からTinyMCEを使う方法を説明します。
事前に、上記のサンプルのHTMLを見ておくといいかもしれません。
サンプルでは、[Simple theme: simple.html]が、一番シンプルなものです。
■ TinyMCEのサンプル説明
［サンプルについて］
ASP.NETで使う前に、TinyMCE Wikiの以下のサンプルで簡単に説明します。
The most basic page integration
http://wiki.moxiecode.com/index.php/TinyMCE:Installation#Making_changes_on_your_web_site
1: <html>
2: <head>
3: <title>TinyMCE Test</title>
4: <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
5: <script type="text/javascript">
6: tinyMCE.init({
7: mode : "textareas"
8: });
9: </script>
10: </head>
11: <body>
12: <!-- form sends content to moxiecode's demo page -->
13: <form method="post" action="http://tinymce.moxiecode.com/dump.php? example=true">
14: <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
15: <input type="submit" value="Save" />
16: </form>
17: </body>
［サンプルの解説］
TinyMCEを使う場合、以下の2つが必要です。
(1)<textarea>タグの配置（14行目）
TinyMCE自体は、<textarea>生成しないため、HTMLフォームに予め<textarea>を配置しておく必要があります。
(2)TinyMCEの初期化（6～8行目）
サンプルでは、6～8行目のJavaScriptセクションで、tinyMCE.init()メソッドが呼ばれています。
他のHTMLエディターでは、コントロールのプロパティで設定を行いますが、TinyMCEでは、このメソッドで設定します。
このサンプルでは、modeに、"textareas"を指定しています。この場合、ページ内の全ての<textarea>にTinyMCEのツールバーが付与されます。
6: tinyMCE.init({
7: mode: "textareas"
8: });
特定の<textarea>のみでTinyMCEを使う場合は、modeに"exact"を指定し、更に、elementsで<textarea>のIDを指定します。
複数指定する場合は、カンマ","で区切ります。
6: tinyMCE.init({
7: mode: "exact",
8： elements: "textarea1,textarea2"
9: });
このサンプルは、TinyMCEを使う最低限のコードですが、次のページでは、同様の処理をASP.NETで実装してみます。
前ページ... 次ページ... |
