[Vue] Vue 에디터 적용 하기 쉬운 Quill Editor

Vue 프로젝트 에디터 검토 및 적용 테스트 중 

쉽게 적용이 가능하고 심플하면서 필요한 기능만 갖춰진 에디터가 검토되어 정리해보았다

 

(개인적으로 Toast Editor 보단 Quill Editor 가 좀더 쉽고 편하게 적용 가능 했던 것 같다)

 

 

---

 

 

1. Quill Editor 

 Quill Editor는 모던 웹을 위한 오픈소스 WYSIWYG 에디터이다

오픈소스 에디터이며 modular 구조의 아키텍쳐이고 적용하는 웹페이지에 대해 커스텀마이징이 가능하도록 되어 있다

 

[Quil Editor 공식홈페이지]

 

Quickstart - Quill

 

2. 설치

npm i vue-quill-editor

 

 

3.  Quil Editor 구현

• components.vue 구현

<template>
  <quill-editor
    :disabled="false"
    :value="content"
    :options="editorOption"
    @change="onEditorChange"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />
</template>

<script>
import hljs from 'highlight.js'
import debounce from 'lodash/debounce'
import { quillEditor } from 'vue-quill-editor'

import 'highlight.js/styles/tomorrow.css'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

export default {
    name: 'CompEditor',
    components: {
        quillEditor
    },
    data() {
        return {
            editorOption: {
                placeholder: '내용을 입력해 주세요 ',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // <strong>, <em>, <u>, <s>
                        ['blockquote', 'code-block'], // <blockquote>, <pre class="ql-syntax" spellcheck="false">
                        [{ header: 1 }, { header: 2 }], // <h1>, <h2>
                        [{ list: 'ordered' }, { list: 'bullet' }],
                        [{ script: 'sub' }, { script: 'super' }], // <sub>, <sup>
                        [{ indent: '-1' }, { indent: '+1' }], // class제어
                        [{ direction: 'rtl' }], // class 제어
                        [{ size: ['small', false, 'large', 'huge'] }], // class 제어 - html로 되도록 확인
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, normal
                        [{ font: [] }], // 글꼴 class로 제어
                        [{ color: [] }, { background: [] }], // style="color: rgb(230, 0, 0);", style="background-color: rgb(230, 0, 0);"
                        [{ align: [] }], // class
                        // ["clean"],
                        ['link', 'image', 'video']
                    ],
                    syntax: {
                        highlight: (text) => hljs.highlightAuto(text).value
                    }
                }
            },
            content: ''
        }
    },
    methods: {
        onEditorChange: debounce(function(value) {
            console.log('onEditorChange : ', value.html)
        }, 466),
        onEditorBlur(editor) {
            console.log('onEditorBlur : ', editor)
        },
        onEditorFocus(editor) {
            console.log('onEditorFocus : ', editor)
        },
        onEditorReady(editor) {
            console.log('onEditorReady : ', editor)
        }
    }
}

</script>

 

 

4. 실행