vue中使用vue-quill-editor富文本编辑器

一、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