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

1、安装

npm install vue-quill-editor --save-dev

2、在项目的main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3、在Vue组建中使用

<template>

    <quill-editor v-model="content" :options="editorOption"></quill-editor>

</template>

<script>

    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{}
            }
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>

4、可以绑定事件

<template>

      <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor> 

</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{}
            }
        },
        methods:{
            onEditorBlur(){//失去焦点事件
            },
            onEditorFocus(){//获得焦点事件
            },
            onEditorChange(){//内容改变事件
            }
        }
    }
</script>

<style scoped>

</style>

5、editorOption:{}  是用来对这个富文本编辑器进行设置的。

editorOption的placeholder属性设置输入框中的提示词

工具栏是分块的，默认显示的比较多，且有重复功能的，可以在editorOption的modules属性中设置，只显示自己需要的

                editorOption:{
                    // placeholder设置提示词
                    placeholder: '请输入正文......',
                    // modules设置工具栏
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            ['formula'],
                            ['clean'],
                            ['link', 'image', 'video'],
                            [{ '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': [] }]
                        ]
                    }
                }

（1）只需要填写功能名的

加粗 - bold； 斜体 - italic ；下划线 - underline ；删除线 - strike      ['bold', 'italic', 'underline', 'strike']

引用- blockquote； 代码块 - code-block     ['blockquote', 'code-block']

公式 - formula       ['formula']

清除字体样式- clean     ['clean']

链接-link；图片 - image ；视频 - video    ['link', 'image', 'video']

（2）需要有默认值的

标题 - header        [{ 'header': 1 }, { 'header': 2 }]  值字体大小，这种方式设置只有标题一和标题二样式

列表 - list               [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered（有序列表），bullet（无序列表）

上标/下标 - script       [{ 'script': 'sub'}, { 'script': 'super' }], 值sub（下标），super（上标）

缩进 - indent              [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等

文本方向 - direction     [{ 'direction': 'rtl' }], 值rtl

（3）有多个值   以下拉列表形式显示

大小 - size      [{ 'size': ['small', false, 'large', 'huge'] }] 

标题 - header       [{ 'header': [1, 2, 3, 4, 5, 6, false] }]

（4）有系统默认值的功能只需填写一个空数组 就会有出现默认的选项

颜色 - color ；背景颜色 - background         [{ 'color': [] }, { 'background': [] }],

字体 - font          [{ 'font': [] }]

文本对齐 - align           [{ 'align': [] }]

根据需要设置工具栏，例如：

                editorOption:{
                    // placeholder设置提示词
                    placeholder: '请输入正文......',
                    // modules设置工具栏
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['link', 'image', 'video'],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }], 
                            [{ 'size': ['small', false, 'large', 'huge'] }],
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            [{ 'color': [] }, { 'background': [] }], 
                            [{ 'align': [] }]
                        ]
                    }
                }