vue+elementui+自定义Vue-Quill-Editor富文本框（一）

置顶一颗柚

已于 2022-07-19 17:21:07 修改

阅读量3k

点赞数 5

分类专栏： vue 文章标签： vue.js elementui 编辑器

于 2022-07-19 17:16:52 首次发布

本文链接：https://blog.csdn.net/ccsundhine/article/details/125867053

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Quill官方中文文档：http://static.kancloud.cn/liuwave/quill/1434140
在这里插入图片描述
其中有自定义字体大小、行高、行间距、链接、上传视频上传图片到服务器（后续有时间会拆分）

安装依赖Vue-Quill-Editor

 npm install vue-quill-editor --save

完整代码（可按照自己的需求参照官网配置全局使用还是组件使用）

<template>
	<div>
	 <el-form
	      ref="articleForm"
	      label-width="100px"
	      :model="articleForm"
	      :rules="rules"
	      style="width: 60%"
	    >
	      <el-form-item label="文章内容" prop="artContent" style="height: 350px">
	        <quill-editor
	          ref="myQuillEditor"
	          v-model="articleForm.artContent"
	          v-screen
	          class="quilleditor"
	          :options="editorOption"
	          style="height: 265px"
	        />
	        <!-- 图片上传 -->
	        <el-upload
	          ref="Quillupload"
	          :action="action"
	          :before-upload="bfUpload"
	          class="pictureQuill"
	          :file-list="fileListQuill"
	          :headers="headers"
	          list-type="picture-card"
	          :on-success="handleSuccessQuill"
	          style="display: none"
	        >
	          <i class="el-icon-plus"></i>
	        </el-upload>
	        <!-- 视频上传 -->
	        <el-upload
	          :action="action"
	          :before-upload="beforeUploadVideo"
	          class="pictureQuillVideo"
	          :headers="headers"
	          :on-progress="uploadVideoProcess"
	          :on-success="handleVideoSuccess"
	          :show-file-list="false"
	          style="display: none"
	        >
	          <video
	            v-if="videoForm.showVideoPath != '' && !videoFlag"
	            controls
	            height="100"
	            :src="videoForm.showVideoPath"
	            width="400"
	          >
	            您的浏览器不支持视频播放
	          </video>
	          <i
	            v-else-if="videoForm.showVideoPath == '' && !videoFlag"
	            class="el-icon-plus avatar-uploader-icon"
	          ></i>
	          <el-progress
	            v-if="videoFlag == true"
	            :percentage="videoUploadPercent"
	            style="margin-top: 7px"
	            type="circle"
	          />
	        </el-upload>
	      </el-form-item>
	    </el-form
	</div>
