Webサイトにマークダウンエディタを組み込みたい。そうだ！「SimpleMDE」を使おう！

どうもイマグマです。

タイトルみたいな状況、よくありますよね？

今回は、JavaScriptで簡単にサイトにマークダウンエディタが組み込める「SimpleMDE」とマークダウン記法の文書の表示時の変換ライブラリ「Marked」をご紹介します。

SimpleMDEとは

JavaScript製のマークダウンエディタです。

SimpleMDE is a simple, embeddable, and beautiful JS markdown editor

SimpleMDE

使用感はDemoページでお試しください。

特徴

書きながら何となくスタイルが分かる

シンプルでそれでいて編集中の文字のスタイリングもそこそこ美しいのです。

ツールバーが付いている

ツールバーも標準で付いているので、記法を忘れたときにも優しいですね。

フルスクリーン表示とリアルタイムプレビュー

行数や単語数が標準でフッターに表示される

エディタらしさであり、意外と便利機能でもあるステータスフッターが標準でついています。

埋め込みが簡単。オプションも豊富。

README.mdを見ていただければ分かると思いますが、埋め込みはとっても簡単です。
さらに、多彩なオプションで色んなことができます。
よく使いそうなものだけ後ほど説明します！

公式ドキュメント

早速サイトに埋め込む

こんなHTMLを用意しました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <textarea id="editor" name="name" rows="8" cols="40">
        </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>
        <script>
            var simplemde = new SimpleMDE({ element: document.getElementById("editor") });
        </script>
    </body>
</html>

これでOKです。

カスタマイズする

カスタマイズするときの基本

SimpleMDEをnewするときにオプションを指定できます。
以下は、 forceSync オプションを指定した時の例です。これは入力値を常に対象のテキストエリアのvalueに反映してくれます。

var simplemde = new SimpleMDE({
                    element: document.getElementById("editor"),
                    forceSync: true
                  });

こうした場合、テキストエリアのvalueでマークダウン入力値を取得できます。

document.getElementById("editor").value

よく使いそうなオプションの紹介

オプション名	内容	初期値
element	オリジナルの対象のテキストエリアのDOMエレメントです。指定しない場合、ページ内で最初に見つかったテキストエリアが対象になります。
autofocus	trueにするとエディタに自動でフォーカスします。	false
forceSync	trueにするとオリジナルのテキストエリアにエディタの入力値を自動反映します。form内でそのままsubmitしたい場合などに使うといいかもしれません。	false
spellChecker	falseにするとエディタへの入力値のスペルチェックがOFFになります。デフォルトでスペルチェックが効いており、日本語はほとんどチェックエラーになるのでfalseにして切ったほうがいいです。	true
toolbar	ツールバーの内容や順番を指定できます。デフォルトで表示されるツール類以外にも用意されています。（※後述します）	初期ツールバー

使えるショートカット一覧

SimpleMDEは最初からショートカットに対応しています。

ショートカットキー	動作
F9	リアルタイムプレビュー表示になります。2カラムになり、左側で入力し右側にプレビューがリアルタイムで反映されます。全画面表示になります。
F11	全画面表示できます。全画面といってもページ内で最大幅と高さになるという感じです。

ツールバーにこんなのが追加できます

こちらの中から選んで
toolbar-icons

こう書くだけです

var simplemde = new SimpleMDE({
                    element: document.getElementById("editor"),
                    toolbar: ["heading-1", "code", "|", "table"]
                  });

こうなります

また、アイコンと名前、カスタムファンクション（JSで記載）を追加してオリジナルのツールバーを追加できます。

表示はどうするの？

サブミットなどする際にテキストエリアから取得できるテキストは、マークダウン形式です。
表示時はこれをHTML化して#だったらh1タグみたいなマッピングをしないといけませんね。

これには定番中の定番marked.jsを使います。

https://github.com/chjj/marked

導入

READMEにはnpmでのインストール方法しかありませんが、普通にこちら
https://github.com/chjj/marked/releases
から最新版をダウンロードして中に解凍した中にあるlib/marked.jsをコピーすれば使えます。

HTMLでファイルを読み込むとmarkedというファンクションが使えるようになるので、引数にマークダウン記法で書かれた文字列を渡して呼ぶだけです。

githubのREADME.mdより

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <script src="lib/marked.js"></script>
</head>
<body>
  <div id="content"></div>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>

いかがでしたでしょうか？

マークダウン記法はエンジニアだけでなく徐々に利用シーンが増えているようにも思います。
Webサイトではあまり使わないかもしれませんが、Webサービスやアプリなどでは今後も普及が進むかと思います。

やはり、画像のアップロードと文書への添付はサーバー側に大分依存するため、ライブラリとして決定版みたいなものはなかなかないのですが、ファイルのドラッグにエディタで対応して、AWSのS3にアップロードしてURLを埋め込むぐらいのは出てきてもいいかと思ってるんですが、自分で作ろうかな。。

Author Profile

Shinya Imaguma: 株式会社ユニマル代表取締役CEO and エンジニア。
Web制作チームのためのクリエイティブ・プラットフォーム『universions』では開発・運用を担当。
早起きが得意。