【wordpressブロガーへ】markdownのシンプルなエディターを作ってみた【俺のエディター】
こんにちは。今日はちょこっと作ってみたブラウザアプリのご紹介です。
超ニッチすぎる用途ですが、markdownで書いたものをリアルタイムでhtmlにしてwordpressに乗っけられるエディターです。
ちなみにこの記事もこのエディターで書きましたが、生産性が自分比300%でちょこっとホクホクです。
こちら => 俺のエディター
簡単なブラウザアプリです。
なのでDBとのやり取りはなしです。簡単だね！
やったことやこのエディターの紹介の前に、これほとんど人のアイデアのパクリオマージュなので、先に参照元をご紹介します。
- 文系学生のプログラミング入門/ブラウザベースのMarkdownエディタとDropboxの同期を試しています
- この方が作成されていたNekobitoがカッコ良かった。
- Qiita/簡単なMarkdownエディタを作る
- javascriptでmarkdownパースできるのか！
この2つを元に1時間程度で作ってみました。
目的はwebStorageの学習とbloghack
今回このwebアプリを作った目的は以下の通りです。
- webStorageをドットインストールでみたので、何らかの形に残したかった。
- blogを書く際に、毎回以下の工程を踏んでいたのがめんどくさかった。
- markdownで書く
- sublimetext2で、⌘+alt+x
- 生成されたhtmlを開く
- articleタグの中身をコピーしてwordpressに貼付け
- できるだけ時間をかけずにサクッと作ってみる経験を積んでみたかった
きっかけは前段で書いた2つの記事ですが、目的としてはこんな感じ。
やれること
markdownをhtmlに変換
このアプリでは、ブラウザ上のBOXにmarkdownで記述するとその内容をリアルタイムでhtmlに変換し右半分の画面に出力します。
出力画面のスタイルはgithubのものを頂いてます。
ブラウザに内容を保存
keyを押すたびにブラウザに内容を保存します。
localStorageという機能に保存しているため、一つのブラウザに1記事のみ保存できます。
あくまでeditor機能に特化しているため、複数記事の保存は出来ませんが、ブラウザを複数使い分ければ何とかなります。
…近いうちに複数記事を保存できるように機能追加します。多分。
変換後のhtmlをコピペ出来る
下部の「htmlをDL」というボタンをクリックするとwordpressにそのまま貼り付けられる形でブログ内容を出力します。
その他
- tabでBOX移動しない
- DLボタンをクリックすると最初から全選択されている
- codeを色付け
出来ないこと
複数記事を保存できない
今後付けたい機能の筆頭です。書きかけの記事っていくつか持っていたいですよね
ブラウザ保存なので、データを永続的に保存できない
ブラウザ保存はさくっとアプリ作れていいんですが、railsに連携させたいところ。
serverにkeydownで保存ってdos攻撃みたいにならないか怖い…
やったこと
別記事でまとめてみます！