vue.js 에서 summernote 사용하기

vue.js에서는 summernote를 어떻게 사용할수있는지 검색해보다가

심플하게 사용하는 방법을 찾았다!

 

https://medium.com/@ScriptMint/a-simple-vue-js-summernote-component-4797e1f463c2

A simple vue.js Summernote Component

다음 사이트를 참조하였다.

 

과정은 다음과 같다.

1) 관련 파일 include하기

2) summernote 컴포넌트 생성

3) summernote 컴포넌트 사용

 

 

 

 

제일 먼저 해야하는 것은

1) summernote의 js파일과 css파일 include하기!

summernote를 사용하려면 필요한 js파일과 css파일을 넣어주어야한다.

(jquery와 bootstrap도 관련 파일도!)

다음 그림↓처럼 js/css파일을 include해준다.

 

summernote 파일 다운로드는 https://summernote.org/getting-started/#clone-or-fork-via-github 이곳에서!

 

 

 

 

 

2) summernote 컴포넌트 작성

아래 코드를 작성하여 summernote 컴포넌트를 작성한다!

 

summernote 컴포넌트는 model과 height라고 하는 속성(props)을 전달받는데,

• model은 summernote로 표시할 내용이고,
• height는 summernote의 높이값이다.( height속성은 전달안하면 기본(default)가 300px임 )

 

summernote.vue

<template> 
    <textarea class="form-control"></textarea> 
</template> 

<script> 
    export default{ 
        props : { 
            model: { //summernote에 들어갈 내용 
                required: true 
            }, 
            height: { //height 속성 전달받아 높이 설정(기본 300px) 
                type: String, 
                default: '300' 
            } 
        }, 
        mounted() { 
            let vm = this; 
             
            $(this.$el).summernote({ 
              lang : 'ko-KR', 
              height : vm.height,//전달받은 height 속성으로 높이 설정 
              callbacks : { 
                onInit : function onInit(){ 
                  $(vm.$el).summernote("code", vm.model); //전달받은 model속성에 입력된 내용이 summernote에 표시됨 
                }, 
                onChange : function onChange(){ 
                  vm.$emit("update:model", $(vm.$el).summernote('code'));//입력한 내용을 부모 컴포넌트로 전달 
                } 
              } 
            }); 
        } 
    } 
</script>

 

summernote 컴포넌트가 mounted되면 summernote를 생성해준다.

 

callbacks 함수에는 onInit과 onChange 함수가 있는데

• onInit : summernote가 생성될때 실행 -> model로 전달받은 내용이 summernote의 내용으로 표시되게 해준다.
• onChange : summernote에서 내용을 변경할때마다 실행됨. -> 입력한 내용을 model 속성에 바로 적용되게 update:model이벤트를 발신한다! (여기서 $(vm.$el).summernote('code')는 summernote에 입력한 내용이다.)

 

 

나는 vue프로젝트 형식이 아니여서 위의 코드 대신 js파일로 컴포넌트를 작성했다.↓

summernote.js

Vue.component('summernote-component',{
	template : '<div id="summernote"></div>',
	props : {
		model : { //summernote에 들어갈 내용
			required : true
		},
		height : { //height 속성 전달받아 높이 설정(기본 300px)
			type : String,
			default : '300'
		}
	},
	mounted : function(){
		var vm = this;
		
		$(vm.$el).summernote({
			lang : 'ko-KR',
			height : vm.height,//전달받은 height 속성으로 높이 설정
			callbacks : {
				onInit : function onInit(){
					$(vm.$el).summernote("code", vm.model); //전달받은 model속성에 입력된 내용이 summernote에 표시됨
				},
				onChange : function onChange(){ //내용 변경시에
					vm.$emit("update:model", $(vm.$el).summernote('code'));//입력한 내용을 부모 컴포넌트로 전달
				}
			}
		});
	}
})

 

 

 

 

3) 마지막으로 summernote 컴포넌트를 사용한다!

<summernote-component :model.sync="data"></summernote-component>

html 태그로 summernote컴포넌트를 사용한다.

model 속성을 전달해주고있는데, 이때 포인트는 .sync 수식어를 사용해야한다!!

그러면 summernote로 입력한 값이 바로바로 data에 적용된다.

 

 

참고) .sync 수식어란

원래 속성(props)은 부모컴포넌트에서 자식컴포넌트로 단방향으로 전달하지만,

경우에 따라 양방향 바인딩이 필요한 경우가 있다. 이때 .sync 수식어를 사용할 수 있다.

자식 컴포넌트에서 .sync를 가지는 속성을 변경하게 되면 값의 변경이 부모 컴포넌트에도 반영된다.

 

그럴려면 자식 컴포넌트에서 'update:속성이름' 이벤트를 발신하도록 해야한다.

this.$emit( 'update:속성이름' , 변경될값 ) -> 이렇게 이벤트를 발신하면됨.

 

 

( .sync 수식어를 제대로 알고싶다면,

https://kr.vuejs.org/v2/guide/components.html 이 사이트에서 sync를 검색하면 알수있다!!)