</template>
<script>
	import { quillEditor } from 'vue-quill-editor'
	import * as Quill from 'quill'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import '../../../assets/css/quillEditor.css'  //自定义css
	import { mapGetters } from 'vuex' //上传图片、视频需要token（按自己需求配置）
    import { uploadURL } from '@/config' //上传图片、视频接口（按自己需求配置）
    import { addQuillTitle } from './components/quill-title.js'  //设置工具栏鼠标悬浮中文提示
    import screen from '@/directive/screen' //设置最大化和最小化
  	 // 字体
	  var fonts = [
	    'SimHei',
	    'SimSun',
	    'Microsoft-YaHei',
	    'KaiTi',
	    'FangSong',
	    'Arial',
	    'sans-serif',
	  ]   
	  var Font = Quill.import('formats/font')
	  Font.whitelist = fonts
	  Quill.register(Font, true)
	  // 字体大小
	  var sizes = [false, '14px', '16px', '18px', '20px', '22px', '24px', '26px']
	  var Size = Quill.import('formats/size')
	  Size.whitelist = sizes
	  // 行高
  import { lineHeightStyle } from './components/lineHeight.js'
  Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
   // 行间距
  import { letterSpacingStyle } from './components/letterSpacing.js'
  Quill.register({ 'formats/letterSpacing': letterSpacingStyle }, true)
  // 链接
  var Link = Quill.import('formats/link')
  class MyLink extends Link {
    static create(value) {
      let node = super.create(value)
      value = this.sanitize(value)
      if (!value.startsWith('http')) {
        value = 'http://' + value
      }
      node.setAttribute('href', value)
      return node
    }
  }
  Quill.register(MyLink)
   // 视频
  import Video from './components/video.js'
  Quill.register(Video, true)
  // 工具栏配置
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    // [{ header: '1' }, { header: '2' }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ size: sizes }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ header: [false, 1, 2, 3, 4, 5, 6] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ font: fonts }], // 字体种类-----[{ font: [] }]
    [{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }], //行高
    [{ letterSpacing: [ 'initial','2px','4px', '6px','8px','10px', '12px', '14px', '16px'],},], //行间距
    ['link', 'image', 'video'], // 链接、图片、视频-----['link', 'image', 'video']
    ['clean'], // 清除文本格式-----['clean']
    ]
	export default {
	  components: {
	    quillEditor
	  }
	   directives: { screen },//最大化最小化
	   data(){
		   return{
		   	 articleForm: {
                 artContent: '',
             },
             rules:{},
             headers: {},
             action: uploadURL,
             fileListQuill: [],
             editorOption: {
		          modules: {
		            toolbar: {
		              container: toolbarOptions, //自定义工具栏
		              handlers: {
		                letterSpacing: function (value) {
		                  if (value) {
		                    this.quill.format('letterSpacing', value)
		                  } else {
		                    console.log(value)
		                  }
		                },
		                lineheight: function (value) {
		                  if (value) {
		                    this.quill.format('lineHeight', value)
		                  } else {
		                    console.log(value)
		                  }
		                },
		                image: function (value) {
		                  if (value) {
		                    document.querySelector('.pictureQuill input').click()
		                  } else {
		                    this.quill.format('image', false)
		                  }
		                },
		                video: function (value) {
		                  if (value) {
		                    document.querySelector('.pictureQuillVideo input').click()
		                  } else {
		                    this.quill.format('video', false)
		                  }
		                },
		              },
		            },
		          },
		          //主题
		          theme: 'snow',
		          placeholder: '请输入正文',
		        },
	        //视频
	        videoFlag: false,
	        //是否显示进度条
	        videoUploadPercent: '',
	        //进度条的进度，
	        isShowUploadVideo: false,
	        //显示上传按钮
	        videoForm: {
	          showVideoPath: '',
	        },
	       }
	   },
	    computed: {
	      ...mapGetters({
	        token: 'user/token',//token按自己的需求
	      }),
	      editor() {
	        return this.$refs.myQuillEditor.quill
	      },
	    },
	      created() {
		      this.headers['Authorization'] = `Bearer ${this.token}`
		    },
		    mounted() {
		      // 富文本工具栏提示
		      addQuillTitle()
		      //解决文本框赋值后获取焦点
		      this.$refs.myQuillEditor.quill.enable(false)
		      this.$nextTick(function () {
		        this.$refs.myQuillEditor.quill.enable(true)
		        this.$refs.myQuillEditor.quill.blur()
		      })
		    },
		    methods:{
	     	// 富文本框上传图片回调
		      bfUpload(file) {
		        if (
		          'image/png' == file.type ||
		          'image/jpeg' == file.type ||
		          'image/jpg' == file.type
		        ) {
		          console.log()
		        } else {
		          this.ME('图片上传失败,请上传png,jpeg,jpg格式')
		          return false
		        }
		      },
		      // 富文本框上传图片
		      handleSuccessQuill(response, file) {
		        this.fileListQuill.push({ url: response.data.filePath })
		        let quill = this.$refs.myQuillEditor.quill
		        if (response.data.filePath) {
		          let length = quill.getSelection().index
		          quill.insertEmbed(length, 'image', response.data.filePath)
		          quill.setSelection(length + 1)
		        }
		      },
		      //富文本上传视频回调
		      beforeUploadVideo(file) {
		        var fileSize = file.size / 1024 / 1024 < 50
		        if (
		          [
		            'video/mp4',
		            'video/ogg',
		            'video/flv',
		            'video/avi',
		            'video/wmv',
		            'video/rmvb',
		            'video/mov',
		          ].indexOf(file.type) == -1
		        ) {
		          this.$message.error('请上传正确的视频格式')
		          return false
		        }
		        if (!fileSize) {
		          this.$message.error('视频大小不能超过50MB')
		          return false
		        }
		        this.isShowUploadVideo = false
		      },
		      //进度条
		      uploadVideoProcess(event, file, fileList) {
		        this.videoFlag = true
		        this.videoUploadPercent = file.percentage.toFixed(0) * 1
		      },
		      //富文本上传视频
		      handleVideoSuccess(res, file) {
		        this.isShowUploadVideo = true
		        this.videoFlag = false
		        this.videoUploadPercent = 0
		        let quill = this.$refs.myQuillEditor.quill
		        this.videoForm.showVideoPath = res.data.filePath
		        if (res.data.filePath) {
		          let length = quill.getSelection().index
		          quill.insertEmbed(length, 'video', res.data.filePath)
		          quill.setSelection(length + 1)
		        }
		      },
         },
	}
