yarn add vue-quill-editor -D

yarn add quill -D

 import QuillEditor from 'vue-quill-editor'

 import 'quill/dist/quill.core.css'

 import 'quill/dist/quill.bubble.css'

 import 'quill/dist/quill.snow.css'

 Vue.use(QuillEditor)

　　<template>

    　　<div>

　　　　　　<el-upload

              class="avatar-uploader"

              action="要上传到的接口"

              :data='date' //需要传递的参数

              name="file"

              :show-file-list="false"

              :on-success="Success"

              :on-error="Error">

         </el-upload>

　　　　　　<quill-editor

             v-model="content"

             ref="myQuillEditor"

             :options="editorOption"

             @blur="onEditorBlur($event)"

             @focus="onEditorFocus($event)"

             @change="onEditorChange($event)"
　　　　　　　　@ready="onEditorReady($event)"
          ></quill-editor>

        <button @click="saveHtml">确定</button>

    </div>

</template>

<script>

export default {

  data () {

    return {

      content: ``,//最终拿到的内容

      editorOption: {

        theme: 'snow', //默认配置项

        // modules: {  配置项，根据需要自行添加删除

        //     toolbar: [

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

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

        //         [{ 'header': 1 }, { 'header': 2 }],// 标题，键值对的形式；1、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'], //清除字体样式

        //         ['image','video']//上传图片、上传视频

        //     ]

        // }

        // 上传图片时modules中内容如下

        modules: {

            toolbar: {

                container: [

                    //配置项，全部配置如上

                    ['bold', 'italic', 'underline'],

                    [{ 'align': [] }],

                    ['image']

                ],

                handlers: {

                    'image': function (value) {

                    if (value) {

                        document.querySelector('.avatar-uploader input').click()

                    } else {

                        this.quill.format('image', false);

                    }

                    }

                }

            }

        }

      },

    }

  },

  computed: {

    editor () {

      return this.$refs.myQuillEditor.quill

    }

  },

  methods: {

    Success(res, file){

      // 获取实例

      let quill = this.$refs.myQuillEditor.quill

      // 上传成功

      if (res.errorCode == 200 && res.result !== null) { //res.errorCode是上传是否成功的状态值~~res.result是上传成功返回的图片路径

          // 获取官标位置

          let cursor = quill.getSelection().index;

          console.log(res)

          //我这里loot.SERVE.file是服务器前半截地址加上res.result返回的半截地址

          quill.insertEmbed(cursor, 'image', loot.SERVE.file+res.result)

          // 光标向后加1

          quill.setSelection(cursor + 1)

      } else {

          this.$message.error('上传失败')

      }

    },

    Error(){

      this.$message.error('上传失败')

    },

    onEditorReady (editor) {}, // 准备编辑器

    onEditorBlur () {}, // 失去焦点事件

    onEditorFocus () {}, // 获得焦点事件

    onEditorChange () {}, // 内容改变事件

    saveHtml (event) {

      alert(this.content)

    }

  }

}

</script>

const titleConfig = {

  'ql-bold':'加粗',

  'ql-color':'颜色',

  'ql-font':'字体',

  'ql-code':'插入代码',

  'ql-italic':'斜体',

  'ql-link':'添加链接',

  'ql-background':'背景颜色',

  'ql-size':'字体大小',

  'ql-strike':'删除线',

  'ql-script':'上标/下标',

  'ql-underline':'下划线',

  'ql-blockquote':'引用',

  'ql-header':'标题',

  'ql-indent':'缩进',

  'ql-list':'列表',

  'ql-align':'文本对齐',

  'ql-direction':'文本方向',

  'ql-code-block':'代码块',

  'ql-formula':'公式',

  'ql-image':'图片',

  'ql-video':'视频',

  'ql-clean':'清除字体样式'

};

export function addQuillTitle(){

  const oToolBar = document.querySelector('.ql-toolbar'),

        aButton = oToolBar.querySelectorAll('button'),

        aSelect =  oToolBar.querySelectorAll('select');

  aButton.forEach(function(item){

    if(item.className === 'ql-script'){

      item.value === 'sub' ? item.title = '下标': item.title = '上标';

    }else if(item.className === 'ql-indent'){

      item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';

    }else{

      item.title = titleConfig[item.classList[0]];

    }

  });

  aSelect.forEach(function(item){

    item.parentNode.title = titleConfig[item.classList[0]];

  });

}

<script>

import { addQuillTitle } from './quill-title.js'

export default {

    mounted(){

      addQuillTitle();

    }

}