急！！！请问怎么添加工具栏hover提示功能

[kjs-zjl]

急！！！请问怎么添加工具栏hover提示功能

[zhangwei900808]

同求

[ruoshui1314]

有解决方案了麽?

[bcjohnblue]

我想這兩篇講得應該是hover提示功能 #1084 #650. 找了很多方法，目前似乎只能一個個手刻解決，範例。

[ruoshui1314]

thank you.I have solve it using another method.

[liuguangyong93]

@ruoshui1314 whats method? Please

[liucong1001]

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


let toolbarTooltips = {
      'font': 'Select a font',
      'size': 'Select a font size',
      'header': 'Select the text style',
      'bold': '加粗',
      'italic': '斜体',
      'underline': '下划线',
      'strike': '删除线',
      'color' : 'Select a text color',
      'background': 'Select a background color',
      'script': {
        'sub' : 'Subscript',
        'super': 'Superscript'
      },
      'list': {
        'ordered':'Numbered list',
        'bullet': 'Bulleted list'
      },
      'indent': {
        '-1': 'Decrease indent',
        '+1':  'Increase indent'
      },
      'direction': {
        'rtl': 'Text direction (right to left | left to right)',
        'ltr': 'Text direction (left ro right | right to left)'
      },
      'align': 'Text alignment',
      'link': 'Insert a link',
      'image': 'Insert an image',
      'formula': 'Insert a formula',
      'clean': 'Clear format',
      'add-table': 'Add a new table',
      'table-row': 'Add a row to the selected table',
      'table-column': 'Add a column to the selected table',
      'remove-table': 'Remove selected table',
      'help': 'Show help'
    };

methods:{
       onEditorReady(editor) {
         console.log('editor ready!', editor)
         this.showTooltips();
    },

    showTooltips(){
      let showTooltip = (which,el) => {
        if (which=='button'){
          var tool = el.className.replace('ql-', '');
        }
        else if (which=='span'){
          var tool = el.className.replace('ql-','');
          tool=tool.substr(0,tool.indexOf(' '));
        }
        if (tool){
          //if element has value attribute.. handling is different
          //buttons without value
          if (el.value ==''){
            if (toolbarTooltips[tool])
              el.setAttribute('title',toolbarTooltips[tool]);
          }
          //buttons with value
          else if (typeof el.value !=='undefined'){
            if (toolbarTooltips[tool][el.value])
              el.setAttribute('title',toolbarTooltips[tool][el.value]);
          }
          //default
          else
            el.setAttribute('title',toolbarTooltips[tool]);
        }
      };

      let toolbarElement = document.querySelector('.ql-toolbar');
      if (toolbarElement) {
        let matchesButtons = toolbarElement.querySelectorAll('button');
        for (let el of matchesButtons) {
          showTooltip('button',el);
        }
        //for submenus inside 
        let matchesSpans = toolbarElement.querySelectorAll('.ql-toolbar > span > span');
        for (let el of matchesSpans) {
          showTooltip('span',el);
        }
      }
    } 

}

东拼西凑的 应该可用

[EricYangXD]

2种做法

1. 重写toolbar，options.modules.toolbar='#toolbar'，'#toolbar'是你自定义的toolbar。
2. 如上liucong1001的方法，在mounted阶段拿到'.ql-editor'，然后遍历每个button，增加title即可。

[PointWu]

你可以增加一个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'),
        aSpan = oToolBar.querySelectorAll('span');
    aButton.forEach((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 if (item.className === 'ql-list') {
            item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表'
        } else if (item.className === 'ql-header') {
            item.value === '1' ? item.title = '标题H1' : item.title = '标题H2';
        } else {
            item.title = titleConfig[item.classList[0]];
        }
    });
    aSelect.forEach((item) => {
        if (item.className != 'ql-color' && item.className != 'ql-background') {
            item.parentNode.title = titleConfig[item.classList[0]];
        }
    });
    aSpan.forEach((item) => {
        if (item.classList[0] === 'ql-color') {
            item.title = titleConfig[item.classList[0]];
        } else if (item.classList[0] === 'ql-background') {
            item.title = titleConfig[item.classList[0]];
        }
    });
}

然后在index.js 里面引入，mounted里面调取下即可。

import { addQuillTitle } from './qulEditor.js'

  mounted() {
    addQuillTitle()
    console.log('this is Quill instance:', this.editor)
  },