Unduh vue quill editor - Unduh Kode Sumber vue quill editor

vue quill editor

Sumber daya lainnya

1.0.0

Unduh

Vue-Quill-Editor

Komponen Editor Quill untuk Vue (2).

Tercerahkan ‼ ️

Sayangnya, karena proyek Quill telah berhenti secara efektif dipertahankan, vue-quill-editor akan sudah usang dan tidak akan lagi mendukung VUE3; Jika Anda mencari editor teks yang kaya, saya sarankan bermigrasi ke Tiptap , yang merupakan alternatif yang jauh lebih baik.

Jika Quill pernah memperbarui v2.0, proyek ini mungkin akan terus diperbarui juga. Saya mendorong orang untuk membayar repositori ini dan, jika garpu menjadi populer, saya akan menautkannya di readme ini.

Proyek Quill yang macet dapat ditemukan dalam masalah ini:

Apakah quill mati?
Proyek masih aktif?
Switching Editor lib sebagai quilljs sudah mati
Apa status proyek ini? Sudah lebih dari 2 tahun sejak 1.3.7 rilis.

Contoh

Contoh Komponen
Contoh CDN

Dokumentasi

Panduan Quill
Quill apis
Dokumentasi Quill

Memasang

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 >

Penggunaan

Komponen global

 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 } */ )

Komponen lokal

 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
  }
}

Komponen SSR

Lihat kode contoh nuxt.js.

Daftar Modul Quill

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

// Vue app...

Komponen

< 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 >

Masalah

Tambahkan atribut dari opsi bilah alat
Opsi untuk memasukkan gambar dari URL
Bagaimana Vue-Quill-Editor Berkombin dengan Modul Highlighter Sintaks dari Sorotan.js
配合 elemen-ui 实现上传图片/视频到七牛 demo
Cara Memperbaiki “Tidak Dapat Menemukan Variabel: Quill”, “Quill tidak terdefinisi”, “Window.quill tidak terdefinisi” ketika mencoba menggunakan modul quill yang menggunakan webpack di Nuxt/SSR