Web サイトで高機能な書式付入力を可能にする TinyMCE の基本的な使い方

書式付入力を実現する方法として人気が高いのは TinyMCE です。TinyMCE は WordPress、Drupal、Joomla! 等、非常にシェアの大きい各種 CMS で利用されています。ライセンスは LGPL です。

この資料では TinyMCE の基本的な利用方法を紹介します。

TinyMCE の使い方

TinyMCE のダウンロードサイトでは、次のダウンロードパッケージがあります。

メインパッケージ (Main Package) - TinyMCE の利用に必要な最低限のパッケージ
開発パッケージ (Development Package) - TinyMCE のプラグインの開発などに必要なソース、ツール付きパッケージ
jQuery パッケージ (jQuery Package) - jQuery を含むプラグイン付きのパッケージ
言語パック (Language Packs) - 各種言語パック

ここではメインパッケージで、TinyMCE を利用する基本的な方法を紹介します。

基本的な利用方法

TinyMCE の入手

TinyMCE の Web サイトから Main Package をダウンロードします。

zip ファイルを展開して配置すれば OK です。このときに tinymce ディレクトリ以下全て配置するようにしてください。適当に掻い摘んで配置するとトラブルの元です。ただし、examples ディレクトリは削除しても大丈夫です。

tiny_mce.js の取り込み

TinyMCE を有効化するには、TinyMCE パッケージ内の JavaScript、 timymce/jscripts/tiny_mce/tiny_mce.js を取り込みます。

ファイルへのパスについては、あなたの環境に合わせて適当に変更してください。

tinyMCE.init でのパラメータの設定

tinyMCE.init 関数にパラメータを渡すことで、各種カスタマイズを実施可能です。

詳細は後ほど記載します。ここでは最も単純な設定を行いましょう。
次の JavaScript コードを、tiny_mce.js を取り込んだ後に記載します。

tinyMCE.init({
     mode: "textareas",
     theme: "simple"
});

mode、thema などのパラメータの意味については、下で説明します。

テストコード～試してみよう！

下記のコードで次のようなエディタが表示されるはずです。

<!doctype html>
<html>
<head>
<script type="text/javascript" 
  src="tinymce/jscripts/tiny_mce/tiny_mce.js" ></script>
<script type="text/javascript">
tinyMCE.init({
     mode: "textareas",
     theme: "simple"
});
</script>
</head>
<body>
<form>  
<textarea name="content" cols="50" rows="15" > 
Hello, TinyMCE!
</textarea>
</form>
</body>
</html>

こんなエディタが表示されるはずです。

TinyMCE - simple テーマ

編集した入力情報をサーバーに送る方法として最も簡単なのは、このフォーム内に Submit ボタンを配置し、 form 要素の action 属性に指定したところへ post することでしょう。特にサーバー側で特別なことはありません。「普通の」ポストデータです。

基本的なパラメータの設定

モード - mode

パラメータ mode で、どの HTML 要素をエディタにするか指定します。

上の例では mode として textareas を指定しています。これはそのページ内の、全ての textarea 要素をエディタに変換するという意味です。

特定の HTML 要素 (textarea に限りません) をエディタに変換する場合は、mode に exact を指定して、要素の ID を elements の値に設定します。

テーマ - theme

ビルトインのテーマは "simple" と "advanced" の二つのみです。

simple では上のスクリーンショットのように非常に限られた機能だけが利用可能です。各種ボタン、プラグイン等を追加するためには、advanced にします。

TinyMCE - advanced テーマ
advanced で利用できるツールバーボタン、プラグイン

スキン - skin

TinyMCE ビルトインのスキンは、"default" と "o2k7" です。o2k7 は Office 2007 の略で、マイクロソフト社の Office 2007 のような色合いになるようなスキンです。

default および o2k7 スキンではツールバーは次のように表示されます。

TinyMCE - default スキン
スキン default

TinyMCE - o2k7 スキン
スキン o2k7

この資料では TinyMCE の基本的な使い方を紹介しました。より多くの処理を実現する advanced テーマについては、また別の資料で説明します。