71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
<template>
|
|
<div class="vue-quill-container">
|
|
<QuillEditor
|
|
ref="quillRef"
|
|
v-model:content="quillData"
|
|
:options="quillOptions"
|
|
content-type="html"
|
|
@text-change="quillChange()"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
const toolbarOptions = [
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
['blockquote', 'code-block'],
|
|
[{ 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']
|
|
]
|
|
import { QuillEditor } from '@vueup/vue-quill'
|
|
import 'quill/dist/quill.core.css'
|
|
import 'quill/dist/quill.snow.css'
|
|
import 'quill/dist/quill.bubble.css'
|
|
|
|
export default {
|
|
name: 'VueQuill',
|
|
props: {
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
emits: ['update:content'],
|
|
components: { QuillEditor },
|
|
data() {
|
|
return {
|
|
quillData: this.content,
|
|
quillOptions: {
|
|
theme: 'snow',
|
|
placeholder: '请输入',
|
|
modules: {
|
|
toolbar: {
|
|
container: toolbarOptions
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
quillChange() {
|
|
this.$emit('update:content', this.quillData)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vue-quill-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100px;
|
|
}
|
|
</style>
|