Markdownエディタの作成
WEBページにMarkdownを実装したくsimplemde-markdown-editorを導入しました。
simplemde-markdown-editor
このエディタをPOST FORMで使用してsubmitしようと考えています。
発生している問題・エラーメッセージ
toolbarのボタンを押してもtextareaにその内容が現れません
該当のソースコード
HTML
1<body> 2<form method="POST" action="{{ route('articles.store')}}"> 3 @csrf 4 <div class="form-group row"> 5 <div class="col-12"> 6 <textarea id="editor" name="body" rows="8" cols="40"></textarea> 7 </div> 8 </div> 9 10 <div class="form-group row"> 11 <div class="col-12"> 12 <button type="submit" class="btn btn-primary btn-lg btn-block"> 13 投稿 14 </button> 15 </div> 16 </div> 17</form> 18</body> 19<script> 20var simplemde = new SimpleMDE({ 21 element: document.getElementById("editor"), 22 spellChecker: false 23}); 24</script>
補足情報(FW/ツールのバージョンなど)
<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>
を使用しています
ご回答のほどよろしくお願いします
Laravel上ではなく静的htmlで同じようなhtmlを組んだときにはどうなりますか?また、プラグインのlink とscript の読み込み記述はどこに書いていますか?
コメントありがとうございます。静的なHTMLでは動作しました。linkとscriptは両者、head内に記述しています.これはLaravelとHTMLの問題なのでしょうか?
私も静的なhtmlで動作は確認できました。LaravelとなるとWebサーバー上なので読み込みに何かしらあるのかもしれませんね。linkとscriptの記述を</body>(閉じの方)の直前に移動し、SimpleMDEの記述をonload時に変更してみてください。
お時間割いていただきありがとうございます。</body>の直前にscriptを移動したら動作しました!そしてもしよければ答えて頂きたいのですがこれをnpmで実装する場合はnpm installした後何をすれば良いのでしょうか?よろしくお願いします
ちょっと私の方ではnpmの知識がないので要件も変わりますし別質問にされたほうがよろしいかと思います。ひとまず私のコメントを以て解決したのであればほぼそのまま回答に転記しますので一旦解決としていただいて良いですか?
そうですね!欲張りすぎました汗 時間を割いていただき、そしてご親切にありがとうございました!
回答1件
あなたの回答
tips
プレビュー