vue3 quill下載vue3 quill源代碼下載

vue3 quill

其他資源

v0.3.0

下載

vue3 Quill

Vue3的Quill編輯器

首頁

vue3 Quill github頁

用法

 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-Model指令可用於創建雙向數據綁定。例如：

< 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 : [ ]
}
```
此選項將生成一個空的工具欄。
檢查所有選項的官方DOC Quill文檔。
禁用
默認值： false
true為禁用編輯器。作為初始化時readOnly的價值。價值更改將在初始化後調用Quill的API Quill文檔。

默認的Quill選項

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