vue3 quill

vue3- quill

vue3의 퀼 편집기

홈페이지

vue3- quill github-page

용법

 npm i vue3 - quill

글로벌 등록 :

 // global
import { quillEditor } from 'vue3-quill'
app . use ( quillEditor )

또는 지역 등록 :

 // single file
import { quillEditor } from 'vue3-quill'

export default {
  components : {
    quillEditor
  }
}

모듈 등록 예 :

 // global
import { quillEditor , Quill } from 'vue3-quill'

// Attention:
// customQuillModule means 'custom module name of Quill',
// not a package's name called 'customQuillModule'.
// Such as:
// import ImageUploader from "quill.imageUploader.js";
// Quill.register("modules/imageUploader", ImageUploader);

import customQuillModule from 'customQuillModule'
Quill . register ( 'modules/customQuillModule' , customQuillModule )
app . use ( quillEditor )

또는 단일 구성 요소에서

 import { quillEditor , Quill } from 'vue3-quill'
// Attention:
// customQuillModule means 'custom module name of Quill',
// not a package's name called 'customQuillModule'.
// Such as:
// import ImageUploader from "quill.imageUploader.js";
// Quill.register("modules/imageUploader", ImageUploader);
import customQuillModule from 'customQuillModule'
Quill . register ( 'modules/customQuillModule' , customQuillModule )

export default {
  components : {
    quillEditor
  }
}

.Vue에서

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

< script >
import { reactive } from ' vue '

export default {
  name : ' App ' ,
  setup () {
    const state = reactive ({
      content : ' <p>2333</p> ' ,
      _content : ' ' ,
      editorOption : {
        placeholder : ' core ' ,
        modules : {
          // toolbars: [
            // custom toolbars options
            // will override the default configuration
          // ],
          // other moudle options here
          // otherMoudle: {}
        },
        // more options
      },
      disabled : false
    })

    const onEditorBlur = ( quill ) => {
      console . log ( ' editor blur! ' , quill)
    }
    const onEditorFocus = ( quill ) => {
      console . log ( ' editor focus! ' , quill)
    }
    const onEditorReady = ( quill ) => {
      console . log ( ' editor ready! ' , quill)
    }
    const onEditorChange = ({ quill, html, text }) => {
      console . log ( ' editor change! ' , quill, html, text)
      state . _content = html
    }

    setTimeout (() => {
      state . disabled = true
    }, 2000 )

    return { state, onEditorBlur, onEditorFocus, onEditorReady, onEditorChange }
  }
}
</ script >

옵션

형태 입력 바인딩 : V- 모드

V- 모델 지침은 양방향 데이터 바인딩을 생성하는 데 사용될 수 있습니다. 예를 들어:

< quill-editor v-model : value = " state . content " ></ quill-editor >

이벤트 바인딩

< quill-editor
    v-model : value = " state . content "
    @ blur = " onEditorBlur ( $event ) "
    @ focus = " onEditorFocus ( $event ) "
    @ ready = " onEditorReady ( $event ) "
    @ change = " onEditorChange ( $event ) "
  />

다음 이벤트를 사용할 수 있습니다.

• 흐림
• 집중하다
• 준비가 된
• 변화

옵션 소품

• 옵션
  이 소품을 전달하지 않음으로써 기본 옵션을 적용하십시오.
  전달 된 옵션은 기본 사전 설정 옵션을 무시합니다.
  예를 들어:

  modules: {
    toolbar : [ ]
  }

  이 옵션은 빈 도구 모음을 생성합니다.
  모든 옵션에 대해서는 Offical Doc Quill 문서를 확인하십시오.
• 장애가 있는
  기본값 : false
  편집기를 비활성화 할 수 있도록 true 설정하십시오. 초기화 될 때 readOnly 의 값으로. 가치 변경은 초기화 후 퀼의 API 퀼 문서를 호출합니다.

기본 퀼 옵션

modules: {
  toolbar : [
    [ 'bold' , 'italic' , 'underline' , 'strike' ] ,
    [ 'blockquote' , 'code-block' ] ,
    [ { header : 1 } , { header : 2 } ] ,
    [ { list : 'ordered' } , { list : 'bullet' } ] ,
    [ { script : 'sub' } , { script : 'super' } ] ,
    [ { indent : '-1' } , { indent : '+1' } ] ,
    [ { direction : 'rtl' } ] ,
    [ { size : [ 'small' , false , 'large' , 'huge' ] } ] ,
    [ { header : [ 1 , 2 , 3 , 4 , 5 , 6 , false ] } ] ,
    [ { color : [ ] } , { background : [ ] } ] ,
    [ { font : [ ] } ] ,
    [ { align : [ ] } ] ,
    [ 'clean' ] ,
    [ 'link' , 'image' , 'video' ]
  ]
}

패키지

차입 : Vue-Quill-editor에서 영감을 얻은 Vue-Quill-editor.

퀼 ImageHandler 모듈
...

개발

 # root dir
yarn serve

환영 PR

오픈 소스 덕분에. ❤️