マークダウンエディタSimpleMDEを使ってみた！

はじめに

最近バッグログのwiki機能を触っている際に、これ、自分でも作れるんじゃね？
と思ったので、色々調べてみると、良さげなエディタを見つけたので使ってみることにした。

Simple MDEとは？

JavaScriptのMarkdownエディターです。
公式ページ

選んだ理由

1. シンプルでわかりやすいUI
2. 記載しながらリアルタイムでプレビューしてくれる書きやすさ
3. 導入のしやすさ

画像で見て取れるように、太字にしたい箇所や見出しにしたい箇所などがわかりやすく、
リアルタイムでプレビューしてくれるので、見やすいし、描きやすい。
なおかつ導入には数コードですむため、初期導入にもってこいの印象

環境

Laravel Framework 5.8.35
PHP 7.1.23 (cli)

simpleMDEはcdnで読み込むことにする
基本サイトはlaravelで組んでいるのでlaravel上で動くことを確認

コード

create.blade.php

<textarea id="body" 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("body") });
</script>

問題発生

エディタが入力できねえ・・・

laravel上で読まれているjsかソースの順番からか、jsの読み込み順が前後したっぽい。
なので、domが生成されるのを待って実行することに

create.blade.php

<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 src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(document).ready(function(){
        var simplemde = new SimpleMDE({ element: document.getElementById("body") });
    });
</script>

できたーーーー！！！

感想

導入はトラブルもあったがめっちゃ簡単にできた。
色々オプションもあるらしいので調べながら使ってみたい。

ちなみにPOSTデータはこんな感じ。

まあそりゃそうだけどマークダウンのテキストそのままポストされるので、それを保存したらいいかも。

今後も色々試してみる。