Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zzxming/vue-quill-up
https://github.com/zzxming/vue-quill-up
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zzxming/vue-quill-up
- Owner: zzxming
- License: mit
- Created: 2024-07-09T07:46:58.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-07-25T02:20:31.000Z (5 months ago)
- Last Synced: 2024-09-25T21:11:29.402Z (3 months ago)
- Language: Vue
- Size: 138 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Quill2 in Vue3
```sh
npm install vue-quill-up
```
Here is a [demo](https://stackblitz.com/edit/vitejs-vite-4ykzfu?file=src%2FApp.vue) that you can edit
## Usage
### Base
You can use v-model to bind quill content. and use `content-type` specify the type of `model-value`. Although QuillUp still uses Delta internally.
```vue
import QuillUp from 'vue-quill-up';
import { ref } from 'vue';
const content = ref('<h1>Hello World!</h1>');
const editorRef = ref();
const contentType = 'html';
const options = {
theme: 'snow',
};
```
### Register Prop
You can use the `register` prop to register custom modules.
```vue
import QuillUp from 'vue-quill-up';
import { ref } from 'vue';
import { Parchment } from 'quill/core';
const MarginTopClass = new Parchment.ClassAttributor('margin-top', 'ql-margin-top', {
scope: Parchment.Scope.BLOCK,
});
const MarginTopStyle = new Parchment.StyleAttributor('margin-top', 'margin-top', {
scope: Parchment.Scope.BLOCK,
});
const content = ref('<h1>Hello World!</h1>');
const editorRef = ref();
const contentType = 'html';
const options = {
theme: 'snow',
};
// same Quill.register({ 'attributors/class/margin-top': MarginTopClass, 'attributors/style/margin-top': MarginTopStyle })
const register = {
attributors: {
class: {
'margin-top': {
module: MarginTopClass,
overwrite: true,
},
},
style: {
'margin-top': MarginTopStyle,
}
},
};
```
### For toolbar module
You can pass a `ref` to the `toolbar` module to customize the toolbar.
```vue
import { ref } from 'vue';
const content = ref('');
const toolbarRef = ref();
const options = {
theme: 'snow',
modules: {
toolbar: toolbarRef,
// or like below
// toolbar: {
// container: toolbarRef,
// },
TextCounter: {
maxLength: 10,
exceed: () => {
console.log('out of range');
},
},
},
};
```
## Props
| name | type | description | default | require |
| ----------- | ------------------------------- | ---------------------------------------------- | --------- | ------- |
| modelValue | `string \| Delt'` | Quill content | - | `true` |
| contentType | `'delta' \| 'string' \| 'html'` | `modelValue` type | `'delta'` | `false` |
| options | `QuillOptions` | Quill options | `{}` | `false` |
| readOnly | `boolean` | Editor is readonly. Same with options.readOnly | `false` | `false` |
| register | `Record` | Modules that require automatic registration | - | `false` |
## Events
| name | description | Type |
| ---------------- | ---------------------------------------- | ---------------------------------------- |
| ready | Trigger when Quill instance create | `() => void` |
| focus | Focus in `.ql-editor` | `(evnet: FocusEvent) => void` |
| focus | Blur from `.ql-editor` | `(evnet: FocusEvent) => void` |
| text-change | Same with `quill.on('text-change')` | Same with `quill.on('text-change')` |
| selection-change | Same with `quill.on('selection-change')` | Same with `quill.on('selection-change')` |
| editor-change | Same with `quill.on('editor-change')` | Same with `quill.on('editor-change')` |