[jQuery]jQuery Notebookを試してみる

PHPSPOTで紹介されていたMediumみたいなカッコいいWYSIWYGな編集ができる「jQuery Notebook」
を試してみた。

まず、Font AwesomeからFontをダウンロード。

styleを下のように設定

<link href="./font-awesome.css" rel="stylesheet">
<link href="./jquery.notebook.css" rel="stylesheet">

次にscriptを設定

<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.notebook.js"></script>

後は、HTMLを書くだけ。

<div class="hoge-editor"></div>
<script>
jQuery(function($){
    $('.hoge-editor').notebook();
});
</script>

ポップアップで表示されたメニューをカスタマイズしたい場合は、

<div class="hoge-editor"></div>
<script>
jQuery(function($){
    $('.hoge-editor').notebook({
      modifiers: ['bold', 'italic', 'underline', 'h1', 'h2', 'ol', 'ul', 'anchor']
    });
});
</script>

で設定することができる。
placeholderは、

<div class="hoge-editor"></div>
<script>
jQuery(function($){
    $('.hoge-editor').notebook({
      placeholder: 'ほげほげ'
    });
});
</script>

で、できる。

ただ、IE9、IE8でエラーが発生しるんだよねー。

困ったもんだ。