quill工具欄出現提示的功能


 <script scoped>
         // 標題
       const titleConfig=[
            {Choice:'.ql-bold',title:'加粗'},
            {Choice:'.ql-italic',title:'斜體'},
            {Choice:'.ql-underline',title:'下划線'},
            {Choice:'.ql-header',title:'段落格式'},
            {Choice:'.ql-strike',title:'刪除線'},
            {Choice:'.ql-blockquote',title:'塊引用'},
            {Choice:'.ql-code',title:'插入代碼'},
            {Choice:'.ql-code-block',title:'插入代碼段'},
            {Choice:'.ql-font',title:'字體'},
            {Choice:'.ql-size',title:'字體大小'},
            {Choice:'.ql-list[value="ordered"]',title:'編號列表'},
            {Choice:'.ql-list[value="bullet"]',title:'項目列表'},
            {Choice:'.ql-direction',title:'文本方向'},
            {Choice:'.ql-header[value="1"]',title:'h1'},
            {Choice:'.ql-header[value="2"]',title:'h2'},
            {Choice:'.ql-align',title:'對齊方式'},
            {Choice:'.ql-color',title:'字體顏色'},
            {Choice:'.ql-background',title:'背景顏色'},
            {Choice:'.ql-image',title:'圖像'},
            {Choice:'.ql-video',title:'視頻'},
            {Choice:'.ql-link',title:'添加鏈接'},
            {Choice:'.ql-formula',title:'插入公式'},
            {Choice:'.ql-clean',title:'清除字體格式'},
            {Choice:'.ql-script[value="sub"]',title:'下標'},
            {Choice:'.ql-script[value="super"]',title:'上標'},
            {Choice:'.ql-indent[value="-1"]',title:'向左縮進'},
            {Choice:'.ql-indent[value="+1"]',title:'向右縮進'},
            {Choice:'.ql-header .ql-picker-label',title:'標題大小'},
            {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'標題一'},
            {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'標題二'},
            {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'標題三'},
            {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'標題四'},
            {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'標題五'},
            {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'標題六'},
            {Choice:'.ql-header .ql-picker-item:last-child',title:'標准'},
            {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小號'},
            {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大號'},
            {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大號'},
            {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'標准'},
            {Choice:'.ql-align .ql-picker-item:first-child',title:'居左對齊'},
            {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中對齊'},
            {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右對齊'},
            {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'兩端對齊'}
        ];
        export default {
          data() {
              return{}
          }
         mounted() {
             autotip:{
                  document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''
                  for(let item of titleConfig){
                      let tip = document.querySelector('.quill-editor '+ item.Choice)
                      if (!tip) continue
                      tip.setAttribute('title',item.title)
                  }
              }
          },
        }
    </script>

 注意:let tip = document.querySelector('.quill-editor '+ item.Choice)這一行中的‘.quill-editor ’引號里后面有一個空格,如果把空格刪掉,這段代碼就不生效了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM