Quill

Quill https://github.com/quilljs/quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility.
Quill은 텍스트 편집기 라이브러리입니다.
확장성도 높지만 특수한 규격을 이해해야 한다.
Quill을 처리하는 tips를 소개합니다.

Quill SSR에서 오류 방지

Vue.js 등 SSR이 가능한 프레임워크에서 SSR 시 import Quill을 사용하면 DOM 계열의 API를 참조하여 오류가 발생합니다.

대책(Vue.js 시)

<div red="editor" />

<script>
let Quill = {}
if (process.client) {
  Quill = require('quill')
}

export default {
  ...
  mounted () {
    if (process.client) {
      const quill = new Quill(this.$refs.editor.$el)
    }
  }
}
</script>

서버에서 import/import를 수행할 수 없습니다. 블록에서 실행할 수 없습니다require.

줄 바꿈 시 스크롤

Quill에서는 텍스트 높이가 변경될 때 자동으로 스크롤되는 상위 계층 구조의 DOM 요소만 지정할 수 있습니다.
DOM 구조와 기존 스타일의 관계에 따라 윈도우를 스크롤하는 것을 고려할 수 있습니다.

대책

quill.selection.scrollIntoView = function (scrollingContainer) {
  const range = this.lastRange
  if (range == null) return
  const bounds = this.getBounds(range.index, range.length)
  if (bounds == null) return
  const limit = this.scroll.length() - 1
  const [first] = this.scroll.line(Math.min(range.index, limit))
  let last = first
  if (range.length > 0) {
    [last] = this.scroll.line(Math.min(range.index + range.length, limit))
  }
  if (first == null || last == null) return
  const scrollBounds = {
    top: 0,
    bottom: window.innerHeight
  }
  if (bounds.top < scrollBounds.top) {
    window.scrollBy(0, -(scrollBounds.top - bounds.top))
  } else if (bounds.bottom > scrollBounds.bottom) {
    window.scrollBy(0, bounds.bottom - scrollBounds.bottom)
  }
}

quillscrollIntoView의 실현을 참고하여 스크롤 처리를 윈도우로 바꿉니다

드래그하여 이미지 삽입하기

quill에 드래그 동작이 내장되어 있지 않으니 직접 추가하세요

quill.container.addEventListener('drop', (event) => {
  if (!event.dataTransfer.files || event.dataTransfer.files.length == 0) {
    return
  }
  event.stopPropagation()
  event.preventDefault()

  const files = event.dataTransfer.files
  const file = files[0]
  const name = file.name
  const range = quill.getSelection(true)

  someUploadFunc(file).then(response => {
    quill.insertEmbed(range.index, 'image', response.url, 'user')
  }).catch(error => {
    console.error(error)
  })
}, false)