【版本】
vue-cli3
webpack@4.33.0
quill@2.0.0-dev.3
【步骤】
下载Quillnpm install quill --save
封装一个富文本编辑器组件
在组件中引入Quill
editor.vue
<template>
<div>
<div class="editor"></div>
</div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
export default {
name: 'editor',
props: {
value: Object
},
data() {
return {
quill:null,
options: {
theme: 'snow',
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']
]
},
placeholder: 'Insert text here ...'
}
}
},
mounted() {
let dom = this.$el.querySelector('.editor')
this.quill = new Quill(dom, this.options);
this.quill.setContents(this.value)
this.quill.on('text-change', () => {
this.$emit('input', this.quill.getContents())
});
}
}
</script>
在有需要的页面使用该组件
App.vue
<template>
<div>
<div>背景</div>
<editor v-model="bg"></editor>
<div>计划</div>
<editor v-model="plan"></editor>
</div>
</template>
<script>
import editor from '@/components/editor.vue';
export default {
components: {
editor
},
data() {
return {
bg: {},
plan: {}
}
}
}
</script>
【常用API】
下面请原谅我的佛系翻译