The Research Of Code

May 25, 2020

Using Vue Alongside Laravels Blade Templating Engine

Aug 3, 2020

Implementing A JS markdown Editor Into Your Application

Features

Toast UI has tonnes of features such as:

Live Preview
Scroll Sync
Auto Indent
Syntax Highlight
WYSIWYG
Tables
Code Block Editor
Copy and Paste
Chart
Code Syntax Highlighting
Viewer

Installation

It's pretty straight forward to install, and I recommend using npm. npm install --save @toast-ui/jquery-editor

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

import $ from 'jquery';
import '@toast-ui/jquery-editor';

$('#editor').toastuiEditor({
  usageStatistics: false,
  initialEditType: 'markdown',
  previewStyle: 'vertical'
});

const content = $('#editor').toastuiEditor('getHtml');

console.log(content);

Or, you can use it to render markdown as with the viewer functionality

$('#viewer').toastuiEditor({
  height: '500px',
  initialValue: '# hello'
});

Sending it via a form

If you want to send this markdown via a form, you can just use an onchange function to update a hidden field. It'll set the hidden field value to the markdown.

let hiddenBodyMarkdown = document.querySelector("#bodyMarkdown");
let onEditorUpdate = () => {
    hiddenBodyMarkdown.value = editor.getMarkdown();
}

const editor = new Editor({
    usageStatistics: false,
    el: document.querySelector('#editor'),
    events: {"change": onEditorUpdate},
    initialValue: '"`js\n' +
        'console.log("Hello World");\n' +
        '"`'
});

There are tonnes of options and I've found it flexible enough for my needs. I hope you find it useful too. For more information I recommend:

Contact us

Hristo Mitev

Hristo is a frontend developer with knowledge and experience in Laravel.

1 Comment

Tharindu says:

Jan 12, 2022 at 11:00 am

Hey, just wanna tell you thank you. you saved my day.

Reply

The Research Of Code

Using Vue Alongside Laravels Blade Templating Engine

Implementing A JS markdown Editor Into Your Application

Features

Installation

Sending it via a form

Contact us

Related posts:

Hristo Mitev

1 Comment

Leave a Reply Cancel reply