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

---

在编辑器中增加文本样式选择器，支持3种样式：

1. 标题：18px，加粗，line-height:3em；

2. 副标题：16px，加粗，line-height:3em；

3. 图片说明：14px, 正常，居中； （小问题难了好久，也想到了很多解决的方法）

---

效果图：

解决选择器 <script>

1.  
    
2.  
   //font-style
3.  
   var fonts = ['Title', 'Subtitle', 'Annotation'];
4.  
   var Font = Quill.import('formats/font');
5.  
   Font.whitelist = fonts;
6.  
   Quill.register(Font, true);
7.  
    
8.  
   const toolbarOptions = [
9.  
   [{ 'font': fonts }],//增加样式到工具栏
10.  
    ]

---

<style>.css

1.  
    
2.  
   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Title]::before,
3.  
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Title]::before {
4.  
   content: "标题";
5.  
   }
6.  
   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Subtitle]::before,
7.  
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Subtitle]::before {
8.  
   content: "副标题";
9.  
   }
10.  
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Annotation]::before,
11.  
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Annotation]::before {
12.  
    content: "图片标注";
13.  
    }
14.  
    .ql-font-Title {
15.  
    font-size: 18px;
16.  
    font-weight: bold;
17.  
    line-height: 3em;
18.  
    }
19.  
    .ql-font-Subtitle {
20.  
    font-size: 16px;
21.  
    font-weight: bold;
22.  
    line-height: 3em;
23.  
    }
24.  
    .ql-font-Annotation {
25.  
    font-size: 14px;
26.  
    display: block;
27.  
    text-align: center;
28.  
    }

---

以上就完美解决需求了；

但是坑就是那个居中的要求，一开始只加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;强制将它改成块元素。

里面讲解了行内元素和块元素的差异和用处；必须牢记里边的元素标签！！！

---

想法：

如果不是我这种情况下，该如何解决呢？

通过踩这个坑我学习了以下方法

方法一：quill的方法给其添加dom节点

通过quill的方法给其添加dom节点，然后通过quill的文档介绍给添加外来样式，比如添加引用vuetify中的各种自带的样式，应该Element或者其他的都一样吧

类似代码如下，可以借鉴：

1.  
   // 添加vuetify中的font-weight-bold
2.  
   let Parchment = Quill.import('parchment')
3.  
   class BoldClassAttributor extends Parchment.Attributor.Class {
4.  
   add(domNode) {
5.  
   domNode.setAttribute('class', 'font-weight-bold')
6.  
   return true
7.  
   }
8.  
   remove(domNode) {
9.  
   domNode.removeAttribute('class', 'font-weight-bold')
10.  
    }
11.  
    }
12.  
    let boldClass = new BoldClassAttributor('bold', 'font-weight', {
13.  
    scope: Parchment.Scope.INLINE,
14.  
    })
15.  
    Quill.register(boldClass, true)

---

方法二 在其选中的文字添加一个<p>标签

方法二的想法就是给这个包裹这个文本域的外层框添加一个事件，这个事件就是用来获取鼠标选中的文字，当这个文字拿到以后，用js创建一个标签放到那种独占一行的标签里，然后用js给个标签添加样式水平居中

可以参考的文章如下：

获取网页中鼠标获得的文字：前端|获取网页中鼠标选中文字_51CTO博客_html鼠标悬停显示文字

为文本框选中的文字添加标签：JavaScript为文本框内选中文字添加标签 - 杨圣青 - 博客园

因为和我做的需求不一样，且看着很麻烦，我只尝试了一半，按道理是绝对行得通的，在一些特定的场景下；

我这个菜鸡还是老老实实啃css吧，绕的弯路太大了，哎┭┮﹏┭┮

这篇好文章是转载于：学新通技术网