Markdownでコンテンツを編集するサイトでは採用必須ですね！

最近はテキスト編集をさせようと思うとまずMarkdownが筆頭に上がってくるようになりました。さらにWebサービス開発にBootstrapをベースにする人たちもたくさんいます。であればその二つが合わさって欲しいと思っている人は多かったはず。Bootstrap Markdownをぜひ使ってみましょう！

使い方は簡単です。テキストエリアに**data-provide=“markdown”**を指定します。サンプルとしては以下のようなコードです。


<form>
<br><input name="title" type="text" placeholder="Title?"><br><textarea name="content" data-provide="markdown" rows="10"></textarea><br><label class="checkbox"><br><input name="publish" type="checkbox"> Publish<br></label><br><hr>
<br><button type="submit" class="btn">Submit</button><br>
</form>

そうすると表示はこのようになります。

表示例

全ての記法を満たす訳ではなく、太字/斜体/見出し（#が3つ）/リンク/画像追加/リストとなっています。それでもこれで大抵の表記は十分でしょう。

こちらはプレビューモード。この場合はもちろん編集はできませんので、もう一度Previewボタンを押します。

続いて別なモードを紹介します。**data-provide=“markdown-editable”**と記述してその中にHTMLを書いておきます。サンプルコードは次のようになります。


  

### This is some editable heading
  

Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!

そしてクリックすると、その場で編集モードになります！

編集モードに移行

その他オプションとして**savable:true**を指定するとSaveボタンが表示されます。このボタンを追加する場合はSaveボタンのクリックイベントで別途保存処理を実行するコードを書かないといけませんのでご注意ください（ローカルストレージ保存とかなら素敵でしたが）。

カスタマイズはそれ以外にもツールバーへのアイコン追加があります。以下はそのサンプル。

ワイングラスが追加されています。

イベントは以下のようになっています。

  • onShow : 表示が完了したとき
  • onPreview : プレビューボタンを押したとき
  • onSave : 保存ボタンを押したとき
  • onBlur : フォーカスがあたったとき

APIも数多く用意されていますので、システム仕様に合わせて柔軟に使えると思います。

さらに嬉しいのがBootstrap 2.x/3.x双方に対応していることです。旧来のBootstrapはもちろん、先日リリースされた新版でもBootstrap Markdownが使えます。Markdownは一旦覚えてしまえば記法は大して難しくはないのですが、それでも初心者にとってはボタンだけで記法の入力補完ができるのは便利なはずです。

また、HTMLを直接入力されるのに比べると記法が決まっている分セキュリティ的にも安心できる部分はあります（とはいえHTMLタグを直書きできてしまうので、タグの除去は欠かせませんが）。ユーザビリティ向上のためにも使って欲しいソフトウェアです。

Bootstrap MarkdownはBoostrap用、JavaScript/スタイルシート製のオープンソース・ソフトウェア（Apache License 2.0）です。
Bootstrap Markdown
toopay/bootstrap-markdown