quilleditor 字体大小设置_vue-quill-editor改变默认字体大小

在此之前，你需要安装好vue-quill-editor，可以看我另外一篇文章

修改vue-quill-editor的配置项

const toolbarOptions = [

// 大家如果想要更多的字体大小，可以自行增加

[{'size': ['12px','16px' , '20px']}],

]

在node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改

// 1. quill.core.js

// small,large,huge 这三个是默认的，可删可留(如果删除，请删除对应的css以及js)

whitelist: ['12px','16px' , '20px']

// 2. quill.js

whitelist: ['12px','16px' , '20px']

var SIZES = ['12px','16px' , '20px']

// 3. quill.bubble.css

// 先找到 .ql-editor .ql-size-huge、ql-editor .ql-size-large、.ql-editor .ql-size-small进行删除

.ql-editor .ql-size-12px {

font-size: 12px;

}

.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {

font-size: 12px;

}

.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';

}

.ql-editor .ql-size-12px {

font-size: 16px;

}

.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {

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';

}

.ql-editor .ql-size-20px {

font-size: 20px;

}

.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {

font-size: 20px;

}

.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';

}

// 4. quill.core.css

.ql-editor .ql-size-12px {

font-size: 12px;

}

.ql-editor .ql-size-16px {

font-size: 16px;

}

.ql-editor .ql-size-20px {

font-size: 20px;

}

// 5. quill.snow.css

.ql-editor .ql-size-8px {

font-size: 10px;

}

.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';

}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {

font-size: 10px;

}

....