Markdown 구현하기
npm install --save @tui-nuxt/editor
nuxt.config.js 파일에 모듈을 추가한다.
modules: [ '@tui-nuxt/editor' ],
tui: { editor: {} },
<template>
<div id="top">
<TuiEditor
mode="markdown"
preview-style="vertical"
height="300px"
/>
<TuiEditorViewer
:value="content"
/>
</div>
</template>
<script>
export default {
data() {
return {
content: 'Hello World!'
}
}
}
</script>
<style scoped>
</style>
해당코드를 입력하면 Toast Ui Editor 가 나타납니다.
npm install @toast-ui/vue-editor
plugins 디렉토리에 tui-editor.js 파일 생성하기
import Vue from 'vue'
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/ko-kr';
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
import { Editor, Viewer } from '@toast-ui/vue-editor';
Vue.component('editor', Editor)
Vue.component('viewer', Viewer)
plugins: [ { src:"~plugins/tui-editor.js", ssr:false } ]
해당 코드를 입력하면 Toast Ui Editor 를 사용할수있게되며 아래와 같이 나온다.