C#ツール工房 - ASP.NETでTinyMCEを使う 3/4

カテゴリ

　連絡事項 (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)

コンテンツ一覧

■ ASP.NETでTinyMCEを使う

［ASP.NETで使う］

前頁のTinyMCE WikiのサンプルをASP.NETで使ってみます。

ASP.NETでの実装

 1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TinyMCE.aspx.cs" Inherits="TinyMCE" %>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd">
 3: <html xmlns="http://www.w3.org/1999/xhtml">
 4: <head runat="server">
 5: <title>TinyMCE Test</title>
 6: <script type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script>
 7: <script type="text/javascript">
 8:   tinyMCE.init({
 9:     mode: "textareas"
10:     });
11: </script>
12: </head>
13: <body>
14: <form id="form1" runat="server">
15:   <asp:TextBox ID="TextBoxTinyMCE" runat="server" TextMode="MultiLine"></asp:TextBox>
16:   <asp:Button ID="ButtonSave" runat="server" Text="Save" onclick="ButtonSave_Click" />
17: </form>
18: </body>
19: </html>

［サンプルの解説］

サンプルは、ASP.NETのWEBフォーム（aspx）を新規に作成し、赤字部分を追加したものです。ファイルは[/TestSite]直下に置きました。

(1)TinyMCEの初期化

6~11行目のJavaScriptセクションは、前ページのものと同一です（6行目のsrcだけテスト環境用に変更）。

(2)TextBoxの配置

15行目では、ASP.NETのTextBoxを配置し、プロパティTextModeを"MultiLine"に設定しています。"MultiLine"にしないとページ生成時に、<textarea>にならないため、TinyMCEは動作しません。

(3)データの保存等

16行目は、前ページのSubmitボタンにあたる「Save」ボタンを追加しています。
クリックイベント発生時に、サーバー側で処理を行います。
サーバー側では、通常のTextBoxとして扱われるため、以下のようにしてデータを取得できます。

string xhtmlText = TextBoxTinyMCe.Text;

基本的には、これだけで動作しますが、デフォルトの設定のため、機能が少ないです。
他の機能は、TinyMCEに付属していたサンプル（今、解説したWikiのではない）のHTMLを見て、試して見るのが早いと思います。
フルセット（full.html,skins.html）から、不要なものを削除していく方がいいかもしれません。

次ページでは、主な機能を説明します。

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

カテゴリ: TinyMCE 　ブックマーク: