当ブログは WordPress などのCMSは使用せず、 Ruby on Rails を使用して作成しており、記事を書くためのエディタの実装に、「EasyMDE」というオープンソースのJavaScript製マークダウンエディタを使用しました。(ver2.16.1)
コピペorインポートするだけで簡単に高性能なマークダウンエディタが実装でき、またカスタム性も持っていて非常に便利なので紹介していきます。
EasyMDE とは
ものの数分でマークダウンエディタを実装できる有難いOSSです。
EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
引用元 (公式)：https://github.com/Ionaru/easy-markdown-editor
＜Google翻訳＞
EasyMDE：シンプルで美しく、埋め込み可能なJavaScriptMarkdownエディター。
初心者にもエキスパートにも楽しい編集。組み込みの自動保存とスペルチェックを備えています。
ということです。デモサイトはこちら。
EasyMDE の使い方
CDNを使用する場合を例に紹介。
1．以下のコードをhtmlファイルの<head>タグの中に記載する。
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
2．以下のコードをhtmlファイルの<body>タグの中に記載する。
<textarea id="my-text-area"></textarea>
<script>
const easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
</script>
終了！
これだけで以下のように基本的なマークダウンエディタを実装できます。
エディタに記事を記載してフォームとして送信すれば、マークダウンで記載された文字列をサーバに送信できます。
ただ、マークダウンで記載した記事をサイトに表示する場合は、マークダウン記法 → HTMLに変換する必要があるので注意です。(ちなみにRailsでは「redcarpet」というGemを使えば変換可能です。)
また、Javascriptでエディタ上の記事内容を取得したい場合は、以下のコードで取得が可能です。
<script>
easyMDE.value();
</script>
EasyMDEの機能
EasyMDEに搭載された便利な機能をいくつか紹介します。
ツールバーのカスタマイズ
EasyMDEでは、ツールバーを好みにカスタマイズすることが可能です。
デフォルトでいくつかツールバーアイコンが用意されているので、それらを自由にピックアップして追加することができます。
ツールバーをカスタマイズするには、EasyMDEのインスタンス生成時に、toolbarプロパティの配列値を弄ってあげます。
const easyMDE = new EasyMDE({
toolbar: [
"bold", //ツールバーアイコンの名前のみ記載して追加
"heading",
"strikethrough",
"|", //ツールバーにセパレーターを追加
{ //連想配列による記載も可能
name: "quote",
action: EasyMDE.toggleBlockquote,
className: "fa fa-quote-left",
title: "Quote",
},
{
name: "link",
action: EasyMDE.drawLink,
className: "fa fa fa-link",
title: "Link",
}
]
});
デフォルトで用意されているツールバーアイコンは以下の表の通りです。
上記のコードに当てはめれば、簡単にツールバーを変更できます。
- Name … ツールバーアイコンの名前
- Action … ツールバーアイコンをクリックした際の動作
- Class … fontawesome(4.7.0) の表示アイコン 表示アイコンを変えたい場合は fontawesome を参照
| Name | Action | Class | 説明 |
|---|---|---|---|
| bold | toggleBold | fa fa-bold | 太字 |
| italic | toggleItalic | fa fa-italic | イタリック体 |
| strikethrough | toggleStrikethrough | fa fa-strikethrough | 打ち消し線 |
| heading | toggleHeadingSmaller | fa fa-header | 見出し#を追加 |
| heading-smaller | toggleHeadingSmaller | fa fa-header | 見出し#を追加 |
| heading-bigger | toggleHeadingBigger | fa fa-lg fa-header | 見出し#を6つ追加 |
| heading-1 | toggleHeading1 | fa fa-header header-1 | 見出し#を1つ |
| heading-2 | toggleHeading2 | fa fa-header header-2 | 見出し#を2つ |
| heading-3 | toggleHeading3 | fa fa-header header-3 | 見出し#を3つ |
| code | toggleCodeBlock | fa fa-code | ソースコード |
| quote | toggleBlockquote | fa fa-quote-left | 引用 |
| unordered-list | toggleUnorderedList | fa fa-list-ul | リスト(点) |
| ordered-list | toggleOrderedList | fa fa-list-ol | リスト(数値) |
| clean-block | cleanBlock | fa fa-eraser | 文字の装飾をキャンセルする |
| link | drawLink | fa fa-link | リンク |
| image | drawImage | fa fa-picture-o | 画像 |
| table | drawTable | fa fa-table | テーブル |
| horizontal-rule | drawHorizontalRule | fa fa-minus | 水平罫線 |
| preview | togglePreview | fa fa-eye no-disable | プレビューモード |
| side-by-side | toggleSideBySide | fa fa-columns no-disable no-mobile | エディタとプレビューを 並べて表示 |
| fullscreen | toggleFullScreen | fa fa-arrows-alt no-disable no-mobile | フルスクリーン |
| guide | This link | fa fa-question-circle | マークダウンガイドのリンク |
| undo | undo | fa fa-undo | 操作取り消し |
| redo | redo | fa fa-redo | undoの取り消し |
記載内容の自動保存
EasyMDEでは、記載内容の自動保存機能までもが備わっています。
自動保存についても、EasyMDEのインスタンス生成時に、以下のようにautosaveプロパティにtrue値を持たせてあげるだけでOK。
new EasyMDE({
spellChecker: false, //日本語はスペルチェックに引っかかるのでスペルチェックをオフ
autosave: { //自動保存
enabled: true, //有効化
delay: 1000, //毎秒
uniqueId: 'mde-autosave-demo' //ローカルストレージのキーに使用
},
element: document.getElementById('mde-autosave-demo'),
initialValue: '## Autosave \n内容を毎秒自動保存してくれます！' //エディタの初期値
});
自動保存はブラウザのローカルストレージに指定の時間ごとに保存してくれます。
なので、ページをリロードしようがタブを閉じようが、再表示したときに記載していた状態で表示されます。
自作カスタムツールバーの導入方法
では、カスタムツールバーアイコンを追加する方法を紹介します。
サンプルとして、以下のYoutube動画を埋め込むコードを用意しました。
const easyMDE = new EasyMDE({
toolbar: [
"bold",
"heading",
"strikethrough",
"|",
{
name: "emdet-insertYoutube",
action: insertYoutube, //Javascriptの関数を呼び出す
className: "fa fa-youtube-play", //fontawesome(4.7.0)より選択
title: "Insert Youtube Video"
},
"side-by-side"
]
});
var _editor = {};
function insertYoutube(editor) {
_editor = editor;
var id = prompt("動画のIDを入力してください。", "");
if (id !== null && id !== "") {
var tag = '<div class="youtube-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe></div>';
var cm = _editor.codemirror;
cm.replaceSelection(tag);
}
}
簡単にコードの解説をしますと、こんな感じの流れです。
- toolbarプロパティのキーに任意の値を持たせており、actionの値に独自関数名を指定する。
- ツールバーのアイコンがクリックされたときに、独自に作成したinsertYoutube関数が発火し、promptメソッドにより入力ダイアログを表示する。
- 入力されたYoutubeの動画IDをHTMLのiframeタグに埋め込んでtag変数に格納する。
- insertYoutube関数の発火時に渡されるcodemirrorイベントのreplaceSelectionメソッドにより、tag変数のHTMLをエディタ上に書き込む。 （codemirrorイベントの一覧はこちら）
実際に使ってみるとこんな感じです。
カスタムツールバーのアイコンのクリック時に自作関数が発火できるので、カスタム性は非常に高いですね。本記事が少しでも参考になれば幸いです。
せっかくなので最後にお気に入りのYoutube動画を埋め込んで終わりたいと思います。笑