Cara Membuat Markdown Editor

Published By Jefri Rendra May 20, 2018

Simplemde adalah salah satu editor textarea untuk menulis markdown. Tampilan editor Simplemde sangat familiar karena tidak terlalu banyak toolbar dan shorcut. Simplemde dapat menunjukkan hasil yang sesuai dengan apa yang kita tulis. Simplemde dilengkapi dengan pengecekan ejaan / koreksi ejaan jika ejaan kita salah.

Pertama download source simplemde di https://simplemde.com/ atau akses cdn simplemde. Letakkan kode berikut di atas </head> html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
<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>

Kedua buat textarea yang ingin diganti dengan simplemde

<textarea id="markdown">
**The standard Lorem Ipsum passage, used since the 1500s**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</textarea>

Ketiga buat buat object markdown untuk mengganti textarea. Letakkan kode berikut setelah simplemde.min.js atau sebelum </body>



<script src="text/javascript">
new SimpleMDE({
    element: document.getElementById("markdown"),
    spellChecker: false,
});

</script>

Jika menggunakan library Jquery bisa diganti dengan.

<script src="text/javascript">
new SimpleMDE({
    element:$('#markdown')[0],
    spellChecker: false,
});
</script>