一、npm下载vue-quill-editor
npm install vue-quill-editor --save
二、在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
三、在项目中使用
<template>
<div class="edit" style="margin-top: 15px">
<quill-editor ref="textEditor" v-model="articleContent" :options="editorOption">
</quill-editor>
</div>
</template>
<script>
export default{
data(){
return{
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'color': [] }, { 'background': [] }],
['clean'],
[{ 'align': [] },'image'],
]
},
placeholder:'请输入文章内容 ...'
},
articleTitle:'',
}
}
}
</script>
四、示例:https://www.awesomes.cn/repo/surmon-china/vue-quill-editor