vue quill.js 配置
时间: 2023-09-18 18:13:04 浏览: 120
好的,关于 Vue Quill.js 的配置,可以按照以下步骤进行操作:
1. 安装 Vue Quill.js
```
npm install vue-quill-editor --save
```
2. 在需要使用的组件中引入并注册
```
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)
```
3. 在组件中使用
```
<template>
<div>
<quill-editor v-model="content"></quill-editor>
</div>
</template>
<script>
export default {
data() {
return {
content: ''
}
}
}
</script>
<style>
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';
@import '~quill/dist/quill.bubble.css';
</style>
```
4. 可选:配置 Quill.js
如果您需要对 Quill.js 进行配置,可以在组件中添加以下代码:
```
<template>
<div>
<quill-editor :options="editorOption" v-model="content"></quill-editor>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
editorOption: {
// 配置项
}
}
}
}
</script>
```
您可以根据自己的需求,在 `editorOption` 中添加 Quill.js 的配置项,例如:
```
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
]
},
theme: 'snow'
}
```
这里的配置项可以参考 Quill.js 的官方文档进行设置。
阅读全文