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 ’引号里后面有一个空格,如果把空格删掉,这段代码就不生效了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