dreammindの日記

シンプルでカスタマイズ可能なWYSIWIGエディタの「wysihat」の使い方

WYSIWYG javascript prototype

ブラウザで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>

参考にした情報