nuxt3 에서 vue-quill 라이브러리로 quill.js 쓰기

빌어먹을 넉스트놈이 온갖 quill 관련 라이브러리를 거부해서 어제부터 죙일 뒤적뒤적하다가 vue-quill 깃허브에서 쓸 수 있다고 8일전에 올라왔길래 기억하는 용도로 링크 냉큼 가져옴.. 여기 안써놓으면 ㄷ나중에 또 검색하느라 하루를 보내겠지.....

 

준비물 - nuxt3 기본 템플릿, vue sfc를 써보기는 한 뇌

 

아래 링크 따라하면 됨

https://github.com/vueup/vue-quill/issues/161#issuecomment-1187359826

Nuxt 3 Support · Issue #161 · vueup/vue-quill

 

- import { defineNuxtPlugin } from '#app' 에서 #app부분에 경고가 뜬다면 걍 이 Import 자체를 제거하면 됨.

- 설마 plugins/quill.client.js 나 components/Test.vue를 고대로 적진..않겟ㅆ쬬?! 저건 걍 저 분이 친절하게 적어주신 파일 루트임. 

- quill.client.js는 반드시 plugins 폴더 내에 있어야 함

- quill.client.ts처럼 타입스크립트로 쓸 수도 있음

 

위에 저 링크 따라하고 나서 아래코드를 가진 .vue 파일 하나 만들고

<script setup lang="ts">
const content = ref(null)

const emits = defineEmits(['change'])

const clickButton = () => {
  emits('change', content.value.getHTML())
}
</script>

<template>
  <div>
    <quill-editor
      ref="content"
      theme="snow"
      @text-change="clickButton"
    />
  </div>
</template>

 

@change 를 사용해서 꺼내셈

<script setup lang="ts">

// 텍스트 편집기에서 가져온 html 코드 (string)
const editorText = ref('')

</script>

<template>
 <EditorLinkTextQuill
        @change="
          (val) => {
            editorText = val
          }
        "
      />
</template>

 

@change의 val 은 에디터 안에 적힌걸 html로 가져온걸 string으로 뽑아준거쉼.

v-html을 이용해서 편집기에 들어간대로 문자를 뽑아줄 수도 있슴

<script setup lang="ts">

// 텍스트 편집기에서 가져온 html 코드 (string)
const editorText = ref('')

</script>
<template>
  <div v-html="editorText"></div>
  <EditorLinkTextQuill
    @change="
      (val) => {
        editorText = val
      }
    "
  />
</template>

 

근데 이렇게하면 

 

[Vue warn]: Attempting to hydrate existing markup but container is empty. Performing full mount instead.

 

이런 경고가 뜨는데.. 이 경고의 해결법은 못찾고있슴..그치만 일단 잘 돌아간다.

경고 해결법 찾으면 업데이트 하겟삼~