WebTecNote

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

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



使い方

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

変換ルール

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がはちゃめちゃに便利で推せる

モバイルバージョンを終了