Nuxt.js Quill Editor

Quill Editor 공식 사이트

https://quilljs.com/

Quill - Your powerful rich text editor

 

 

Vue-Quill-Editor

 

Vue 

https://github.com/surmon-china/vue-quill-editor

 

Nuxt 

https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-quill-editor/nuxt

 

 

적용 가이드 (중국어 주의)

https://hamsterism.com/articles/how-to-use-vue-quill-editor-in-nuxt/

 

 

1. 필요 모듈 설치

 

npm install vue-quill-editor --save 
# 또는 
yarn add vue-quill-editor

# 추가
npm i vue-debounce
yarn add vue-debounce

 

 

2. Plugin file 생성

 

plugins/vue-quill-editor.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

 

 

3. Nuxt.config 정의

 

nuxt.config.js

  css: [
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
  ],
  
  plugins: [{ src: '~plugins/vue-quill-editor.js', ssr: false }],

 

 

4. Quill.vue 생성

 

<template>
  <section>
    <client-only>
      <quill-editor
        ref="editor"
        v-model.lazy="editedContent"
        :options="editorOption"
        class="editor--border relative"
        @change="debounceTextChange"
      />
    </client-only>
  </section>
</template>

<script>
import { debounce } from 'vue-debounce'
export default {
name: "QuillEditor",
  props: {
    content: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      editedContent: this.content,
      editorOption: {
          theme: 'snow',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block']
            ]
          }
      }

	// custom
      editorOption: {
        theme: 'bubble',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike', 'code'],
              ['blockquote', 'code-block'],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }],
              [{ indent: '-1' }, { indent: '+1' }],
              [{ size: ['small', false, 'large', 'huge'] }],
              [{ color: [] }, { background: [] }],
              [{ align: [] }],
              ['clean'],
              ['link', 'image', 'video'],
            ],
            handlers: {
              image: this.uploadImage,
            },
          },
        },
      },
    }
  },
  methods: {
    debounceTextChange: debounce(function () {
      // don't use arrow function
      this.$emit('text-change', this.editedContent)
    }, 3000),
  },
}
</script>

https://github.com/dhershman1/vue-debounce#readme

https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff

 

Throttle 와 Debounce 는 자주 사용 되는 이벤트나 함수 들의 실행되는 빈도를 줄여서, 성능 상의 유리함을 가져오기 위한 개념이다.