7. jodit-vue 에디터 사용방법

1. 설치

npm install jodit-vue --save

---

2. main.js에 코드추가 (플러그인 연결)

import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'

Vue.use(JoditVue)

---

3. 원하는 template에 코드 추가

<template>
    <div id="app">
        <jodit-edirot v-model="contents" :buttons="buttons" :conffig="config" />
    </div>
</template>

<script>
import 'jodit/build/jodit.min.css'
import { JoditEditor } from 'jodit-vue'

export default {
    name: 'app',
    components: { JoditEditor },
data(){
  return{
      /* 사용하고 싶은 버튼만 넣어서 사용할 수 있음 */
      buttons : ['bold', 'underline', strikethrough', 'eraser',
 		'|', 'left', 'center', 'right',
                '|', 'brush', 'fontsize', 'paragraph', 'lineHeight', 'hr',
                '|', 'image', 'print',
                '|', 'undo', 'redo',
                '|', 'find', 'preview'],
    /* 이미지 업로드 기능 추가 하려면 config에 uploader 추가  */
	config :{
   		uploader : { insertImageAsBase64URL : true},
		placeholder : '',
            }
 }
}
</script>
<style>
</style>

 

 

---

4. 결과

이렇게 잘 보인다. width에 따라 메뉴바가 변경되니 참고할 것. 아래 에디터는 width가 줄어든 모습이다.

---

https://ddolcat.tistory.com/2112

[Vue.js + Vuetify.js] Jodit 에디터 파일 업로드 기능 구현시 함수 또는 스크립트(method) 호출시 is not a fu

https://www.npmjs.com/package/jodit-vue

jodit-vue