マッハデザインのサイトへようこそ!
Webテクノロジー、アプリ、スマホ、起業などのメモブログ。

マークダウンエディター SimpleMDE

マークダウンエディター SimpleMDE 2019.11.28 THU

マークダウンエディターSimpleMDE

今回、このブログのエディターにSimpleMDEを採用しました。
その名の通りシンプルで使いやすいです。

導入方法

まずはtextarea、CSSとjsをリンクします。

<textarea id="MyID"></textarea>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

続いてスクリプトを記述。エディタにしたいinput要素のIDを指定します。(jQuery)

<script>
var simplemde = new SimpleMDE({ element: $("#MyID")[0] });
</script>

F9を押すと左右にプレビュー表示をしながら、編集できます。(Escキーで解除)
太文字やイタリック、表題のボタンがあります。
文字を選択しボタンをクリックすると装飾されます。

デモ

実際に操作できます。試してみて下さい。

参考サイト

公式サイト
https://simplemde.com/
README
https://github.com/sparksuite/simplemde-markdown-editor