マークダウンエディター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