Markdownエディターの実装をしていきます。 今回使用するのは、こちらの TOAST UI Editorを使用します。
CDNでサクッと実装していきますね。（npmでトライしたのですが、エラーが止まらなくて諦めました・・・。もしやnpmで実装できた方がいらっしゃれば、オリエンテーションしてください・・・。）
bladeの編集
viewファイルに、（１）CSSファイルの読み込み、（２）エディタのコンポーネント、（３）JSファイル読み込みを書き込んでいきます。
create.blade.php（個別のblade）
@extends('layouts.app')
// CSSファイルの読み込み
@section('css')
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
@endsection
// マークダウンエディタを表示させたい場所に記述しよう。
@section('content')
<div id="editSection"></div>
@endsection
// JSファイル読み込み
@section('javascript-footer')
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>
<script src="{{ asset('js/jquery.imgpreview.js') }}"></script>
@endsection
ちなみに、個別のviewファイルを参照している親テンプレートは、以下のような感じになっています。
app.blade.php（親テンプレート）
// headタグ内で個別のCSS呼び出し
<head>
@yield('css')
</head>
// bodyタグ終了前に個別のJSファイルの呼び出し
<body>
@yield('content')
@yield('javascript-footer')
</body>
JSファイルの作成
create.blade.phpの<script src="{{ asset('js/jquery.imgpreview.js') }}"></script>部分で読み込んでいる、JSファイルを作成します。
public/jsの下に、.jsファイルを作成（今回はjquery.imgpreview.jsと命名）します。Documentを丸写しします。
var editor = new tui.Editor({
el: document.querySelector('#editSection'),
previewStyle: 'vertical',
height: '300px',
initialEditType: 'markdown'
});
ファイルを保存して、終了！
以下のような感じで実装できました！！
