Преглед изворни кода

1、7.8 web个人介绍格式优化;

huan-jie пре 4 година
родитељ
комит
29a67cd2e3
1 измењених фајлова са 49 додато и 2 уклоњено
  1. 49 2
      components/editor.vue

+ 49 - 2
components/editor.vue

@@ -63,8 +63,8 @@ export default {
             ["blockquote"],
             [{ list: "ordered" }, { list: "bullet" }],
             [{ indent: "-1" }, { indent: "+1" }],
-            [{ size: ["small", false, "large", "huge"] }],
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
+            [{ size: [false, "small", "large", "huge"] }],
+            [{ header: [false, 1, 2, 3, 4, 5, 6] }],
             [{ font: [] }],
             [{ color: [] }, { background: [] }],
             [{ align: [] }],
@@ -196,6 +196,47 @@ export default {
 };
 </script>
 
+<style>
+/* editor: custom style & custom content */
+/* font-size */
+.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: "S" !important;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: "L" !important;
+}
+.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: "H" !important;
+}
+/* header */
+.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: "H1" !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: "H2" !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: "H3" !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: "H4" !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: "H5" !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: "H6" !important;
+}
+</style>
 <style lang="scss">
 .my-editor {
   position: relative;
@@ -217,4 +258,10 @@ export default {
     display: inline-block;
   }
 }
+strong {
+  font-weight: bold !important;
+}
+em {
+  font-style: italic !important;
+}
 </style>