Quill富文本编辑器中增加文本样式

---

在编辑器中增加文本样式选择器，支持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吧，绕的弯路太大了，哎┭┮﹏┭┮