自定义字体修改

添加 style

var Font = Quill.import('attributors/style/font');
# 结果源码
<p><span style="font-family: SimSun;">宋体 测试</span></p>

添加 class

var Font = Quill.import('attributors/class/font');
# 结果源码
<p><span class="ql-font-SimSun">宋体</span></p>

例子

<!-- 富文本编辑 vue-quill-editor -->
<template>
<div class>
    <quill-editor
    v-model="contentHtml"
    ref="myQuillEditor"
    :options="editorOption"
    ></quill-editor>
</div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor, Quill } from 'vue-quill-editor';
// 图片拖拽功能 ie 不支持
// import { ImageDrop } from 'quill-image-drop-module';
// Quill.register('modules/imageDrop', ImageDrop);

var fonts = ['STXihei', 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','sans-serif'];  

var Font = Quill.import('attributors/style/font');
// var Font = Quill.import('attributors/class/font');
// var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单 
Quill.register(Font, true);

export default {
props: {
    content: {
    type: String,
    default: ""
    }
},
mounted() {
},
components: {
    'quill-editor': quillEditor
},
data() {
    return {
    // contentHtml: this.content,
    editorOption: {
        modules: {
        toolbar: {
            container: [  // 工具栏
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': fonts }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image', 'video']
            ],
            handlers: {
            // 'image': function (value) {
            //   console.log(value);
            //     if (value) {
            //         alert('自定义图片');
            //     } else {
            //       this.quill.format('image', false);
            //     }
            // }
            }
        },
        history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
        },
        // imageDrop: true,
        }
    }
    };
},
computed: {
    contentHtml: {
    get() {
        return this.content;
    },
    // setter
    set(val) {
        if (val.replace(/[^\x00-\xff]/g, '01').length >= 10 * 1024 * 1024)
        this.$message.error('富文本内容大小不得大于10M！');
        this.$emit("update:content", val);
    }
    },
},
watch: {
    // 'contentHtml'(newVal, oldVal) {
    //   if (!newVal) {
    //     return;
    //   }
    //   if (newVal == oldVal) {
    //     return;
    //   }
    //   this.$emit("update:content", newVal);
    // }
},
};
</script>
<style>
.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="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.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: "18px";
}
.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-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[data-value=STXihei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=STXihei]::before {
    content: "华文细黑";
    font-family: "STXihei";
}
.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";
}
.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";
}
.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";
}
.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";
}
.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";
}
.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";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}

.ql-font-STXihei {
font-family: "STXihei";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
</style>