</script>

字符间距 letterSpacing.js文件

import Quill from 'quill'
let Parchment = Quill.import('parchment')
console.log('Parchment', Parchment)
// 字符间距
class letterSpacingAttributor extends Parchment.Attributor.Style {}
const letterSpacingStyle = new letterSpacingAttributor(
  'letter-spacing',
  'letterSpacing',
  {
    scope: Parchment.Scope.INLINE,
    whitelist: [
      'initial',
      '2px',
      '4px',
      '6px',
      '8px',
      '10px',
      '12px',
      '14px',
      '16px',
    ],
  }
)
export { letterSpacingStyle }

行高lineHeight.js文件

import Quill from 'quill'
let Parchment = Quill.import('parchment')
console.log('Parchment', Parchment)

// 行高
class lineHeightAttributor extends Parchment.Attributor.Style {}
const lineHeightStyle = new lineHeightAttributor('lineHeight', 'line-height', {
  scope: Parchment.Scope.INLINE,
  whitelist: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'],
})

export { lineHeightStyle }

设置工具栏鼠标悬浮中文提示quill-title.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': '清除字体样式',
  'ql-lineheight': '行高',
  'ql-letterSpacing': '字符间距',
}

export function addQuillTitle() {
  const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect = oToolBar.querySelectorAll('select')
  aButton.forEach(function (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 {
      item.title = titleConfig[item.classList[0]]
    }
  })
  aSelect.forEach(function (item) {
    item.parentNode.title = titleConfig[item.classList[0]]
  })
}

上传视频video.js文件

