ocpview-plus 1.3.14 → 1.3.16

package/src/components/richtextbox/richtextbox.vue

@@ -1,448 +1,448 @@
-<template>
-  <div  v-show="myConfig.visible" @keydown.enter.stop="keyDown" @blue="onEditorBlur">
-    <!-- 图片上传组件辅助-->
-    <UploadBox v-show="false" id="iviewUp"  ref="uploadbox"  class="avatar-uploader" :config="myConfig"  @success="handleSuccess" :headers="headers"/>
-    <Editor ref="myQuillEditor" :style="myConfig.editorStyle" :myConfig="myConfig" :toolbarOptions="myConfig.toolbarOptions" :value="value"  @updateValue="onEditorChange" @imgClick="imgClick" @initQuill="initQuill" />
-  </div>
-</template>
-<script>
-// 工具栏配置
-import Base from '@/components/base/controlbase.vue';
-import UploadBox from '@/components/picturebox/uploadbox.vue'
-import { Quill } from '@vueup/vue-quill'
-import Editor from './editor.vue';
-export default {
-    name: 'richtextbox',
-    components:{
-        UploadBox,Editor
-    },
-    extends: Base,
-    data () {
-        return {
-            myConfig:{
-                fileType:['jpg','jpeg','png','gif'],
-                fileSize: 2,
-                multiSelect:true,
-                editorStyle:{
-                    'height':'auto'
-                },
-                simpleFlag:false,
-                showImage:true,
-                uploadfile:'',
-                toolbarOptions:[
-                    ['bold', 'italic', 'underline', 'strike'],
-                    [{ 'header': 1 }, { 'header': 2 }],
-                    [{ list:'ordered' }, { list:'bullet' }],
-                    [{ script:'sub' }, { script:'super' }],
-                    [{ 'indent': '-1' }, { 'indent': '+1' }],
-                    [{ 'color': [] }, { 'background': [] }],
-                    [{ 'size': [false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px'] }],
-                    [{ 'font': [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana'] }],
-                    [{ header:[1, 2, 3, 4, 5, 6, false] }],
-                    [{ 'align': [] }],
-                    ["clean"]
-                ],
-              },
-          
-            quillUpdateImg:false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
-            headers:{
-                'billmoduleid':'img',
-                'billno':'img'
-                // token: sessionStorage.token
-            }, // 有的图片服务器要求请求头需要有token
-        };
-    },
-
-    mounted () {
-        //eslint-disable-next-line no-labels
-        this.onEditorFocus();
-    },
-    methods:{
-        customInit () {
-            if (!this.myConfig.simpleFlag) {
-                if (!this.myConfig.uploadfile) {
-                    this.myConfig.uploadfile = this.OmdUrl.uploadfile;
-                }
-            }
-            if (this.myConfig.showImage) {
-              this.myConfig.toolbarOptions.push(['link', 'image'])
-            }
-        },
-        onEditorBlur () {
-        // 失去焦点事件
-            this.onEditorChange(this.quill.getHTML());
-        },
-        onEditorFocus (e) {
-            if (this.myConfig.readOnly) {
-                this.quill.enable(false);
-            } else {
-                this.quill.enable(true);
-            }
-        // 获得焦点事件
-        },
-        onEditorChange (value) {
-            this.value = value;
-        // 内容改变事件
-            this.setFatherValue();
-            //this.$emit('inputValue', this.content);
-        },
-   
-        // 富文本图片上传前
-        beforeUpload () {
-        // 显示loading动画
-            this.quillUpdateImg = true;
-        },
-        imgClick(value) {
-            if (value) {
-                if (!this.myConfig.readOnly) {
-                    document.querySelector('#iviewUp input').click();
-                }
-            } else {
-                this.quill.format('image', false);
-            }
-        },
-        handleSuccess (res) {
-        // res为图片服务器返回的数据
-        // 获取富文本组件实例
-            let quill = this.quill;
-            // 如果上传成功
-            if (res.returncode === '0') {
-                // 获取光标所在位置
-                let length = quill.getSelection().index;
-                // 插入图片  res.url为服务器返回的图片地址
-                let url = '';
-                if (res.data[0].url) {
-                    url = res.url;
-                } else {
-                    if (res.data[0].fileKey) {
-                        res.data[0].filekey = res.data[0].fileKey;
-                    }
-                    url = this.OmdUrl.downfile + res.data[0].filekey;
-                }
-                quill.insertEmbed(length, 'image', url);
-                // 调整光标到最后
-                quill.setSelection(length + 1);
-            } else {
-                this.$message.error('图片插入失败');
-            }
-            // loading动画消失
-            this.quillUpdateImg = false;
-        },
-        // 富文本图片上传失败
-        uploadError () {
-        // loading动画消失
-            this.quillUpdateImg = false;
-            this.$message.error('图片插入失败');
-        },
-        addQuillTitle () {
-            // eslint-disable-next-line one-var
-            const oToolBar = document.querySelector('.ql-toolbar'),
-                aButton = oToolBar.querySelectorAll('button'),
-                aSelect = oToolBar.querySelectorAll('select');
-            aButton.forEach(function (item) {
-                if (item.className === 'ql-script') {
-                    item.value === 'sub' ? (item.title = '下标') : (item.title = '上标');
-                } else if (item.className === 'ql-indent') {
-                    item.value === '+1'
-                        ? (item.title = '向右缩进')
-                        : (item.title = '向左缩进');
-                } else {
-                    // eslint-disable-next-line no-undef
-                    item.title = titleConfig[item.classList[0]];
-                }
-            });
-            aSelect.forEach(function (item) {
-                // eslint-disable-next-line no-undef
-                item.parentNode.title = titleConfig[item.classList[0]];
-            });
-        },
-        keyDown (e) {
-            //e.stopPropagation();
-        },
-        initQuill(obj) {
-            this.quill = obj.quill;
-        },
-        setDynamicText(value) {
-          let quill = this.quill;
-          let range = quill.getSelection(true);
-          quill.insertEmbed(range.index, 'atusertag', {text:value}, Quill.sources.USER);
-          quill.setSelection(range.index + 1, Quill.sources.SILENT);
-          //quill.focus();
-          //quill.update();
-        },
-        setCustomPro(obj) {
-            if (obj) {
-                this.myConfig = Object.assign({}, this.myConfig, obj);
-            }
-            if (obj.readOnly !== undefined) {
-                this.onEditorFocus();
-            }   
-        }
-    }
-};
-</script>
-
-<style>
-  .customEditor {
-    line-height: normal !important;
-  }
-  .ql-snow .ql-tooltip[data-mode=link]::before {
-    content: "请输入链接地址:";
-  }
-  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-    border-right: 0px;
-    content: '保存';
-    padding-right: 0px;
-  }
-
-  .ql-snow .ql-tooltip[data-mode=video]::before {
-    content: "请输入视频地址:";
-  }
-
-.ql-snow .ql-picker.ql-size .ql-picker-label::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item::before {
-  content: "四号";
-  font-size: 14px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
-  content: "四号";
-  font-size: 14px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
-  content: "初号";
-  font-size: 42px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
-  content: "小初";
-  font-size: 36px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
-  content: "一号";
-  font-size: 26px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
-  content: "小一";
-  font-size: 24px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
-  content: "二号";
-  font-size: 22px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
-  content: "小二";
-  font-size: 18px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
-  content: "三号";
-  font-size: 16px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
-  content: "小三";
-  font-size: 15px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
-  content: "小四";
-  font-size: 12px;
-}
-
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10.5px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10.5px"]::before {
-  content: "五号";
-  font-size: 10.5px;
-}
-
-
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before {
-  content: "小五";
-  font-size: 9px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="7.5px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="7.5px"]::before {
-  content: "六号";
-  font-size: 7.5px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="6.5px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="6.5px"]::before {
-  content: "小六";
-  font-size: 6.5px;
-}
-
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5.5px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5.5px"]::before {
-  content: "七号";
-  font-size: 5.5px;
-}
-
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5px"]::before {
-  content: "八号";
-  font-size: 5px;
-}
-
-.ql-snow .ql-picker.ql-header .ql-picker-label::before,
-  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
-    content: '文本';
-  }
-  .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: '标题1';
-  }
-  .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: '标题2';
-  }
-  .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: '标题3';
-  }
-  .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: '标题4';
-  }
-  .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: '标题5';
-  }
-  .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: '标题6';
-  }
-
-  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
-  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
-    content: '黑体';
-  }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
-  content: "宋体";
-  font-family: SimSun,sans-serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
-  content: "楷体";
-  font-family: KaiTi,sans-serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
-  content: "仿宋";
-  font-family: FangSong,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
-  content: "黑体";
-  font-family: SimHei,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
-  content: "微软雅黑";
-  font-family: Microsoft YaHei,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='PmingLiu']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='PmingLiu']::before {
-  content: "PmingLiu";
-  font-family: PmingLiu,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Impact']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Impact']::before {
-  content: "Impact";
-  font-family: Impact,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Georgia']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Georgia']::before {
-  content: "Georgia";
-  font-family: Georgia,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Tahoma']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Tahoma']::before {
-  content: "Tahoma";
-  font-family: Tahoma,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
-  content: "Arial";
-  font-family: Arial,sans-serif;
-}
-
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Verdana']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Verdana']::before {
-  content: "Verdana";
-  font-family: Verdana,sans-serif;
-}
-.ql-font-SimSun {
-      font-family: SimSun , sans-serif;
-}
-.ql-font-KaiTi {
-      font-family: KaiTi , sans-serif;
-}
-.ql-font-FangSong {
-      font-family: FangSong , sans-serif;
-}
-.ql-font-SimHei {
-      font-family: SimHei , sans-serif;
-}
-.ql-font-KaiTi {
-      font-family: KaiTi , sans-serif;
-}
-.ql-font-Microsoft-YaHei {
-      font-family: Microsoft YaHei , sans-serif;
-}
-.ql-font-PmingLiu {
-      font-family: PmingLiu , sans-serif;
-}
-
-.ql-font-Impact {
-      font-family: Impact , sans-serif;
-}
-
-.ql-font-Georgia {
-      font-family: Georgia , sans-serif;
-}
-
-.ql-font-Tahoma {
-      font-family: Tahoma , sans-serif;
-}
-
-.ql-font-Arial {
-      font-family: Arial , sans-serif;
-}
-.ql-font-Verdana {
-      font-family: Verdana , sans-serif;
-}
-.ql-picker-options {
-    height: 300px;
-    overflow: auto;
-}
-</style>
+<template>
+  <div  v-show="myConfig.visible" @keydown.enter.stop="keyDown" @blue="onEditorBlur">
+    <!-- 图片上传组件辅助-->
+    <UploadBox v-show="false" id="iviewUp"  ref="uploadbox"  class="avatar-uploader" :config="myConfig"  @success="handleSuccess" :headers="headers"/>
+    <Editor ref="myQuillEditor" :style="myConfig.editorStyle" :myConfig="myConfig" :toolbarOptions="myConfig.toolbarOptions" :value="value"  @updateValue="onEditorChange" @imgClick="imgClick" @initQuill="initQuill" />
+  </div>
+</template>
+<script>
+// 工具栏配置
+import Base from '@/components/base/controlbase.vue';
+import UploadBox from '@/components/picturebox/uploadbox.vue'
+import { Quill } from '@vueup/vue-quill'
+import Editor from './editor.vue';
+export default {
+    name: 'richtextbox',
+    components:{
+        UploadBox,Editor
+    },
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                fileType:['jpg','jpeg','png','gif'],
+                fileSize: 2,
+                multiSelect:true,
+                editorStyle:{
+                    'height':'auto'
+                },
+                simpleFlag:false,
+                showImage:true,
+                uploadfile:'',
+                toolbarOptions:[
+                    ['bold', 'italic', 'underline', 'strike'],
+                    [{ 'header': 1 }, { 'header': 2 }],
+                    [{ list:'ordered' }, { list:'bullet' }],
+                    [{ script:'sub' }, { script:'super' }],
+                    [{ 'indent': '-1' }, { 'indent': '+1' }],
+                    [{ 'color': [] }, { 'background': [] }],
+                    [{ 'size': [false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px'] }],
+                    [{ 'font': [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana'] }],
+                    [{ header:[1, 2, 3, 4, 5, 6, false] }],
+                    [{ 'align': [] }],
+                    ["clean"]
+                ],
+              },
+          
+            quillUpdateImg:false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+            headers:{
+                'billmoduleid':'img',
+                'billno':'img'
+                // token: sessionStorage.token
+            }, // 有的图片服务器要求请求头需要有token
+        };
+    },
+
+    mounted () {
+        //eslint-disable-next-line no-labels
+        this.onEditorFocus();
+    },
+    methods:{
+        customInit () {
+            if (!this.myConfig.simpleFlag) {
+                if (!this.myConfig.uploadfile) {
+                    this.myConfig.uploadfile = this.OmdUrl.uploadfile;
+                }
+            }
+            if (this.myConfig.showImage) {
+              this.myConfig.toolbarOptions.push(['link', 'image'])
+            }
+        },
+        onEditorBlur () {
+        // 失去焦点事件
+            this.onEditorChange(this.quill.getHTML());
+        },
+        onEditorFocus (e) {
+            if (this.myConfig.readOnly) {
+                this.quill.enable(false);
+            } else {
+                this.quill.enable(true);
+            }
+        // 获得焦点事件
+        },
+        onEditorChange (value) {
+            this.value = value;
+        // 内容改变事件
+            this.setFatherValue();
+            //this.$emit('inputValue', this.content);
+        },
+   
+        // 富文本图片上传前
+        beforeUpload () {
+        // 显示loading动画
+            this.quillUpdateImg = true;
+        },
+        imgClick(value) {
+            if (value) {
+                if (!this.myConfig.readOnly) {
+                    document.querySelector('#iviewUp input').click();
+                }
+            } else {
+                this.quill.format('image', false);
+            }
+        },
+        handleSuccess (res) {
+        // res为图片服务器返回的数据
+        // 获取富文本组件实例
+            let quill = this.quill;
+            // 如果上传成功
+            if (res.returncode === '0') {
+                // 获取光标所在位置
+                let length = quill.getSelection().index;
+                // 插入图片  res.url为服务器返回的图片地址
+                let url = '';
+                if (res.data[0].url) {
+                    url = res.url;
+                } else {
+                    if (res.data[0].fileKey) {
+                        res.data[0].filekey = res.data[0].fileKey;
+                    }
+                    url = this.OmdUrl.downfile + res.data[0].filekey;
+                }
+                quill.insertEmbed(length, 'image', url);
+                // 调整光标到最后
+                quill.setSelection(length + 1);
+            } else {
+                this.$message.error('图片插入失败');
+            }
+            // loading动画消失
+            this.quillUpdateImg = false;
+        },
+        // 富文本图片上传失败
+        uploadError () {
+        // loading动画消失
+            this.quillUpdateImg = false;
+            this.$message.error('图片插入失败');
+        },
+        addQuillTitle () {
+            // eslint-disable-next-line one-var
+            const oToolBar = document.querySelector('.ql-toolbar'),
+                aButton = oToolBar.querySelectorAll('button'),
+                aSelect = oToolBar.querySelectorAll('select');
+            aButton.forEach(function (item) {
+                if (item.className === 'ql-script') {
+                    item.value === 'sub' ? (item.title = '下标') : (item.title = '上标');
+                } else if (item.className === 'ql-indent') {
+                    item.value === '+1'
+                        ? (item.title = '向右缩进')
+                        : (item.title = '向左缩进');
+                } else {
+                    // eslint-disable-next-line no-undef
+                    item.title = titleConfig[item.classList[0]];
+                }
+            });
+            aSelect.forEach(function (item) {
+                // eslint-disable-next-line no-undef
+                item.parentNode.title = titleConfig[item.classList[0]];
+            });
+        },
+        keyDown (e) {
+            //e.stopPropagation();
+        },
+        initQuill(obj) {
+            this.quill = obj.quill;
+        },
+        setDynamicText(value) {
+          let quill = this.quill;
+          let range = quill.getSelection(true);
+          quill.insertEmbed(range.index, 'atusertag', {text:value}, Quill.sources.USER);
+          quill.setSelection(range.index + 1, Quill.sources.SILENT);
+          //quill.focus();
+          //quill.update();
+        },
+        setCustomPro(obj) {
+            if (obj) {
+                this.myConfig = Object.assign({}, this.myConfig, obj);
+            }
+            if (obj.readOnly !== undefined) {
+                this.onEditorFocus();
+            }   
+        }
+    }
+};
+</script>
+
+<style>
+  .customEditor {
+    line-height: normal !important;
+  }
+  .ql-snow .ql-tooltip[data-mode=link]::before {
+    content: "请输入链接地址:";
+  }
+  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    border-right: 0px;
+    content: '保存';
+    padding-right: 0px;
+  }
+
+  .ql-snow .ql-tooltip[data-mode=video]::before {
+    content: "请输入视频地址:";
+  }
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "四号";
+  font-size: 14px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+  content: "四号";
+  font-size: 14px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
+  content: "初号";
+  font-size: 42px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
+  content: "小初";
+  font-size: 36px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
+  content: "一号";
+  font-size: 26px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
+  content: "小一";
+  font-size: 24px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
+  content: "二号";
+  font-size: 22px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
+  content: "小二";
+  font-size: 18px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
+  content: "三号";
+  font-size: 16px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
+  content: "小三";
+  font-size: 15px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
+  content: "小四";
+  font-size: 12px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10.5px"]::before {
+  content: "五号";
+  font-size: 10.5px;
+}
+
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before {
+  content: "小五";
+  font-size: 9px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="7.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="7.5px"]::before {
+  content: "六号";
+  font-size: 7.5px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="6.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="6.5px"]::before {
+  content: "小六";
+  font-size: 6.5px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5.5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5.5px"]::before {
+  content: "七号";
+  font-size: 5.5px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5px"]::before {
+  content: "八号";
+  font-size: 5px;
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: '文本';
+  }
+  .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: '标题1';
+  }
+  .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: '标题2';
+  }
+  .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: '标题3';
+  }
+  .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: '标题4';
+  }
+  .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: '标题5';
+  }
+  .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: '标题6';
+  }
+
+  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: '黑体';
+  }
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
+  content: "宋体";
+  font-family: SimSun,sans-serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
+  content: "楷体";
+  font-family: KaiTi,sans-serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
+  content: "仿宋";
+  font-family: FangSong,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
+  content: "黑体";
+  font-family: SimHei,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
+  content: "微软雅黑";
+  font-family: Microsoft YaHei,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='PmingLiu']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='PmingLiu']::before {
+  content: "PmingLiu";
+  font-family: PmingLiu,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Impact']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Impact']::before {
+  content: "Impact";
+  font-family: Impact,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Georgia']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Georgia']::before {
+  content: "Georgia";
+  font-family: Georgia,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Tahoma']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Tahoma']::before {
+  content: "Tahoma";
+  font-family: Tahoma,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
+  content: "Arial";
+  font-family: Arial,sans-serif;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Verdana']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Verdana']::before {
+  content: "Verdana";
+  font-family: Verdana,sans-serif;
+}
+.ql-font-SimSun {
+      font-family: SimSun , sans-serif;
+}
+.ql-font-KaiTi {
+      font-family: KaiTi , sans-serif;
+}
+.ql-font-FangSong {
+      font-family: FangSong , sans-serif;
+}
+.ql-font-SimHei {
+      font-family: SimHei , sans-serif;
+}
+.ql-font-KaiTi {
+      font-family: KaiTi , sans-serif;
+}
+.ql-font-Microsoft-YaHei {
+      font-family: Microsoft YaHei , sans-serif;
+}
+.ql-font-PmingLiu {
+      font-family: PmingLiu , sans-serif;
+}
+
+.ql-font-Impact {
+      font-family: Impact , sans-serif;
+}
+
+.ql-font-Georgia {
+      font-family: Georgia , sans-serif;
+}
+
+.ql-font-Tahoma {
+      font-family: Tahoma , sans-serif;
+}
+
+.ql-font-Arial {
+      font-family: Arial , sans-serif;
+}
+.ql-font-Verdana {
+      font-family: Verdana , sans-serif;
+}
+.ql-picker-options {
+    height: 300px;
+    overflow: auto;
+}
+</style>