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

最近项目中接触到了富文本编辑器，最终选择了vue-quill-editor。
第一步：首先下载安装

npm install vue-quill-editor --save

第二步：在main.js中引用

// 使用quill富文本编辑器
import  VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

第三步：创建一个新的js文件，取名为 quill-title.js

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]]
      })
}

第四步：创建一个新的vue文件，取名为 quillEditor.vue

第五步：在别的页面引入就可以了