quilleditor 字体大小设置_vue-quill-editor 文字大小、标题选项列表修改

默认的snow主题样式如下：

image.png

字体大小跟标题都是英文，想修改为中文。在项目的样式文件中加如下样式就可以了

/* 字体大小 */

.ql-snow .ql-picker.ql-size .ql-picker-label::before,

.ql-snow .ql-picker.ql-size .ql-picker-item::before {

content: '默认' !important;

}

.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: '小号' !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: '大号' !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: '特大号'!important;

}

/* 标题 */

.ql-snow .ql-picker.ql-header .ql-picker-label::before,

.ql-snow .ql-picker.ql-header .ql-picker-item::before {

content: '默认' !important;

}

.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'!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: '标题2'!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: '标题3'!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: '标题4'!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: '标题5'!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: '标题6'!important;

}

image.png

写在后面的话：

该编辑器会过滤 html里的标签，无法适应项目需求，弃用了