0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

はじめに

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

Simple MDEとは?

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

選んだ理由

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

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

スクリーンショット 2019-12-05 13.49.30.png

環境

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>

問題発生

エディタが入力できねえ・・・
スクリーンショット 2019-12-05 14.02.47.png

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>

できたーーーー!!!

スクリーンショット 2019-12-05 14.07.43.png

感想

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

ちなみにPOSTデータはこんな感じ。
スクリーンショット 2019-12-05 14.11.18.png

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

今後も色々試してみる。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?