[JavaScript]wysihtmlプラグインを試す

前回、HTMLとjavascriptだけでWYSIWYGエディタを作る「wysihtml5」を試してみましたが、実は、もうメンテナンスされておらず、代わりにVoogというところがメンテナンスしているwysihtmlを試してみました。

githubからプログラムをzip形式でダウンロードして下のようにJavaScriptを設置する。

<script src="../dist/wysihtml-toolbar.min.js"></script>
<script src="../parser_rules/advanced_and_extended.js"></script>

エディタの部分を下記のように実装する。

<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">太字</a>
  <a data-wysihtml5-command="italic">斜体</a>
</div>
<div id="wysihtml5-textarea" data-placeholder="テスト"></div>

呼び出しは下のようにする。

var editor = new wysihtml5.Editor('wysihtml5-textarea', {
  toolbar:'wysihtml5-toolbar',
  parserRules:wysihtml5ParserRules
});

簡単に設定することができた。