nuxt 使用quill-image-resize-module
时间: 2023-06-20 07:08:04 浏览: 309
quill-image-resize-module:Quill富文本编辑器的模块,允许调整图像大小
如果你想在 Nuxt.js 中使用 Quill-Image-Resize-Module,可以按照以下步骤进行操作:
1. 安装 Quill-Image-Resize-Module:
```
npm install quill-image-resize-module
```
2. 在 nuxt.config.js 中引入 Quill 和 Quill-Image-Resize-Module:
```javascript
import Vue from 'vue'
if (process.client) {
const VueQuillEditor = require('vue-quill-editor/ssr')
Vue.use(VueQuillEditor)
const Quill = require('quill')
const ImageResize = require('quill-image-resize-module').default
Quill.register('modules/imageResize', ImageResize)
}
```
3. 在组件中使用 Quill 编辑器:
```html
<template>
<div>
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
editorOption: {
modules: {
imageResize: {},
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'],
],
},
},
}
},
}
</script>
```
这样就可以在 Nuxt.js 中使用 Quill-Image-Resize-Module 了。
阅读全文