yang

src/components/Editor/index.vue

@@ -42,7 +42,8 @@ export default {
             ["blockquote", "code-block"],                    // 引用  代码块
             [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
             [{ indent: "-1" }, { indent: "+1" }],            // 缩进
-            [{ size: ["small", false, "large", "huge"] }],   // 字体大小
+            // [{ size: ["small", "large", "huge"] }],   // 字体大小
+            [{ size: [ '14', '16', '18', '20', '24', '28', '32', '36'] }],
             [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
             [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
             [{ align: [] }],                                 // 对齐方式
@@ -138,7 +139,7 @@ export default {
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px";
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+/* .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
   content: "10px";
 }
@@ -149,8 +150,91 @@ export default {
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
   content: "32px";
+}  */
+
+/* 自定义字号 */
+.ql-editor .ql-size-16 {
+  font-size: 16px;
+}
+.ql-editor .ql-size-18 {
+  font-size: 18px;
+}
+.ql-editor .ql-size-20 {
+  font-size: 20px;
+}
+.ql-editor .ql-size-24 {
+  font-size: 24px;
+}
+.ql-editor .ql-size-28 {
+  font-size: 28px;
+}
+.ql-editor .ql-size-32 {
+  font-size: 32px;
+}
+.ql-editor .ql-size-36 {
+  font-size: 36px;
 }
 
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: '14px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
+  content: '16px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
+  content: '18px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
+  content: '20px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
+  content: '24px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
+  content: '28px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
+  content: '32px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
+  content: '36px';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
+  font-size: 16px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
+  font-size: 20px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
+  font-size: 24px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
+  font-size: 28px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
+  font-size: 32px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
+  font-size: 36px;
+}
+/* 自定义字号end */
+
+
+
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
@@ -192,4 +276,11 @@ export default {
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";
 }
+
+/*设置滚动*/
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border-color: #ccc;
+  height: 125px;
+  overflow: auto;
+}
 </style>
\ No newline at end of file