Quill editor for vue3
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
}
}<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>The v-model directive can be used to create a two-way data binding. For example:
<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)"
/>The following events are available:
- blur
- focus
- ready
- change
- options
Apply the default options by not passing this prop.
The options passed in will override the default preset options.
For example:this option will generate an empty toolbar.modules: { toolbar: [] }
Check the offical doc Quill Documentation for all options. - disabled
Default:false
Settrueto disabled the editor. As the value ofreadOnlywhen initialized. Value changing will call API Quill Documentation of quill after initialization.
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']
]
}Borrowing from: vue-quill-editor Inspired by this one.
# root dir
yarn serveThanks to the open source. ❤️
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent