在编辑器中增加文本样式选择器，支持3种样式：
1. 标题：18px，加粗，line-height:3em；
2. 副标题：16px，加粗，line-height:3em；
3. 图片说明：14px, 正常，居中； （小问题难了好久，也想到了很多解决的方法）
效果图：
解决选择器 <script>
//font-style
var fonts = ['Title', 'Subtitle', 'Annotation'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts;
Quill.register(Font, true);
const toolbarOptions = [
[{ 'font': fonts }],//增加样式到工具栏
]<style>.css
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Title]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Title]::before {
content: "标题";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Subtitle]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Subtitle]::before {
content: "副标题";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Annotation]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Annotation]::before {
content: "图片标注";
}
.ql-font-Title {
font-size: 18px;
font-weight: bold;
line-height: 3em;
}
.ql-font-Subtitle {
font-size: 16px;
font-weight: bold;
line-height: 3em;
}
.ql-font-Annotation {
font-size: 14px;
display: block;
text-align: center;
}以上就完美解决需求了；
但是坑就是那个居中的要求，一开始只加text-align：center是不能生效的，因为它的内容是在span标签中的。
所以问题就是span是行内元素，要想居中就必须将其转化为块级元素，所以要还要添加上display：block 才能解决
1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
3、例子：链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。
详解文章可以参考display:block详解_yura.的博客-CSDN博客_display: block;
里面讲解了行内元素和块元素的差异和用处；必须牢记里边的元素标签！！！
想法：
如果不是我这种情况下，该如何解决呢？
通过踩这个坑我学习了以下方法
方法一：quill的方法给其添加dom节点
通过quill的方法给其添加dom节点，然后通过quill的文档介绍给添加外来样式，比如添加引用vuetify中的各种自带的样式，应该Element或者其他的都一样吧
类似代码如下，可以借鉴：
// 添加vuetify中的font-weight-bold
let Parchment = Quill.import('parchment')
class BoldClassAttributor extends Parchment.Attributor.Class {
add(domNode) {
domNode.setAttribute('class', 'font-weight-bold')
return true
}
remove(domNode) {
domNode.removeAttribute('class', 'font-weight-bold')
}
}
let boldClass = new BoldClassAttributor('bold', 'font-weight', {
scope: Parchment.Scope.INLINE,
})
Quill.register(boldClass, true)方法二 在其选中的文字添加一个<p>标签
方法二的想法就是给这个包裹这个文本域的外层框添加一个事件，这个事件就是用来获取鼠标选中的文字，当这个文字拿到以后，用js创建一个标签放到那种独占一行的标签里，然后用js给个标签添加样式水平居中
可以参考的文章如下：
获取网页中鼠标获得的文字：前端|获取网页中鼠标选中文字_51CTO博客_html鼠标悬停显示文字
为文本框选中的文字添加标签：JavaScript为文本框内选中文字添加标签 - 杨圣青 - 博客园
因为和我做的需求不一样，且看着很麻烦，我只尝试了一半，按道理是绝对行得通的，在一些特定的场景下；
我这个菜鸡还是老老实实啃css吧，绕的弯路太大了，哎┭┮﹏┭┮
