Vue-Quill-Editor工具栏出现提示的功能

最新推荐文章于 2025-05-15 18:12:05 发布

chenjianz

最新推荐文章于 2025-05-15 18:12:05 发布

阅读量7.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： quill富文本文章标签： vue Quill-Editor quill工具栏提示

本文链接：https://blog.youkuaiyun.com/chenjianz/article/details/100136627

本文介绍了如何在Vue-Quill-Editor的工具栏上为各个按钮添加提示语，提供了两种实现方法：一是定义工具栏数据对象；二是采用更全面的工具栏配置方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工具栏各个按钮中出现相对应的提示语比如’加粗’按钮
富文本工具栏提示
第一种方法:
定义一个工具栏数据对象,在script下面定义或者在data(){return{}}里定义也行

<script scoped>
	 // 标题
    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": "清除字体样式",
      "ql-upload": "文件"
    };
    export default {
	  data() {
	      return{}
	  }
	  methods:{
		    addQuillTitle() {
				    const