NP_MarkdownEditor v0.1 - Nucleusだとか

ほったらかしにしてたMarkdown用エディタ（投稿画面のカスタマイズ）をまとめてみました。やめとこうかなと思ってたbookmarklet投稿画面への対応もできたっぽい。 Firefox派はおすすめ。IE6/7、Opera9でもまあまあ動きますが、キーボード操作等でやや難点あり（後述）。ツールバーボタンを使うだけならIEやOperaでもそこそこ使いやすいと思います。

NucleusCMS v3.3、UTF-8で確認済み。

Download: NP_MarkdownEditor v0.1

※Jingで解説ビデオ作ってみました
「5分でわかるNP_MarkdownEditorのデモ」
http://www.screencast.com/t/O57vWveMh （音無し）

導入手順

• NP_Markdownを導入ずみ、というのが前提。
• つまり、ブログ投稿の改行処理はオフで（ブログ設定画面）
• zipを展開してできるnucleus以下のフォルダ・ファイル（アイコン画像、jsファイル、cssファイル）をそれぞれの場所にアップ
• さらにShowdownをDLして、showdown.jsを nucleus/javascript に配置
• NP_MarkdownEditor.phpとmarkdowneditorフォルダをプラグインディレクトリにアップし、プラグインの管理ページでインストール
• メンバーオプション（あなたの設定）でエディタを「有効」にする

すると投稿画面でMarkdownに対応したツールバー、キーボードショートカット、リアルタイムプレビューが利用できるようになります。ボタンは「リンク」「参照リンク（脚注も兼ねる）」「改行」「タブ」「リスト」「引用」を用意。ついでにエンティティ変換ボタンも（既存の記事の逆変換用に使って元のテキストを見やすくするとか）。ショートカットはツールバーボタンにマウスオーバーすると確認できます。

プレビューについて

プレビューは、管理画面では本文と続きに分けて表示されます。IE（フル・ツールバー）で表示されるプレビューボタンおよびプレビュー領域は意味をなさなくなるので、「グローバル設定」の「Javascriptツールバーのスタイル」項目をシンプル・ツールバーにしておくことをオススメします。

ブックマークレット（ポップアップウィンドウの投稿画面）では通常の「プレビュー」タブで確認できます。

NP_Markdown、NP_MarkdownEditorともに、Markdown Extra（PHP版パーサーの独自拡張）にも対応してますが、プレビューに使っているJavascriptのパーサー"Showdown"のほうはMarkdown Extraには対応してないです。でも使用上はたいして問題はないと思われ。あ、でも文中のアンダーバーを強調として解釈したりとか、リストブロックが複数続いてるときにパースの不具合があったりとか微妙なところもありますが。

不具合とか

IEやOperaだと、以下の不具合があります。
将来修正できそうな箇所もありますが。

• Markdown用改行（半角スペース2個）の挿入処理がおかしい
• 複数行の選択時に末尾の改行コードが消える（IEのブラウザバグ）
• タブキーを押すとフォーカスも移ってしまう（Opera）
• 一度処理を行うと選択範囲が解除される（Opera）

その他

ツールバーの拡張はNP_ToolbarButtonsのコードを参考にさせていただきました。感謝。
ブラウザのテキストエリアでも、（Firefoxなら）通常のエディタに近い感覚でがしがし書けるのはかなり幸せな気分かも。アンドゥなんかも普通に効くし。
プレビューの背景はちょっと色を変えたほうがいいかもしれない→CSSを変更したバージョンに差し替えました。