RSS2.0 hr
カテゴリ
 連絡事項 (11)
 開発全般 未分類 (2)
 WEB開発 未分類 (1)
 C# (1)
 Java (2)
 PHP (1)
 Flash (1)
 WPF, Silverlight (6)
 Android (2)
 MySQL (1)
 ニコ窓 (66)
 Nico Rec Ctrlr (4)
 Live Seeker (8)
 Live Seeker Lite (4)
 Nico2ls (1)
 未完成ツール (7)
 TinyMCE (4)
 FFmpeg (6)
 Linux (1)
 PCパーツ関連 (1)
 掲載誌 (3)
コンテンツ一覧
最新記事
2015/01/12 12:00
ニコ窓の開発&公開終了
2014/05/04 00:00
ニコ窓 Ver3.015 公開
2014/04/27 00:00
ニコ窓 Ver3.014 公開
2014/03/08 00:00
ニコ窓 Ver3.013 公開
2014/03/02 22:00
Android関連の開発リンク集
コンテンツ一覧
公開ツール
ニコ窓
ニコニコ生放送用
ブラウザ
ニコ窓
コンテンツ
■ ASP.NETでTinyMCEを使う 2/4 - 2008/12/12 00:00:02

■ サンプルの動作確認

[サンプルのコピー]

前ページでDownload&展開したメインパッケージのフォルダの[/examples]をWEBサイトへコピーします。今回は、[/TestSite/examples]へコピーしました。

コピー先は、メインパッケージ[/jscripts]と同レベルのパスとして下さい。
これは、サンプルのJavaScriptの参照先が[/jscripts/tiny_mce]に設定されているためです。

[サンプルの動作確認]

WEBブラウザーから、先ほどコピーしたフォルダ[/examples]配下の[index.html]へアクセスするとサンプルが実行され、以下のようなページが表示されます。
左フレームに4種類のサンプルのリンクがあり、右フレームにTinyMCEのサンプルが表示されます。

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で実装してみます。

前ページ... 次ページ...

カテゴリ: TinyMCE  ブックマーク: はてなブックマーク Yahoo!ブックマーク Googleブックマーク Twitterでつぶやく  コメント( 0 )
【コメント一覧】
【新規コメント投稿】
お名前(最大20文字):  さん
コメント本文 (最大300文字、URL投稿不可):
P. 1 List
お知らせ
サイト情報
2015/01/12 00:00
ニコ窓の開発&公開を終了しました。
閲覧者数
今日: 26 昨日: 15
合計: 807198 (PV)
開始: 2010/03/11
このサイトでは、C#で作成したツールを公開しています。
リンクは自由に張って頂いて構いません。
旧サイト(toypark.in)の記事等が含まれています。
管理人: motta
  はてなブックマーク Yahoo!ブックマーク Googleブックマーク Twitterでつぶやく
  RSS2.0 RSS2.0
  My Yahoo!
  livedoor Reader
  Windows Live
 
ACR WEB