import { Quill } from 'vue-quill-editor'
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')
const ATTRIBUTES = ['height', 'width']
class Video extends BlockEmbed {
  static create(value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls') // 控制播放器
    //删除原生video的控制条的下载或者全屏按钮的方法
    //<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>
    //不用哪个在下面加上哪个
    node.setAttribute('controlsList', 'nofullscreen') // 控制删除
    node.setAttribute('type', 'video/mp4')
    node.setAttribute('style', 'object-fit:fill;width: 100%;')
    node.setAttribute('preload', 'auto') // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频
    node.setAttribute('playsinline', 'true')
    node.setAttribute('x-webkit-airplay', 'allow')
    // node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性
    node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏
    node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放
    node.setAttribute('x5-video-player-fullscreen', 'true') // 全屏设置，设置为 true 是防止横屏
    node.setAttribute('src', this.sanitize(value))
    return node
  }
  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }
  static sanitize(url) {
    return Link.sanitize(url)
  }
  static value(domNode) {
    return domNode.getAttribute('src')
  }
  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }
  html() {
    const { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' // 不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe

export default Video

最大化和最小化新建directive指令文件夹screen.js文件

const domList = [
  {
    dom: `<svg  t="1637824425355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10463"><path d="M243.2 780.8v-179.2H153.6v179.2c0 49.28 40.32 89.6 89.6 89.6h179.2v-89.6H243.2zM780.8 153.6h-179.2v89.6h179.2v179.2h89.6V243.2c0-49.28-40.32-89.6-89.6-89.6zM243.2 243.2h179.2V153.6H243.2c-49.28 0-89.6 40.32-89.6 89.6v179.2h89.6V243.2z m537.6 537.6h-179.2v89.6h179.2c49.28 0 89.6-40.32 89.6-89.6v-179.2h-89.6v179.2z" p-id="10464" fill="#000000"></path></svg>`,
    tit: '最大化',
    id: 'maxId',
    display: 'block',
  },
  {
    dom: `<svg t="1637824296192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6336"><path d="M341.065143 910.189714v-146.285714c0-53.686857-43.885714-97.572571-97.572572-97.572571h-146.285714a48.786286 48.786286 0 0 0 0 97.499428h146.285714v146.285714a48.786286 48.786286 0 1 0 97.499429 0z m-292.571429-617.910857c0 26.916571 21.796571 48.786286 48.713143 48.786286h146.285714c53.686857 0 97.572571-43.885714 97.572572-97.572572v-146.285714a48.786286 48.786286 0 0 0-97.499429 0v146.285714h-146.285714a48.786286 48.786286 0 0 0-48.786286 48.786286z m910.409143 0a48.786286 48.786286 0 0 0-48.713143-48.786286h-146.285714v-146.285714a48.786286 48.786286 0 1 0-97.499429 0v146.285714c0 53.686857 43.885714 97.572571 97.499429 97.572572h146.285714a48.786286 48.786286 0 0 0 48.713143-48.786286z m0 422.765714a48.786286 48.786286 0 0 0-48.713143-48.713142h-146.285714c-53.686857 0-97.572571 43.885714-97.572571 97.572571v146.285714a48.786286 48.786286 0 1 0 97.499428 0v-146.285714h146.285714a48.786286 48.786286 0 0 0 48.786286-48.786286z" fill="#000000" p-id="6337"></path></svg>`,
    tit: '还原',
    id: 'minId',
    display: 'none',
  },
]
export default {
  bind(el, binding, vnode, oldVnode) {
    console.log(el, binding, vnode, oldVnode)
    setTimeout(() => {
      let dialogHeaderEl = el.querySelector('.ql-toolbar')
      domList.map((item) => {
        let dom = document.createElement('span')
        dom.className = 'ql-formats'
        dom.style.float = 'right'
        dom.style.marginTop = '5px'
        dom.innerHTML = `<button title="${item.tit}" style="display:${item.display};" id="${item.id}"  type="button" class="ql-clean">${item.dom}</button>`
        dialogHeaderEl.appendChild(dom)
      })
      //最大化
      document.getElementById('maxId').onclick = () => {
        el.style.width = 100 + 'vw'
        el.style.height = 100 + 'vh'
        el.style.position = 'fixed'
        el.style.top = 0
        el.style.left = 0
        el.style.zIndex = 99999
        el.style.background = 'white'
        document.getElementById('maxId').style.display = 'none'
        document.getElementById('minId').style.display = 'block'
      }
      //最小化
      document.getElementById('minId').onclick = () => {
        el.style.width = 'auto'
        el.style.height = '265px'
        el.style.position = 'inherit'
        el.style.zIndex = 9
        document.getElementById('maxId').style.display = 'block'
        document.getElementById('minId').style.display = 'none'
      }
    }, 0)
  },
}

新建一个quillEditor.css文件

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}

/* 字号设置 */
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '字号大小';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="字号大小"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '默认';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}

.ql-size-14px {
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}

.ql-size-16px {
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}

.ql-size-18px {
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}

.ql-size-20px {
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
}

.ql-size-22px {
  font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}

.ql-size-24px {
  font-size: 24px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
}

.ql-size-26px {
  font-size: 26px;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
  content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="行高"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
  content: '默认';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
  content: '1px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
  content: '1.5px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
  content: '1.75px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
  content: '2px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
  content: '3px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
  content: '4px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
  content: '5px';
}
.ql-snow .ql-picker.ql-lineheight {
  width: 70px;
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item::before {
  content: '字符间距';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="字符间距"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='initial']::before {
  content: '默认';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="2px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='2px']::before {
  content: '2px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="4px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='4px']::before {
  content: '4px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="6px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='6px']::before {
  content: '6px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='8px']::before {
  content: '8px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='10px']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='16px']::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-letterSpacing {
  width: 90px;
}


/* 标题 */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '标题大小' !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="标题1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1'!important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2'!important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3'!important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4'!important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5'!important;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6'!important;
}