[Vue] mycure/vue-wysiwyg 기본편집기 활용하기 (default 값 넣기)

 

Vue2로 작업 중, edit 기능을 사용해야 한 경우가 생겼다. 물론 Vue 기능을 사용해 에디터 기능을 내멋대로 구현하면 너무나도 좋겠지만.. 기획 요구사항 날짜를 맞춰야하기때문에 사용한 라이브러리다 !

사실 에디터 기능을 갖춘 라이브러리가 많은데 일단 사용할때 직관적이지가 않고 vue 전용으로 나온 라이브러리라 예시도 간결해서 너무 좋았다. 간단하게 사용하고 싶은 기능만 추가해서 구현이 가능한 라이브러리라 여기저기 유용하게 사용이 가능 할 것 같다.

 

 

npm 설치

npm install @mycure/vue-wysiwyg

 

main.js

import Vue from 'vue';
import VueWysiwyg from '@mycure/vue-wysiwyg';

Vue.use(VueWysiwyg);

 

test.vue

<template>
  <div>
    <mc-wysiwyg v-model="html" :hide="hide"></mc-wysiwyg>
  </div>
</template>

<script>
import { McWysiwyg } from '@mycure/vue-wysiwyg';
export default {
  components: {
    McWysiwyg
  },
  data () {
    return {
      html: '<div><p> <span>[제 3자 정보 제공 동의 안내]</span><br />본 이벤트는 경품 및 혜택 제공을 위해 제3자 정보 제공 동의고객에 한해 응모가 가능합니다. 등록된 개인정보는 당첨자 선정 및 경품/혜택제공 목적으로만 사용되며, 이 벤트 및 초대행사 종료후 완전 파기됩니다. 미동의 시 이 벤트 응모가 불가합니다.</p> <br><div><p>제공 받는 자 : </p><p>제공 항목 : </p><p>제공 기간 : </p><p>제공 목적 : </p></div></div>',
      hide: { //hide 속성 사용 시 원하지 않은 옵션을 제거할 수 있다.
        strikethrough: true, //true 일 경우 제거
        table: true
      }
    }
  }
}
</script>

 

 

html 코드에 기본값으로는 태그를 포함해서 작성해주어야한다!

그리고 다른곳에 라이브로 구현하고 싶다면 v-html 을 사용해 내부에 넣어주면 라이브 적용이 가능하다!

        <p v-html="agreeHtml"></p>

 

 

hide로 추가 할 수 있는 설정 값

bold	Boolean	false
italic	Boolean	false
underline	Boolean	false
strikethrough	Boolean	false
heading	Boolean	false
alignLeft	Boolean	false
alignCenter	Boolean	false
alignRight	Boolean	false
ol	Boolean	false
ul	Boolean	false
url	Boolean	false
table	Boolean	false
indent	Boolean	false
outdent	Boolean	false

 

 

> 다운로드 사이트

@mycure/vue-wysiwyg

 

> 데모 사이트

Vue WYSIWYG - A simple WYSIWYG editor for Vue.js by MYCURE