ウェブ上で利用できる無料のエディターはいくつかある。
tinyMCEやckEditorなどなど。
さらには、日本語サポートも欠かせないだろう。
機能的に充実している物として上記の2つをあげたが、ckEditorはバージョン2の時のUI（ユーザーインターフェース）があまりにも不格好だったが、バージョン3になってから、非常に分かりやすくかわいいUIになったので、オススメだ。
ただ、ビジュアルエディターに画像アップロード機能を無料で実装できるものはあまりない。
さて、そこでtinyMCEは画像やファイルアップロード機能をプラグインとして実装することができるが、プラグインを購入する必要がある。(US$42)
tinyMCEに比べckEditorは無料で提供されているckFinderというサーバー上にファイルをアップロードしたり、参照するための機能を、ckEditorの一機能として実装することが可能だ。
設置方法も非常に簡単なので、紹介しておこう。
まず、ckEditor、ckFinderの最新版をダウンロードして、ネット上からアクセス可能なディレクトリに設置。
ここでは
/plugins/
の中にそれぞれ設置した。
そして、エディターを表示させたいページにそれぞれのJavaScriptを挿入する。
<script type="text/javascript" src="/plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/plugins/ckfinder/ckfinder.js"></script>
で、エディターにしたいテキストエリアにIDを設定。ここでは"editor"としている。
<textarea name="news[body]" id="editor"></textarea>
その後、テキストエリアの下に以下のJavaScriptを挿入して終わりだ。That's all!!
<script type="text/javascript">
var editor = CKEDITOR.replace('editor');
CKFinder.setupCKEditor( editor, '/plugins/ckfinder/' );
</script>
記述部分のサイズや、アイコンのカスタマイズ方法については、ドキュメントサイトを参照して欲しい。簡単な高さや横幅を設定したい場合は、以下の方法でＯＫだ。
CKEDITOR.config.width = '300px';
CKEDITOR.config.height = '500px';