※ この記事は、前サイトで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を展開すると、フォルダが３つ（langs,plugins,themes）できるので、先程インストールしたメインパーケージ[/TestSite/jscripts/tiny_mce]のフォルダへ上書きします。
実際の言語の選択は、TinyMCEを使うページのJavaScriptで言語を指定する形となります。具体的な方法は、他の項目と一緒に後で説明します。
インストールについては、これだけで設定することも、特にありません。
各設定は、TinyMCEを使うページ側（html,aspx等）のJavaScriptで行うことになります。
TinyMCEをWEBページから使う前に、次ページでは、サンプルで動作確認を行ってみます。
次ページ... |
