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を使う 1/4 - 2008/12/12 00:00:03

※ この記事は、前サイトで2008/12/12 に作成したものであるため、現在の TinyMCE では、設定が異なるかもしれません。

TinyMCEを使う

このページでは、TinyMCEのインストール、サンプルの実行、ASP.NETで使う場合の方法をまとめています。

TinyMCEは、インストールも使い方も容易であるため、先に本家のWikiを見て頂いた方が良いかと思います。
Wikiで分かるようでしたら、このページは読む必要はありません。

TinyMCE: http://tinymce.moxiecode.com/
Demo: http://tinymce.moxiecode.com/examples/full.php
Wiki: http://wiki.moxiecode.com/index.php/TinyMCE:Index

余計な説明を飛ばして、直ぐ使ってみたい方は、下のページに解説があります。

TinyMCE:Installation: http://wiki.moxiecode.com/index.php/TinyMCE:Installation

■ TinyMCEの概要

ASP.NETで使えるHTMLエディターには、FreeTextBoxやFCKeditor等もありますが、これらは、ASP.NETのコントロールとして作られています。
TniyMCEがこれらと異なる点は、JavaScriptのみで動作するように作られていることです。

TinyMCEの場合は、HTMLフォームの<textarea>をJavaScriptで認識し、それに機能を付加する形で動作しているようです。

ですので、TniyMCEからは、貼り付けられたページがどういうものかは、特に意識されておらず、JavaScriptが動作するブラウザーであれば、WEBサーバーに依存せず動作します。
通常のHTMLでもASP.NETのページでも、基本的に同じ方法で使用できます。

他のHTMLエディターがコントロールのプロパティで設定を行うのに対し、TinyMCEは、JavaScriptで設定を行います。
設定は、手書きになりますが、複雑ではないため、設定方法が分かれば、コントロールのプロパティ設定とあまり変わらないと思います。

付加機能のGZIP圧縮を使用する場合は、別途、各WEBサーバー用のプログラムをサーバへ入れておく必要があります。

■ TinyMCEのインストール

今回は、IIS+ASP.NET2.0で、TinyMCEのVer3.2.1.1を使いました。
WEBサイトのルートフォルダは、[/TestSite]としています。
GZIP圧縮については、別の機会で説明します。

[Download]

以下のページから、TinyMCEの[Main Package: tinymce_3_2_1_1.zip]と[Language packs: Japanese(tinymce_lang_pack.zip)]をダウンロードします。

TinyMCE: http://tinymce.moxiecode.com/download.php

[メインパッケージのインストール]

ダウンロードしたtinymce_3_2_1_1.zipを展開すると以下のフォルダ、ファイルができます。

/examples ・・・TinyMCEのサンプルのファイル&フォルダが格納されている
/jscripts/tiny_mce ・・・TinyMCEのJavaScript本体が格納されている
changelog.txt ・・・変更履歴

上記の2つめのフォルダ[/jscripts/tiny_mce]を、WEBサイトのフォルダへコピーします。
今回は、WEBサイトのルート直下の[/TestSite/jscripts/tny_mce]へコピーしました。

フォルダは、[/tiny_mce]だけでもいいのですが、サンプルが[/jscripts/tiny_mce]へインストールされている前提となっているため、それに従います。

[/examples]フォルダは、次ページの「サンプルの動作確認」で使用しますので、削除せずにとっておいて下さい。

[言語パックのインストール]

言語パックのインストールは、フォルダを上書きするだけです。
tinymce_lang_pack.zipを展開すると、フォルダが3つ(langs,plugins,themes)できるので、先程インストールしたメインパーケージ[/TestSite/jscripts/tiny_mce]のフォルダへ上書きします。

実際の言語の選択は、TinyMCEを使うページのJavaScriptで言語を指定する形となります。具体的な方法は、他の項目と一緒に後で説明します。

インストールについては、これだけで設定することも、特にありません。
各設定は、TinyMCEを使うページ側(html,aspx等)のJavaScriptで行うことになります。

TinyMCEをWEBページから使う前に、次ページでは、サンプルで動作確認を行ってみます。

次ページ...

カテゴリ: TinyMCE  ブックマーク: はてなブックマーク Yahoo!ブックマーク Googleブックマーク Twitterでつぶやく  コメント( 0 )
■ 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 )
■ ASP.NETでTinyMCEを使う 3/4 - 2008/12/12 00:00:01

■ 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  ブックマーク: はてなブックマーク Yahoo!ブックマーク Googleブックマーク Twitterでつぶやく  コメント( 0 )
■ ASP.NETでTinyMCEを使う 4/4 - 2008/12/12 00:00:00

■ オプションの設定

*この記事は、編集途中です。

ここでは、主なものを紹介します。
私もよく分かっていない部分ありますので、注意して下さい。
サンプル+Wikiを見てもらった方が、正確だと思います。

TinyMCE Wiki: http://wiki.moxiecode.com/index.php/TinyMCE:Index

[language: 言語の指定]

Language Pack(日本語:"ja")を適応するには、以下のように、languageを追記します。

tinyMCE.init({
  language: "ja",
  mode: "textareas",
...

[mode: 動作モード]

modeは、TinyMCEの動作モードで、"textareas"を指定した場合は、ページ内の全ての<textarea>に、TinyMCEの機能が付与されます。
個別の<textarea>にTinyMCEの機能を付与したい場合は、mode"exact"にし、elementsに<textarea>のIDを指定します。複数指定する場合は、カンマ","で区切ります。

tinyMCE.init({
  mode: "exact",
  elements: "textarea1,textarea2",
...

[theme: テーマ]

インストール済みのthemeは、"simple""advanced"の2種類です。
テーマを切り替えると、TinyMCEの大まかな外観を変更できます。
各テーマは、フォルダ[/jscripts/tiny_mce/themes]配下にあります。
サンプルでは、Simple theme以外が、"advanced"です。

tinyMCE.init({
  mode: "textareas",
  theme: "advanced",
...

[skin: スキン]

skinを設定するとスキンを切り替えられます。
各スキンは、フォルダ[/jscripts/tiny_mce/themes/テーマ別フォルダ/skins]配下にあります。サンプルのskins.htmlが参考になります。

tinyMCE.init({
  mode: "textareas",
  theme: "advanced",
  skin: "o2k7",
...

[plugins: プラグイン]

pluginsは、使用するプラグインを指定します。
サンプルのfull.htmlから、不要なものを削っていくと楽です。

TinyMCE:Plugins reference
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins

[theme_advanced_...: ツールバーの設定]

theme_advanced_...で、ツールバーに表示するボタンや表示位置の設定を行います。サンプルのfull.htmlから、不要なものを削っていくと楽です。

TinyMCE:Control reference
http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

編集中。

前ページ... 先頭ページ...

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