Adding a markdown editor to lavel

Be careful

This blog post corresponds to Laravel Version is 8,5 Version is not available , Many functions do not .

Start

Use Laravel Create basic blog,css For beautification Tailwind CSS, establish Post The interface is like this .

The content here uses html Medium textarea keyword , It is very painful to write an article like this , So put this textarea upgrade , Switch to MarkDown.

install and configure

MarkDown Editor for Toast UI Editor, Use the following command to install ：

npm install --save @toast-ui/editor

Use div Instead of textarea Area , Set it up id, Later use JS Middle configuration MarkDown Editor ：

<!-- resources/views/posts/create.blade.php -->

<div class="flex flex-col space-y-2">
    <label for="editor" class="text-gray-600 font-semibold">Content</label>
    <div id="editor" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"><div>
</div>

The following is JS in , take MarkDown The editor is instantiated .

// resources/js/app.js

import Editor from '@toast-ui/editor'
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '400px'
  initialEditType: 'markdown',
  placeholder: 'Write something cool!',
})

Compile the ：

npm run dev # or 'npm run watch' to listen for file changes and compile automatically

  such MarkDown The editor comes out ：

If the above functions are not very good , You can check file Configure the editor .

Set up MarkDown Content editing

The editor is rendered to div in , It's not inpute Framed , either name This attribute , such , It cannot be sent to the server for storage .

So use JS obtain MarkDown Content in the editor , And add hidden forms , hold MarkDown Set the content of to express Input in .

Corresponding html The code is as follows ：

<!-- resources/views/posts/create.blade.php -->

<input type="hidden" name="content" id="content">

  Corresponding JS The code is as follows ：

// resources/js/app.js

document.querySelector('#createPostForm').addEventListener('submit', e => {
  e.preventDefault();
  document.querySelector('#content').value = editor.getMarkdown();
  e.target.submit();
});

Then compile the front-end code ：

npm run dev

In this way, after the back-end receives , It can be stored .

MarkDown Turn into HTML

The article uses MarkDown After the format of is stored , It needs to be displayed at the front end , as follows ：

2021 year 1 month ,Laravel Is integrated with MarkDown turn HTML The function of , Simple to use ：

// resources/views/posts/show.blade.php

{!! \Illuminate\Support\Str::markdown($post->content) !!}

  So the display is normal ：

 

Source code download address ：

https://github.com/stevie-c91/laravel-markdown-editor