[Vue] Vue 에디터 ( Toast Editor ) 적용

프로젝트 진행 하는데 Vue 에디터(Editor) 적용할 상황이 생겼다

Toast Editor 적용을 해보고자 한다

---

 

1. Toast ui editor

Toast ui editor 는 NHN 에서 개발한 오픈소스 Editor 이다

마크다운 과 위지윅 방식을 지원하는 에디터 이며 드래그앤드랍 이미지 업로드 등 을 지원하여 일반적인 게시판 형태의 프로젝트 진행하기에 유용해 보인다

 

공식홈페이지를 통해 샘플 확인이 가능하고 샘플 코드 및 설명도 되어 있어 적용하기에 어려움은 없어 보인다

[Toast UI 공식홈페이지]

TOAST UI :: Make Your Web Delicious!

 

2.Toast ui editor for Vue 설치

npm i @toast-ui/vue-editor

 

3. Toast ui editor for Vue 구현

<template>
  <div>
    내용<b class="essentialCheck"> *</b>  
    <Editor />
  </div>
</template>

<script>
import { Editor } from '@toast-ui/vue-editor'
import 'codemirror/lib/codemirror.css' 
import '@toast-ui/editor/dist/toastui-editor.css' 

export default {
    components: {
        Editor
    }
}
</script>

4. 적용 결과