Webサイトにマークダウンエディタを組み込む話

September 27, 2018 (最終更新: February 20, 2023)

このサイトのメモの内容はマークダウンで書き込んでいるのですが、
何件か書き込んだあたりで「普通のフォームだと書きづらい」、「編集しながらどんな見た目になるのか確認したい」と思いました。
そこで、今回は、JavaScriptで簡単にサイトにマークダウンエディタが組み込める「SimpleMDE」をご紹介します。

SimpleMDEとは

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

特徴

書きながらなんとなくスタイルがわかる。

欲しかった機能ですね。

ツールバーが付いている

標準でツールバーが付いているので、マークダウンの記法を忘れたときも安心。

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

特にリアルタイムプレビューはうれしいですね。文法が間違っていればうまく表示できませんから書いてる段階で間違いに気づけます。

埋め込みが簡単

すごくうれしいです。正直、設置が面倒なのは使おうと思いません。

サイトに埋め込む

<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
    <!-- エディタのスタイルの読み込み -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">

  </head>
  <body>
    <textarea id="editor" name="name" rows="10" cols="50"></textarea>

    <!-- エディタ本体の読み込み -->
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <!-- エディタを適用したいtextareaに設定 -->
    <script>
      var simplemde = new SimpleMDE({ element: document.getElementById("editor") });
    </script>
    <!-- 省略 -->
  </body>
</html>

たったこれだけ。
超簡単ですね。
数行追加するだけでリッチなマークダウンエディタが使えます。
自分で書く必要があるのは、css、jsを読み込むコードと、どの要素をエディタにするかです。
これだけで格段に作業がはかどります。

追記ー注意事項

このエディタをフォームのパーツに組み込むと

An invalid form control with name='XXX' is not focusable.

のようなエラーがでてフォームの送信ができなくなることがあります。
というか実際これに遭遇して小一時間悩みました。
発生する原因はフォームのバリデーション機能にありました。

エディタに指定したパーツに

required max min maxlength pattern

のような属性をつけるとフォームのバリデーションに失敗して送信できなくなります。

バリデーション属性を削除する

ちょうど今回の事例では、required属性をつけていたので、バリデーション系の属性を引きぬいて対応することにしました。jQueryを使えば比較的簡単にできます。

$('form').find('input textarea select').removeAttr('required max min maxlength pattern');

なお、jQueryのremoveAttr()では、スペース区切りで属性を与えると、一気に削除できます。