vue quill editor

vue quill-editor

vue (2) 의 퀼 편집기 구성 요소.

---

더 이상 사용되지 않았습니다 ‼ 닐

불행히도, 퀼 프로젝트가 효과적으로 유지되는 것을 중단 했으므로 vue-quill-editor 더 이상 사용 되지 않으며 더 이상 VUE3을 지원하지 않습니다. 풍부한 텍스트 편집기를 찾고 있다면 Tiptap 으로 마이그레이션하는 것이 좋습니다. 이는 훨씬 더 나은 대안입니다.

Quill이 v2.0을 업데이트하면이 프로젝트도 계속 업데이트 될 것입니다. 나는 사람들 이이 저장소를 포크하도록 권장하며, 포크가 인기를 얻으면이 readme에서 그것에 연결할 것입니다.

정체 된 퀼 프로젝트는 다음과 같은 문제에서 찾을 수 있습니다.

• 퀼이 죽었나요?
• 프로젝트가 여전히 활성화 되었습니까?
• Quilljs가 죽었을 때 편집자 lib를 스위칭합니다
• 이 프로젝트의 상태는 무엇입니까? 1.3.7 릴리스 이후 2 년이 지났습니다.

---

예

• 구성 요소 예
• CDN 예제

선적 서류 비치

• 퀼 가이드
• 퀼 apis
• 퀼 문서

설치하다

NPM

npm install vue-quill-editor --save

yarn add vue-quill-editor

cdn

 < link rel =" stylesheet " href =" path/to/quill.core.css " />
< link rel =" stylesheet " href =" path/to/quill.snow.css " />
< link rel =" stylesheet " href =" path/to/quill.bubble.css " />
< script type =" text/javascript " src =" path/to/quill.js " > </ script >
< script type =" text/javascript " src =" path/to/vue.min.js " > </ script >
< script type =" text/javascript " src =" path/to/dist/vue-quill-editor.js " > </ script >
< script type =" text/javascript " >
  Vue . use ( window . VueQuillEditor )
</ script >

용법

글로벌 구성 요소

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

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue . use ( VueQuillEditor , /* { default global options } */ ) 

로컬 구성 요소

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

import { quillEditor } from 'vue-quill-editor'

export default {
  components : {
    quillEditor
  }
}

SSR 구성 요소

nuxt.js 예제 코드를 참조하십시오.

퀼 모듈을 등록하십시오

 import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill . register ( 'modules/yourQuillModule' , yourQuillModule )

// Vue app...

요소

< template >
  <!-- Two-way Data-Binding -->
  < quill-editor
    ref = " myQuillEditor "
    v-model = " content "
    :options = " editorOption "
    @blur = " onEditorBlur($event) "
    @focus = " onEditorFocus($event) "
    @ready = " onEditorReady($event) "
  />

  <!-- Or manually control the data synchronization -->
  < quill-editor
    :content = " content "
    :options = " editorOption "
    @change = " onEditorChange($event) "
  />
</ template >

< script >
  // You can also register Quill modules in the component
  import Quill from ' quill '
  import someModule from ' ../yourModulePath/someQuillModule.js '
  Quill . register ( ' modules/someModule ' , someModule)
  
  export default {
    data () {
      return {
        content : ' <h2>I am Example</h2> ' ,
        editorOption : {
          // Some Quill options...
        }
      }
    },
    methods : {
      onEditorBlur ( quill ) {
        console . log ( ' editor blur! ' , quill)
      },
      onEditorFocus ( quill ) {
        console . log ( ' editor focus! ' , quill)
      },
      onEditorReady ( quill ) {
        console . log ( ' editor ready! ' , quill)
      },
      onEditorChange ({ quill, html, text }) {
        console . log ( ' editor change! ' , quill, html, text)
        this . content = html
      }
    },
    computed : {
      editor () {
        return this . $refs . myQuillEditor . quill
      }
    },
    mounted () {
      console . log ( ' this is current quill instance object ' , this . editor )
    }
  }
</ script >

문제

• 도구 모음 옵션에서 속성을 추가하십시오
• URL에서 이미지를 삽입하는 옵션
• Vue Quill-Editor가 Highlower의 구문 형광펜 모듈과 결합하는 방법 JS
• 配合 요소 -ui-/视频到七牛 데모
• "변수를 찾을 수 없음 : Quill", "Quill은 정의되지 않은", "Window.quill이 정의되지 않은"오류를 고치는 방법 Nuxt/SSR에서 WebPack을 사용하는 퀼 모듈을 사용하려고 할 때 오류가 발생합니다.

퀼 모듈

• Quill-Image-Extend-Module
• 퀼-이미지-재산-모듈
• 퀼-이미지 드로프 모듈
• Quilljs-table
• 더 많은 모듈 ...

changelog

각 릴리스에 대한 자세한 변경 사항은 릴리스 노트에 문서화되어 있습니다.

특허

MIT 라이센스에 따라 라이센스.