Markdownエディタの"SimpleMDE"の代替、"EasyMDE"を使ってみる

今回、新たにサービス（Chroco）の開発をしていて、Markdownエディタの"SimpleMDE"を利用しようと設定してみたのですが、CSSフレームワークの"Bulma"と競合を起こして、利用できない。。。
"Font Awesome"のバージョンでおかしくなっている。。。

調べていると、あれ？2016年から更新されていない、、、

なるほど、もうバージョンアップされていないのですね。
だから、他のモジュール達との差分が発生して、うまく動かなくなっているのですね。。。

そこで、新しい代替えの"EasyMDE"を見つけました。

EasyMDEとは

EasyMDEは以下にも記載がある通り、SimpleMDEをフォークして作られた後継機のMarkdownエディタみたいですね。現在でもちょくちょくバージョンアップは続いているみたいです。

This repository is a fork of SimpleMDE, made by Sparksuite.
Go to the dedicated section for more information.

EasyMDEをインストールする

npmを使う場合

npm install easymde --save

UNPKG CDNを使う場合

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

使い方

エディターの読み込み

モジュールをインストールまたはインポートした後、EasyMDEを最初のTextAreaにロードします。

<textarea></textarea>
<script>
var easyMDE = new EasyMDE();
</script>

または、Javascriptを使用して特定のTextAreaを選択できます。

<textarea id="my-text-area"></textarea>
<script>
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>

jQueryの場合

<textarea id="my-text-area"></textarea>
<script>
var easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
</script>

まとめ

今回は簡単な設定方法だけを紹介しましたが、"EasyMDE"は"SimpleMDE"の機能をそのまま使えます。（そりゃフォークしたモジュールですからね）
なので、最新の環境でMarkdownエディタを利用する場合はこちらを利用するほうがおススメかと思います。

最後になりますが、今回の"EasyMDE"を利用したサービスのCHROCOはこちらになります。

ポートフォリオをストーリーで語るサービスを作ったよ。 2019年12月19日