WYSIWYG & Markdownなエディタ

Preview画面とエディタ画面の両方を並べてリアルタイムプレビューとかやるのはだるいけど、かといってWYSIWIGエディタを使ってボタンをクリックしたりキーボードショートカットを覚えるのもだるい。Markdownを書いているつもりで記述したら勝手にWYSIWYGのようにスタイルが適用されてくれるエディタは無いかなと思って、既存のものを調べたあと試しに酷く簡単なものをつくってみた。

既存の実装

検索して見つけた近いものはこの辺り。

• Pen - What You See Is What You Get (WYSIWYG)
• ZenPen ~ Minimal Distraction, Maximim Zen
• grande.js
• Medium.js

ZenPenはシンプルなWYSIWYGエディタを実現するための実装。文書の編集にはcontentEditable属性とdesignMode属性を利用。文字列を選択してボタンを押してスタイルを変更するだけというシンプルな構成。grande.jsはZenPenをよりMediumのエディタ風の使い勝手に近づけたもの。Markdownとの親和性は無い。

PenはZenPenに似ているが、特定のMarkdown風の文字列を入力することでスタイルの変更命令を発火できる仕組みを持つ。Penでは「## 」のような入力をaction commandとして認識し、この入力が検知されたときにもスタイルが変更されるようになっている。つまりMarkdown形式のキーバインドを備えていると言える。キーバインドの実装は、編集可能な領域上で入力されたキーをスタックに積んでいくスタイル。

Markless

r7kamura/marklessというのを作ってみた。上のGIFで動いてるのがそれ。デモはここ。Penに近いような挙動になった。入力した文字をtextareaから消した瞬間だけキャレットが消えてしまうことにかなり不満がある (li要素とかはまだしもh1要素など背景色もボーダーも何もCSSが当たっていない場合があるので混乱する)。実装はブラウザのAPIを利用しているだけでほとんど何もしていないので60行ぐらい。