首页 > 其他 > 详细

quill工具栏出现提示的功能

时间:2020-07-20 19:47:09      阅读:381      评论:0      收藏:0      [点我收藏+]
 <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>

 

quill工具栏出现提示的功能

原文:https://www.cnblogs.com/meiyanstar/p/13346355.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!