Hatena::ブログ(Diary)

naoyaのはてなダイアリー

January 22, 2006

TinyMCE JavaScript Content Editor

とある友人に教えても経ったTinyMCEという WYSYWIGWYSIWYG な HTML エディタライブラリがやばそう。

  • JavaScript で記述された
  • LGPL でオープンソースな
  • クロスプラットフォームの
  • 多言語対応もしてて
  • 簡単に使える

ライブラリ。似たようなものに htmlArea というのがあって結構昔に話題になってたんですが、導入がめんどくさかったりブラウザによってはまともに動かなかったりとか色々面倒な感がありました。TinyMCE の方はと言いますと、Installation instructions にもあるとおり、

<html>
<head>
<title>TinyMCE Test</title>
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
  mode : "textareas"
});
</script>
</head>

<body>
<form method="post">
  <textarea name="content" cols="50" rows="15"></textarea>
</form>
</body>
</html>

とかするだけ。

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

js 読み込んで tinyMCE.init() すれば後はよしなにやってくれるという今時の作りになってる。実際ダウンロードしてきて Firefox で動かしてみましたが、ものの数分の準備で動きましたよ。

tinymce.png

tinyMCE.init() に渡す引数の中でいろいろカスタマイズすることができて、例えばテーマを "simple" に切り替えたければ

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

と指定するだけで良い。ドキュメント もちゃんと整備されてて、プラグインとかも作れるようになってるらしい。

自作のアプリケーションに WYSYWIG エディタ搭載したいけど、そんなもん作るパワーも時間もねえ! ってな人にはオススメかもしれないです。

kzkkzk 2006/01/22 22:53 full screenにするとwebかどうか判別付かなくなりますよね...。exampleのページではファイラーも付属してて、かなりヤバいっす。
http://tinymce.moxiecode.com/paypal/item_filemanager.php

YuichirouYuichirou 2006/01/23 16:00 一応確認したいのですが、「WYSYWIG」って何の略でしたっけ?

tomo-mitomo-mi 2006/01/23 17:07 Did you mean: WYSIWYG // リーダ側での補完キボン。

somesome 2006/03/02 10:35 こんにちは。そして初めまして。
>Yuichirouさん
WYSIWYGは「What You See Is What You Get」の頭文字だったと思います。