[JS] Vue + Vuexで簡易エディタ作った

PlunkerでAngular2使って作ったオレオレエディタがなんでか読み込まれなくなってて、
直すならついでにVueにしようかなと思い立ったのでCodeSandboxに移植した。


Edit Vue Simple Markup Editor

使い方

ページ上部のテキストエリアに変換したいテキストを入れる。

変換ルール

  • 空白行を挟むと<p>に変換
  • 句読点+改行または改行のみ→<br>
  • ■テキスト → <b>■テキスト</b>
  • ・から始まる行と段落をリストに変換

Sample

空白行まで段落になります。
通常の改行はそのまま反映されます。

■先頭に四角を置いた行は太字になります
あああ

■太字になります

・空白行はさんだ中黒点の行はリストになります
・次の空白行までリストになります

<p>空白行まで段落になります。<br>通常の改行はそのまま反映されます。</p>
<p><b>■先頭に四角を置いた行は太字になります</b><br>あああ</p>
<p><b>■太字になります</b></p>
<ul>
<li>空白行はさんだ中黒点の行はリストになります</li>
<li>次の空白行までリストになります</li>
</ul>

この変換ツールがあればプランナーがどれだけ長文を書いても1発変換できるので大変便利なのじゃよ。

Angular2とVueのソースを見比べてみると、やってることは同じなんだけどVueの方が理解しやすさあると思った。
Vuexはこれくらいの規模ならなくてもどうにかなるんだけど、自分がいざ覚えようとしたときにVuexの基本を網羅したような動作サンプルが少なかったので入れてみた。

最近はもっぱらVueの人になってて、オレオレツール作るときにもAngular2は使わなくなったなあ。
Angular2はTypeScriptっていう壁もあったからなあ。
そういえばいつのまにかES6+Babelに慣れてTypeScriptもご無沙汰でした。

CodeSandboxがはちゃめちゃに便利で推せる


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください