quill富文本编辑器 自定义字体和大小 以及提交和回显

第一步：引入quill样式，我是下载到本地了
<!-- 主题样式 -->
<link rel="stylesheet" href="${request.contextPath}/statics/css/quill.snow.css">
<link rel="stylesheet" href="${request.contextPath}/statics/css/quill.bubble.css">
<link rel="stylesheet" href="${request.contextPath}/statics/css/quill.core.css">

第二步：引入js
<script src="${request.contextPath}/statics/js/quill.js"></script>
<script src="${request.contextPath}/statics/js/quill.min.js"></script> 

第三步：html部分代码

<div class="form-group">
    <div class="col-sm-2 control-label">内容</div>
    <div class="col-sm-10 ql-snow">
        <div id="content" class="ql-editor" style="height: 800px" v-model="messageInfo.content"></div>
    </div>
</div>

第四步：

quill: function(){
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{ header: 1 }, { header: 2 }],               // custom button values
        [{ list: 'ordered'}, { list: 'bullet' }],
        [{ script: 'sub'}, { script: 'super' }],      // superscript/subscript
        [{ indent: '-1'}, { indent: '+1' }],          // outdent/indent
        [{ direction: 'rtl' }],                         // text direction

        [{ size: ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }],          // dropdown with defaults from
        //theme
        [{ font: [] }],
        [{ align: [] }],
        ['link', 'image'],
        ['clean']                                         // remove formatting button
    ];

    var options = {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: 'Compose an epic...',
        readOnly: false,
        theme: 'snow'
    };

    const quill = new Quill('#content',options);

获取富文本里面的数据：

const content = document.querySelector('#content').children[0].innerHTML

回显方式：

const content = document.querySelector('#content').children[0].innerHTML
quill.pasteHTML(vm.helpCenter.content + content)

设置字体格式：

在html处引入自定义的字体格式css

css：

.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-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";
}

在js中加入
//字体样式
var fonts = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单

下面的font改成：

[{ font: fonts }],

设置字体大小：

在html处引入自定义的字体大小css
css：

.ql-snow .ql-picker.ql-size,
.ql-snow .ql-picker.ql-header {
    width: 75px !important;
}

.ql-snow .ql-picker.ql-font {
    width: 80px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: '10px';
    font-size: 16px;
}

.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: '12px';
    font-size: 16px;
}

.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: '14px';
    font-size: 16px;
}

.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: '16px';
    font-size: 16px;
}

.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: '18px';
    /*font-size: 18px;*/
    font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: '20px';
    font-size: 16px;
    /*font-size: 20px;*/
}

.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: '24px';
    font-size: 16px;
    /*font-size: 24px;*/
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: '32px';
    font-size: 16px;
    /*font-size: 32px;*/
}

.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: '36px';
    font-size: 16px;
    /*font-size: 36px;*/
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
    content: '48px';
    font-size: 16px;
    /*font-size: 48px;*/
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="64px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="64px"]::before {
    content: '64px';
    font-size: 16px;
    /*font-size: 64px;*/
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="72px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="72px"]::before {
    content: '72px';
    font-size: 16px;
    /*font-size: 72px;*/
}

js处加入：

let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px','24px','32px','36px','48px','64px','72px']
Quill.register(Size, true)

然后下面size：

[{ size: ['10px', '12px', '14px', '16px', '18px', '20px','24px','32px','36px','48px','64px','72px'] }],  // custom dropdown

自定义行高：

css:

.ql-lineHeight::before {
    content: "行高：";
    position: relative;
    top: 2px;
}

.ql-lineHeight .ql-picker-label {
    left: 50px;
    top: -19px;
}

.ql-lineHeight .ql-picker-options {
    left: 40px;
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value='1-0']::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value='1-0']::before {
    content: "1.0";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-1"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-1"]::before {
    content: "1.1";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-2"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-2"]::before {
    content: "1.2";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-3"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-3"]::before {
    content: "1.3";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-4"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-4"]::before {
    content: "1.4";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-5"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-5"]::before {
    content: "1.5";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-6"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-6"]::before {
    content: "1.6";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-7"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-7"]::before {
    content: "1.7";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-8"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-8"]::before {
    content: "1.8";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="1-9"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="1-9"]::before {
    content: "1.9";
}

.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-0"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-0"]::before {
    content: "2.0";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-1"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-1"]::before {
    content: "2.1";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2.2"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-2"]::before {
    content: "2.2";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-3"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-3"]::before {
    content: "2.3";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-4"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-4"]::before {
    content: "2.4";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-5"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-5"]::before {
    content: "2.5";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-6"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-6"]::before {
    content: "2.6";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-7"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-7"]::before {
    content: "2.7";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-8"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-8"]::before {
    content: "2.8";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="2-9"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="2-9"]::before {
    content: "2.9";
}
.ql-picker.ql-lineHeight .ql-picker-label[data-value="3-0"]::before,
.ql-picker.ql-lineHeight .ql-picker-item[data-value="3-0"]::before {
    content: "3.0";
}
.ql-editor {
    max-height: 500px;
}
.ql-lineHeight-1-0 {
    line-height: 1;
}

.ql-lineHeight-1-1 {
    line-height: 1.1;
}

.ql-lineHeight-1-2 {
    line-height: 1.2;
}
.ql-lineHeight-1-3 {
    line-height: 1.3;
}
.ql-lineHeight-1-4 {
    line-height: 1.4
}
.ql-lineHeight-1-5 {
    line-height: 1.5;
}
.ql-lineHeight-1-6 {
    line-height: 1.6;
}
.ql-lineHeight-1-7 {
    line-height: 1.7;
}
.ql-lineHeight-1-8 {
    line-height: 1.8;
}
.ql-lineHeight-1-9 {
    line-height: 1.9;
}
.ql-lineHeight-2-0 {
    line-height: 2;
}
.ql-lineHeight-2-1 {
    line-height: 2.1;
}
.ql-lineHeight-2-2 {
    line-height: 2.2;
}
.ql-lineHeight-2-3 {
    line-height: 2.3;
}
.ql-lineHeight-2-4 {
    line-height: 2.4
}
.ql-lineHeight-2-5 {
    line-height: 2.5;
}
.ql-lineHeight-2-6 {
    line-height: 2.6;
}
.ql-lineHeight-2-7 {
    line-height: 2.7;
}
.ql-lineHeight-2-8 {
    line-height: 2.8;
}
.ql-lineHeight-2-9 {
    line-height: 2.9;
}
.ql-lineHeight-3-0 {
    line-height: 2;
}

js:

行高数据:

lineHeightList: ['1-0', '1-1','1-2','1-3','1-4','1-5','1-6','1-7','1-8','1-9','2-0','2-1','2-2','2-3','2-4','2-5','2-6','2-7','2-8','2-9','3-0']

const Parchment = Quill.import('parchment');
class lineHeightAttributor extends Parchment.Attributor.Class {}
const lineHeightStyle = new lineHeightAttributor(
    "lineHeight",
    "ql-lineHeight",
    {
        scope: Parchment.Scope.INLINE,
        whitelist: vm.lineHeightList
    }
);
// 注册实例
Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

下面toolber:[{ lineHeight: vm.lineHeightList}],

文件上传服务器

const quill1 = new Quill('#content',options);
var toolbar = quill1.getModule('toolbar');
toolbar.addHandler('image', imageUpload);

function imageUpload(value)
{
    //点击图片，则value值为true
    if(value) {
        //创建隐藏的文件上传input
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
        input.onchange = function() {
            const file = input.files[0];
            //判断文件是否为图片
            if(! /image\/\w+/.test(file.type)) {
                console.log('只能选择图片');
                return false;
            } else {
                //使用FormData创建键值对数据
                var fd = new FormData();
                fd.append('file', file);
                $.ajax({
                    type: 'post',
                    url: '/sys/oss/upload',//后台接口，我是用的是阿里的oss
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: fd,
                    success: function (result) {
                        //上传成功，准备将图片插入编辑框中
                        if (result.code === 0) {
                            //取得上传后返回所在的路径
                            var imgUrl = result.url;
                            //取得图片应该所在的位置
                            quill1.focus()
                            var currentPosition = quill1.getSelection().index;
                            //插入编辑框
                            quill1.insertEmbed(currentPosition, 'image', imgUrl);
                            //显示成功提示
                        } else {
                            console.log(result);
                        }
                    },
                    error: function (jqXHR) {
                        console.log('错误，' + jqXHR.status);
                    }
                });
            }
        }
    }
}