前言：quill-editor元件中的工具欄都是英文，而且最難受的時沒有title提示，要怎樣給他新增title，並且是中文的title提示呢？

一、建立一個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]];
  });
}
 

②、在頁面中應用

<template>
  <quill-editor  v-model="content" >
  </quill-editor>
</template>

<script>

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

  export default {
    components: {
      quillEditor
    },
    mounted(){
      addQuillTitle();
    },
    data() {
      return {
        content: '<h2>freddy</h2>',
      }
    }
  }
</script>
 

③、執行結果

像這樣滑鼠移入的時候就會顯示title了。