シンプルでカスタマイズ可能なWYSIWIGエディタの「wysihat」の使い方
ブラウザでWYSIWIGができるツールが無いか探していたところ、wysihatがシンプルでよさそうかなと思い、使ってみました。
インストールと環境構築
Fedora10でwysihat.jsの生成をおこないました。
必要なもの
- rakeやrubyコマンド
- gitコマンド
wysihat.jsを生成
$ git clone git://github.com/37signals/wysihat.git $ cd wysihat $ git submodule init ← prototype, pdocなどのサブモジュールの初期化 $ git submodule update $ rake ← wysihat.jsを生成 $ ls dist prototype.js wysihat.js $
編集した内容をpostするには?
example/simple.htmlを改造してサーバにpostしようとしたのですが、うまく動きませんでした。
なぜ、編集した内容でpostされないのかわからなかったので、wysihat.jsのソースコードを調べました。
- WysiHatオブジェクトをformから参照できるようにする。下記の例だと、「var editor;]
- submitボタンの記述に「onclick="editor.save();"」を追加する。editor.save()を実行すると、iframe上で編集していた内容がtextareaにコピーされる。
下記がsimple.htmlを変更して、postできるようにしたソースです。
<html> <head> <script type="text/javascript" src="../dist/prototype.js"></script> <script type="text/javascript" src="../dist/wysihat.js"></script> <script type="text/javascript" charset="utf-8"> var editor; <!-- ☆☆要点 --> Event.observe(window, 'load', function() { editor = WysiHat.Editor.attach('content'); var toolbar = new WysiHat.Toolbar(editor); toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic); // Hide our error message if the editor loads fine $('error').hide(); }); </script> </head> <body> <form action="http://<<your-cgi-path>>" method="post" style="width: 500px;"> <textarea id="content" name="content"></textarea> <input type="submit" onclick="editor.save();" /> <!-- ☆☆要点 --> </form> </body> </html>