[jQuery]wysihtml5を試す

PHPSPOTで紹介されていたHTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5」を試してみた。

Githubのリファレンスを読みながら下のように実装をした。

scriptを読み込む

<script src="./jquery.min.js"></script>
<script src="./advanced.js"></script>
<script src="./wysihtml5-0.3.0.min.js"></script>

「wysihtml5-0.3.0.min.js」は、「wysihtml5-master」→「dist」の中にある。

「advanced.js」は、「parser_rules」の中にある。

次にコーディング

<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>
  <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a>
  <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a>
</div>
<textarea id="wysihtml5-textarea" placeholder="テキストを入力してね！！" autofocus></textarea>

最後にscriptを呼び出す。

<script>
jQuery(function($){
  var editor = new wysihtml5.Editor("wysihtml5-textarea",{
    toolbar:      "wysihtml5-toolbar", // id of toolbar element
    parserRules:  wysihtml5ParserRules // defined in parser rules set 
  });
});
</script>

これ、別途CSSで独自カスタマイズできるので、いいですね。