TinyMCEの組み込み
CMSやブログ、その他の自作アプリケーションで、このような環境を作成したいことがあるのではないでしょうか。
そんなときに試してみて欲しいのが、TinyMCEです。
TinyMCEは、以下のような特徴をもつ、WYSIWYGなHTMLエディタの一つです。
- 導入が簡単
- Plugin等を作成可能
- 多言語対応
- マルチブラウザ対応
- JavaScriptで記述
- ライセンスは、LGPLなどなど
個人的には、マルチブラウザ対応で、かつ、簡単に導入可能、LGPLのライセンス体系というのがポイントでしょうか。
で、これから基本的な組み込み方法について書こうと思います。
最初に、TinyMCEのサイトから、ダウンロードしてきます。
今回導入してみたのは、TinyMCE2.1.0です。
ダウンロードの際、tgzとzipが選択できますので、自分の環境で利用しやすい方をダウンロードしましょう。
さらに、Language Packagesをダウンロードします。
今回は日本語対応しますので、ja(25)を選択、フォーマットとして、zipもしくはgzipを選択して、Downloadボタンをクリックします。
これで、導入のための準備ができました。
ダウンロードしてきたファイルを解凍しましょう。
圧縮されたファイル内に例（tinymce\examples下）がありますので、まずはそのファイルをブラウザで開いてみます。
最初は、example_simple.htmを開いてみましょう。
ブラウザのセキュリティ警告が出ると思いますが、コンテンツを許可してください。
以下の画面が出てきます。
この中の以下の部分が、TinyMCEで利用する領域となります。
このサンプルは、最も単純な操作ができるものとなっています。
このサンプルでできることは、
- 太字／斜体／下線／取り消し線
- undo／redo
- HTMLコードのcleanup
- リスト
となります。
これだけでも、かなり使えるのではないでしょうか。
それでは、この動作をさせるためのコードを見てみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /><title>Simple example</title><!-- tinyMCE --><script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script language="javascript" type="text/javascript">// Notice: The simple theme does not use all options some of them are limited to the advanced themetinyMCE.init({mode : "textareas",theme : "simple"});</script><!-- /tinyMCE --></head><body><a href="example_full.htm">[Full featured example]</a> >a href="example_advanced.htm">[Advanced example]</a> [Simple example] <a href="example_word.htm">[Word example]</a><form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true"><h3>Simple example</h3>This page shows how to use TinyMCE on a HTML page in the most common and simple way. On this page each TEXTAREAelement gets converted to a editor instance on page load. Notice how TinyMCE tries to match the width and height of the old text area elements. Read more about the features and settings of TinyMCE in the <a href="../docs/index.html">manual%lt;/a>.<br /><br /><textarea id="elm1" name="elm1" rows="10" cols="40">Some <b>element</b>, this is to be editor 1.<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p><img src="logo.jpg"></textarea><br /><textarea id="elm2" name="elm2" rows="15" cols="32">Some <b>element</b>, this is to be editor 2.<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p><img src="logo.jpg"></textarea><br /><input type="submit" name="save" value="Submit" /><input type="reset" name="reset" value="Reset" /></form></body></html>TinyMCEを使うために追加されているのは、以下の部分のみです。
<!-- tinyMCE --><script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script language="javascript" type="text/javascript">// Notice: The simple theme does not use all options some of them are limited to the advanced themetinyMCE.init({mode : "textareas",theme : "simple"});</script><!-- /tinyMCE -->textareaのタグに対してTinyMCEを適用、テーマはSimpleでという設定になります。
たったこれだけの設定でできてしまいます。
簡単ですね。
基本的には、tinyMCE.init()内に各種設定をすれば、いろいろなことができるようになります。
ということで、今回は最低限の機能紹介までということで終了です。
今後は、各種設定、Plugin等について記述していきたいと思います。
コメント
コメントを投稿