vue quill editor下載 - vue quill editor源代碼下載

vue quill editor

其他資源

1.0.0

下載

Vue-Quill-編輯

VUE（2）的Quill Editor組件。

棄用‼ ️

不幸的是，由於Quill項目已有效地停止了維護， vue-quill-editor將被棄用，並且將不再支持Vue3；如果您正在尋找豐富的文本編輯器，我建議遷移到Tiptap ，這是更好的選擇。

如果Quill曾經更新v2.0，則此項目可能會繼續更新。我鼓勵人們分叉這個存儲庫，如果叉子很受歡迎，我將在此讀書中鏈接到它。

在這些問題中可以找到停滯的鵝毛筆項目：

奎爾死了嗎？
項目還活躍嗎？
切換編輯lib，因為Quilljs已死
這個項目的狀態如何？自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示例代碼。

註冊Quill模塊

 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-編輯器如何與亮點的語法熒光筆模塊結合
配合元素-UI實現上傳圖片/視頻到七牛演示
如何修復“找不到變量：quill”，“ quill是不確定的”，“ window.quill是未定義的”錯誤時，嘗試使用在NUXT/SSR中使用WebPack的Quill模塊時