Develop and Download Open Source Software

OpenSource Downloads

7-Zip  (4,208)  
HandBrake Japanese Language Version  (3,353)  
CrystalDiskInfo  (1,743)  
CotEditor  (1,120)  
CrystalDiskMark  (866)  
Boookends  (788)  
SMPlayer  (642)  
えこでこツール  (599)  
Tera Term  (595)  
10  FFFTP  (579)  
11  Cabos  (530)  
12  BathyScaphe  (494)  
13  ffdshow  (481)  
14  MergeDoc  (464)  
15  ギコナビ  (438)  
More >>

最近ブックマークされた記事

JavaScript型テキストエディタ:TinyMCEを設定する

2007年05月29日 09:59 Bruce-Byfield(2007年5月22日(火)) 1 2
 LGPLの下で配布されているMoxiecodeのTinyMCE(Tiny Moxiecode Editor)は、HTMLタグを知らないユーザでもHTML形式でフォーマットされたテキストを入力できるJavaScriptプログラムだ。

 TinyMCEは、多数のブログシステムやコンテンツ管理システムにバンドルされている。自作のWebアプリケーションでTinyMCEを使うなら基本設定を利用するのが手っとり早いが、詳細設定は依存関係や競合関係の解決を行うために複雑になる可能性がある。本稿では、WebページにTinyMCEを統合するヒントとアドバイスをいくつか提供する。

 TinyMCEは、多くのGNU/Linuxディストリビューション内のパッケージや、zipまたはtar/gzipのアーカイブとして入手できる。プログラムをインストールするには、TinyMCEのディレクトリ構造をWebサイトのルートディレクトリに展開したうえで、TinyMCEを有効にしたい各ページの最初のタグのすぐ後にTinyMCEスクリプトをすべてのカスタマイズ項目とともに追加する(詳細は後述)。

 うまくインストールされると、HTMLの<textarea>タグの部分にツールバーが追加される。デフォルトでは、このツールバーがすべてのtextareaタグに追加されるが、必要なものにだけ追加を行うような設定も可能だ。GNU/Linux環境でJavaScriptが有効になっていれば、その結果をOperaやFirefoxの他、EpiphanyのようなGeckoベースのブラウザで確認できる。TinyMCEはKonquerorでは動作しないので、一部のFirefox拡張機能とも互換性がない可能性がある。TinyMCEが動作しないブラウザでは、代わりに普通の入力フィールドが表示される。

高速設定

 ページ上でTinyMCEを有効にするには、そのページの最初の<head> タグの後に以下の行を追加するだけでよい。

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>

 このスクリプトにより、簡単な書式指定、元に戻す/やり直しの操作、箇条書き、特殊文字、基本的なHTML段落タグのドロップダウンリストなど幅広いツールを備えたTinyMCEが、ページ上の全フォームに追加される。

 もっと基本的なツール群に換えたい場合は、modeフィールドの下にもう1行「theme : "simple"」と追記すれば簡易テーマを指定することができる。ちなみにテーマを「詳細(advanced)」に変更すると、テーマを指定しなかったときと同じツール群が用意される。

 TinyMCEのサンプルページにあるソースを使えば、他のもっと複雑な書式指定をすることもできる。このページのなかには、TinyMCEに追加可能なほぼすべての設定オプションが含まれたフル機能のサンプルもある。

最終更新:2007年07月01日 19:05