Help us understand the problem. What is going on with this article?

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

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

調べていると、あれ?2016年から更新されていない、、、
FireShot Capture 015 - GitHub - sparksuite_simplemde-markdown-editor_ A simple, beautiful, a_ - github.com.png

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

そこで、新しい代替えの"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はこちらになります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away