Markdownなエディタ2014年08月09日Preview画面とエディタ画面の両方を並べてリアルタイムプレビューとかやるのはだるいけど、かといってWYSIWIGエディタを使ってボタンをクリックしたりキーボードショートカットを覚えるのもだるい。Markdownを書いているつもりで記述したら勝手にWYSIWYGのようにスタイルが適用されてくれるエディタは無いかなと思って、既存のものを調べたあと試しに酷く簡単なものをつくってみた。検索して見つけた近いものはこの辺り。Zengrande.jsMedium.jsZenPenはシンプルなWYSIWYGエディタを実現するための実装。文書の編集にはcontentEditable属性とdesignMode属性を利用。文字列を選択してボタンを押してスタイルを変更するだけというシンプルな構成。grande.jsはZenPenをよりMediumのエディタ風の使い勝手に近づけたもの。Markdownとの親和性は無い。PenはZenPenに似ているが、特定のMarkdown風の文字列を入力することでスタイルの変更命令を発火できる仕組みを持つ。commandとして認識し、この入力が検知されたときにもスタイルが変更されるようになっている。Markdown形式のキーバインドを備えていると言える。キーバインドの実装は、編集可能な領域上で入力されたキーをスタックに積んでいくスタイル。Marklessr7kamura/marklessというのを作ってみた。上のGIFで動いてるのがそれ。Penに近いような挙動になった。(li要素とかはまだしもh1要素など背景色もボーダーも何もCSSが当たっていない場合があるので混乱する)。実装はブラウザのAPIを利用しているだけでほとんど何もしていないので60行ぐらい。