quillEditor 禁用复制粘贴图片，以及class转style等问题

<template><div><div class="search-term"><el-form :inline="true" :model="searchInfo" class="demo-form-inline"><el-form-item label="案例标题"><el-input v-model="searchInfo.title" placeholder="请输入案例标题" /></el-form-item><el-form-item label="项目名称"><el-inputv-model="searchInfo.projectName"placeholder="请输入项目名称"/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item><el-form-item><el-button type="primary" @click="openDialog('addArticle')">新增案例</el-button></el-form-item></el-form></div><el-table:data="tableData"@sort-change="sortChange"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-columntype="index":index="indexMethod"label="序号"width="100"/><!-- <el-table-column label="ID" min-width="50" prop="id" /> --><el-table-column label="标题与副标题" min-width="300"><template slot-scope="scope"><div><strong>ID:</strong> {{ scope.row.id }}</div><div><strong>标题:</strong> {{ scope.row.title }}</div><div><strong>副标题:</strong> {{ scope.row.subtitle }}</div></template></el-table-column><!-- <el-table-column label="省份与城市" min-width="150"><template slot-scope="scope"><div><strong>省份:</strong> {{ scope.row.provinceName }}</div><div><strong>城市:</strong> {{ scope.row.cityName }}</div></template></el-table-column> --><el-table-column label="项目名称" min-width="150"><template slot-scope="scope">{{ getProjectName(scope.row.projectId) }}</template></el-table-column><el-table-column label="小区" min-width="150"><template slot-scope="scope">{{ getCommunityName(scope.row.communityId) }}</template></el-table-column><el-table-column label="风格" min-width="150"><template slot-scope="scope">{{ getStyleName(scope.row.seriesId) }}</template></el-table-column><el-table-column label="房型" min-width="150"><template slot-scope="scope">{{ getHouseTypeName(scope.row.houseTypeId) }}</template></el-table-column><el-table-column label="面积与标签" min-width="200"><template slot-scope="scope"><div><strong>面积:</strong> {{ scope.row.area }} 平方米</div><div><strong>标签:</strong> {{ scope.row.tags }}</div></template></el-table-column><el-table-column label="推荐" min-width="100" prop="isRecommend"><template slot-scope="scope"><el-tagv-if="scope.row.isRecommend === '0'"effect="dark"size="mini"type="info">否</el-tag><el-tag v-else effect="dark" size="mini" type="success">是</el-tag></template></el-table-column><el-table-column label="创建时间" min-width="100" prop="createdAt" /><el-table-column label="操作" width="250"><template slot-scope="scope"><el-buttonsize="small"type="primary"icon="el-icon-edit"@click="editArticle(scope.row)">编辑</el-button><el-buttonsize="small"type="danger"icon="el-icon-delete"@click="deleteArticle(scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination:current-page="page":page-size="pageSize":page-sizes="[10, 30, 50, 100]":style="{ float: 'right', padding: '20px' }":total="total"layout="total, sizes, prev, pager, next, jumper"@current-change="handleCurrentChange"@size-change="handleSizeChange"/><el-dialog:before-close="closeDialog":title="dialogTitle":visible.sync="dialogFormVisible"><el-formref="articleForm":inline="false":model="form":rules="rules"label-width="80px"><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="基本信息" name="first"><el-form-item label="标题" prop="title"><el-inputv-model="form.title"placeholder="请输入标题"required/></el-form-item><el-form-item label="副标题" prop="title"><el-input v-model="form.subtitle" placeholder="请输入副标题" /></el-form-item><el-form-item label="案例封面" prop="picUrl"><el-inputv-model="form.picUrl"placeholder="http://"disabledstyle="display: none"/><QnEleUpload :image-url="form.picUrl" @oss-url="ossPicUrl" /></el-form-item><el-form-item label="全景链接"><el-row style="padding-top: 0px"><el-col :span="4"><el-select v-model="form.panoramaType" placeholder="请选择"><el-optionv-for="item in panoramaList":key="item.value":label="item.label":value="item.value"/></el-select></el-col><el-col :span="12" style="margin-left: 10px"><el-inputv-model="form.panoramaUrl"placeholder="请输入全景链接"/></el-col></el-row></el-form-item><el-form-item label="项目" required><el-selectv-model="projectId"placeholder="请选择"style="width: 100%"><el-optionv-for="(item, index) in projectList":key="index":label="item.title":value="item.id"/></el-select></el-form-item><!-- <el-form-item label="地区" required><div style="display: flex"><el-selectv-model="provinceId"placeholder="请选择"style="margin-right: 10px"><el-optionv-for="(item, index) in provinceList":key="index":label="item.name":value="item.id"/></el-select><el-select v-model="cityId" placeholder="请选择"><el-optionv-for="(item, index) in cityList":key="index":label="item.name":value="item.id"/></el-select></div></el-form-item> --><el-form-item label="小区"><el-selectv-model="communityId"placeholder="请选择"style="width: 100%"><el-optionv-for="(item, index) in communityList":key="index":label="item.name":value="item.id"/></el-select></el-form-item><el-form-item label="户型名称" required><el-selectv-model="houseTypeId"placeholder="请选择"style="width: 100%"><el-optionv-for="(item, index) in houseTypeList":key="index":label="item.title":value="item.id"/></el-select></el-form-item><el-form-item label="风格"><el-selectv-model="seriesId"placeholder="请选择"style="width: 100%"><el-optionv-for="(item, index) in seriesList":key="index":label="item.title":value="item.id"/></el-select></el-form-item><!-- <el-form-item label="案例视频" prop="videoUrl"><el-input v-model="form.videoUrl" placeholder="http://" /><QnEleUploadVedio :image-url="form.videoUrl" @oss-url="ossPicUrlVideo" /><i class="warning">为了更好的保持兼容性建议上传mp4格式</i></el-form-item> --><el-form-item label="标签" prop="tags"><el-inputv-model="form.tags"placeholder="请输入标签，多个标签用 | 分割"/></el-form-item><el-form-item label="面积" prop="area"><el-input v-model="form.area" placeholder="请输入面积" required><template slot="append">平方米</template></el-input></el-form-item><el-form-item label="是否推荐" prop="isRecommend"><el-switchv-model="form.isRecommend":active-value="'1'":inactive-value="'0'"/></el-form-item></el-tab-pane><el-tab-pane label="案例详情" name="second"><!-- <el-form-item label="案例详情"><el-input v-model="form.skill" type="textarea" maxlength="150" show-word-limit /></el-form-item> --><div style="min-height: 500px"><QnEleUploadv-show="false"ref="upload"class="avatar-uploader":image-url="form.avatar"@oss-url="onUploadHandler"/><quill-editorref="myQuillEditor"v-model="form.detail":options="editorOption"style="min-height: 300px"/></div></el-tab-pane></el-tabs></el-form><div slot="footer" class="dialog-footer"><el-button @click="closeDialog">取 消</el-button><el-button type="primary" @click="enterDialog">确 定</el-button></div></el-dialog></div>
</template><style>
#editor—wrapper {border: 1px solid #ccc;z-index: 100; /* 按需定义 */
}
#toolbar-container {border-bottom: 1px solid #ccc;
}
#editor-container {height: 500px;
}
</style>
<script>
// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索import {getArticleList,createArticle,updateArticle,deleteArticle// deleteArticlesByIds
} from '@/api/article'
import { getProjectList } from '@/api/project'import { getCityList } from '@/api/city'
import { getCommunityList } from '@/api/community'
import { getSeriesList } from '@/api/series'import infoList from '@/mixins/infoList'
import { toSQLLine } from '@/utils/stringFun'
import QnEleUpload from '@/components/oss/qiniu'
// import QnEleUploadVedio from '@/components/oss/qiniuVideo'
import * as Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引用字号和字体css
import '@/utils/quillEditor.css'
// 设置字体大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)
// 设置字体样式
const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
const fonts = ['SimSun','SimHei','Microsoft-YaHei','KaiTi','FangSong'
]
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)
// 设置文字水平方式
var Align = Quill.import('attributors/style/align')
Align.whitelist = ['right', 'center', 'justify']
Quill.register(Align, true)
const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线['blockquote', 'code-block'], // 引用  代码块[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表[{ script: 'sub' }, { script: 'super' }], // 上标/下标[{ indent: '-1' }, { indent: '+1' }], // 缩进// [{ direction: 'rtl' }], // 文本方向[{ size: ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align: [] }], // 对齐方式['clean'], // 清除文本格式['image'] // 链接、图片，需要视频的可以加上video]// import * as Quill from 'quill'
// 调整上传图片大小
import ImageResize from 'quill-image-resize-module' // 引用
import { ImageDrop } from 'quill-image-drop-module'
// import { json } from 'body-parser'
Quill.register('modules/imageResize', ImageResize) // 注册
Quill.register('modules/imageDrop', ImageDrop)
import { getHouseTypeList } from '@/api/houseType'export default {name: 'Article',// 注册组件components: {QnEleUpload// QnEleUploadVedio},filters: {},mixins: [infoList],data () {return {panoramaList: [{ value: 0, label: '酷家乐', prefix: 'http://pano478.p.kujiale.com/' }, { value: 1, label: '小红屋', prefix: 'http://pano478.p.xiaohongwu.com/' }],isRecommend: 0,cityList: [],provinceId: 0,provinceName: '',cityId: 0,cityName: '',projectList: [],projectId: '1',provinceList: [],communityList: [{ id: '0', name: '请选择' }],communityId: '0',seriesList: [],seriesId: 0,houseTypeList: [],houseTypeId: 0,content: '', // 双向数据绑定数据tags: '',editorOption: {modules: {// 重写剪贴板模块clipboard: {matchers: [[Node.ELEMENT_NODE, (node, delta) => {// 拦截图片标签if (node.tagName === 'IMG') {// 返回空 Delta 阻止插入return new Delta().retain(delta.length());}return delta;}]]},toolbar: {container: toolbarOptions, // 工具栏handlers: {'image': function (value) {if (value) {// 调用el-upload的click点击事件实现文件上传document.querySelector('.avatar-uploader input').click()} else {this.quill.format('image', false)}}}},// 调整图片大小imageResize: {displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']}},placeholder: '请输入案例详情'},activeName: 'first',deleteVisible: false,listApi: getArticleList,dialogFormVisible: false,dialogTitle: '新增案例',articles: [],form: {id: 0,isRecommend: 0,projectId: '1',title: '',subtitle: '',picUrl: '',sort: 1,detail: '',provinceId: 0,provinceName: '',cityId: 0,cityName: '',tags: '',communityId: '0',seriesId: 0,houseTypeId: 0,area: '',panoramaUrl: '',panoramaType: 0,panoramaPrefix: ''},tab: 'first',rules: {title: [{ required: true, message: '请选输入案例标题', trigger: 'blur' }],picUrl: [{ required: true, message: '请上传案例封面', trigger: 'blur' }],detail: [{ required: true, message: '案例详情不能为空', trigger: 'blur' }],area: [{ required: true, message: '面积不能为空', trigger: 'blur' }],// seriesId: [{ required: true, message: '系列不能为空', trigger: 'blur' }],houseTypeId: [{ required: true, message: '风格不能为空', trigger: 'blur' }],panoramaUrl: [{required: false,validator: this.validatePanoramaUrl,trigger: 'blur'}]}}},watch: {seriesId (val) {this.form.seriesId = val},communityId (val) {this.form.communityId = val},projectId (val) {this.form.projectId = this.projectId},houseTypeId (val) {this.form.houseTypeId = val},provinceId (val) {this.cityList = this.provinceList.find(item => item.id === val).childrenconsole.log(1112, this.cityList)this.provinceName = this.provinceList.find(item => item.id === val).namethis.cityId = this.cityList[0].idthis.form.cityId = this.cityList[0].idthis.form.cityName = this.cityList[0].namethis.form.provinceName = this.provinceNamethis.form.provinceId = val},cityId (val) {this.cityId = valthis.form.cityId = valthis.form.cityName = this.cityList.find(item => item.id === val).name}// isRecommend (val) {//   this.form.isRecommend = Number(val)// }},async created () {const params = this.$route.paramsthis.searchInfo.projectName = params.projectNamethis.getTableData()this.initForm()},methods: {// 计算序号indexMethod (index) {return (this.page - 1) * this.pageSize + index + 1},validatePanoramaUrl (rule, value, callback) {if (value && !value.startsWith('http')) {callback(new Error('必须以http开头'))} else {callback()}},getProjectName (projectId) {console.log(111111, projectId)const project = this.projectList.find(item => item.id === projectId)return project ? project.title : '-'},getCommunityName (communityId) {const community = this.communityList.find(item => item.id === communityId)return community ? community.name : ''},getStyleName (seriesId) {const series = this.seriesList.find(item => item.id === seriesId)return series ? series.title : ''},getHouseTypeName (houseTypeId) {const houseType = this.houseTypeList.find(item => item.id === houseTypeId)return houseType ? houseType.title : ''},async getHouseTypeList () {const res = await getHouseTypeList({ page: 1, pageSize: 1000 })if (res.code === '0') {this.houseTypeList = res.data.listthis.houseTypeId = this.houseTypeList[0].idthis.form.houseTypeId = this.houseTypeId}},async getSeriesList () {const res = await getSeriesList({ page: 1, pageSize: 1000 })if (res.code === '0') {this.seriesList = res.data.listthis.seriesId = this.seriesList[0].idthis.form.seriesId = this.seriesId}},async getCommunityList () {const res = await getCommunityList({ page: 1, pageSize: 10000 })if (res.code === '0') {this.communityList = [{ id: '0', name: '请选择' }, ...res.data.list]// this.communityList = res.data.listthis.communityId = this.communityList[0].idthis.form.communityId = this.communityId}},async getProjectList () {const res = await getProjectList({ page: 1, pageSize: 1000 })if (res.code === '0') {this.projectList = res.data.listthis.projectId = this.projectList[0].idthis.form.projectId = this.projectId}},async getCityLists () {const res = await getCityList({})if (res.code === '0') {this.provinceList = res.data.listthis.provinceId = this.provinceList[0].idthis.provinceName = this.provinceList[0].namethis.form.provinceId = this.provinceIdthis.form.provinceName = this.provinceNamethis.form.cityId = this.provinceList[0].children[0].idthis.form.cityName = this.provinceList[0].children[0].name}},onEditorBlur (val) { }, // 失去焦点触发事件onEditorFocus () { }, // 获得焦点触发事件onEditorChange (val) { }, // 内容改变触发事件ossPicUrl (e) {this.form.picUrl = e.url},ossPicUrlVideo (e) {this.form.videoUrl = e.url},async onUploadHandler (e) {console.log(e)const imageUrl = e.url// 获取光标所在位置const quill = this.$refs.myQuillEditor.quillconst length = quill.getSelection().index// 插入图片quill.insertEmbed(length, 'image', imageUrl)// 调整光标到最后quill.setSelection(length + 1)// this.content += url},async onUploadHandlerCaseDescription (e) {console.log(e)const imageUrl = e.url// 获取光标所在位置const quill = this.$refs.myQuillEditorCaseDescription.quillconst length = quill.getSelection().index// 插入图片quill.insertEmbed(length, 'image', imageUrl)// 调整光标到最后quill.setSelection(length + 1)// this.content += url},handleClick (tab, event) {console.log(tab, event)},//  选中articlehandleSelectionChange (val) {this.articles = val},// async onDelete() {//   const ids = this.articles.map(item => item.id)//   const res = await deleteArticlesByIds({ ids })//   if (res.code === '0') {//     this.$message({//       type: 'success',//       message: res.message && '删除成功~'//     })//     if (this.tableData.length === ids.length && this.page > 1) {//       this.page--//     }//     this.deleteVisible = false//     this.getTableData()//   }// },// 排序sortChange ({ prop, order }) {if (prop) {this.searchInfo.orderKey = toSQLLine(prop)this.searchInfo.desc = order === 'descending'}this.getTableData()},// 条件搜索前端看此方法onSubmit () {this.page = 1this.pageSize = 10this.getTableData()},async initForm () {// this.$refs.articleForm.resetFields()this.form = {id: 0,isRecommend: 0,projectId: '1',title: '',subtitle: '',picUrl: '',sort: 1,detail: '',provinceId: 0,provinceName: '',cityId: 0,cityName: '',communityId: 0,seriesId: 0,houseTypeId: 0,area: '',panoramaType: 0,panoramaPrefix: ''}await this.getCityLists()await this.getProjectList()await this.getCommunityList()await this.getSeriesList()await this.getHouseTypeList()},closeDialog () {// this.initForm()this.dialogFormVisible = false},openDialog (type) {switch (type) {case 'addArticle':this.initForm()this.dialogTitle = '新增案例'breakcase 'edit':this.dialogTitle = '编辑案例'breakdefault:break}this.activeName = 'first'this.type = typethis.dialogFormVisible = true},async editArticle (row) {// const res = await getArticleById({ id: row.id })// if (res.code === '0') {//   this.form = res.data//   this.openDialog('edit')// }// this.initForm()console.log(2222, row)// this.$nextTick(() => {this.form = rowthis.communityId = row.communityIdthis.projectId = row.projectIdthis.provinceId = row.provinceIdthis.cityId = row.cityIdthis.houseTypeId = row.houseTypeIdthis.seriesId = row.seriesIdthis.isRecommend = Number(row.isRecommend)// this.form.isRecommend = Number(row.isRecommend)// this.form.isShow = Number(row.isShow)// this.openDialog('edit')// })this.openDialog('edit')},async deleteArticle (row) {this.$confirm('此操作将永久删除该条记录, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(async () => {const res = await deleteArticle({ id: row.id })if (res.code === '0') {this.$message({type: 'success',message: '删除成功!'})if (this.tableData.length === 1 && this.page > 1) {this.page--}this.getTableData()}}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},async enterDialog () {this.$refs.articleForm.validate(async valid => {if (valid) {for (let i = 0; i < this.panoramaList.length; i++) {if (this.form.panoramaType == this.panoramaList[i].value) {this.form.panoramaPrefix = this.panoramaList[i].prefix}}// this.form.mentorId = Number(this.form.mentorId)switch (this.type) {case 'addArticle':{const res = await createArticle(this.form)if (res.code === '0') {this.$message({type: 'success',message: '添加成功',showClose: true})}this.getTableData()this.closeDialog()}breakcase 'edit':{const res = await updateArticle(this.form)if (res.code === '0') {this.$message({type: 'success',message: '编辑成功',showClose: true})}this.getTableData()this.closeDialog()}breakdefault:// eslint-disable-next-line no-lone-blocks{this.$message({type: 'error',message: '未知操作',showClose: true})}break}}})}}
}
</script><style scoped lang="scss">
.button-box {padding: 10px 20px;.el-button {float: right;}
}
.el-tag--mini {margin-left: 5px;
}
.warning {color: #dc143c;
}
.quill-editor {height: 400px;
}.editor {line-height: normal !important;height: 400px;
}
.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-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::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {content: "12px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {content: "14px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {content: "16px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {content: "18px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {content: "20px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {content: "22px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {content: "24px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {content: "28px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {content: "32px";vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {content: "36px";vertical-align: top;
}/* 这个是字号数字对应的px值 */
.ql-editor .ql-size-12 {font-size: 12px;
}
.ql-editor .ql-size-14 {font-size: 14px;
}
.ql-editor .ql-size-16 {font-size: 16px;
}
.ql-editor .ql-size-18 {font-size: 18px;
}
.ql-editor .ql-size-20 {font-size: 20px;
}
.ql-editor .ql-size-22 {font-size: 22px;
}
.ql-editor .ql-size-24 {font-size: 24px;
}
.ql-editor .ql-size-28 {font-size: 28px;
}
.ql-editor .ql-size-32 {font-size: 32px;
}
.ql-editor .ql-size-36 {font-size: 36px;
}/* 选择字号富文本字的大小 */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {font-size: 36px;
}
</style>

quillEditor.css

.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";
}/* 字号设置 */
/* 默认字号 */
.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="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {content: "12px";font-size: 12px;
}.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: 14px;
}.ql-size-14px {font-size: 14px;
}.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-size-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;
}.ql-size-18px {font-size: 18px;
}.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: 20px;
}.ql-size-20px {font-size: 20px;
}.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: "22px";font-size: 22px;
}.ql-size-22px {font-size: 22px;
}.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: "26px";font-size: 26px;
}.ql-size-26px {font-size: 26px;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {content: "28px";font-size: 28px;
}.ql-size-28px {font-size: 28px;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {content: "30px";font-size: 30px;
}.ql-size-30px {font-size: 30px;
}.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: 32px;
}.ql-size-32px {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: 36px;
}.ql-size-36px {font-size: 36px;
}

config.js

export const titleConfig = [{ Choice: '.ql-bold', title: '加粗' },{ Choice: '.ql-italic', title: '斜体' },{ Choice: '.ql-underline', title: '下划线' },{ Choice: '.ql-header', title: '段落格式' },{ Choice: '.ql-strike', title: '删除线' },{ Choice: '.ql-blockquote', title: '块引用' },{ Choice: '.ql-code', title: '插入代码' },{ Choice: '.ql-code-block', title: '插入代码段' },{ Choice: '.ql-font', title: '字体' },{ Choice: '.ql-size', title: '字体大小' },{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },{ Choice: '.ql-direction', title: '文本方向' },{ Choice: '.ql-header[value="1"]', title: 'h1标题' },{ Choice: '.ql-header[value="2"]', title: 'h2标题' },{ Choice: '.ql-align', title: '对齐方式' },{ Choice: '.ql-color', title: '字体颜色' },{ Choice: '.ql-background', title: '背景颜色' },{ Choice: '.ql-image', title: '图像' },{ Choice: '.ql-video', title: '视频' },{ Choice: '.ql-link', title: '添加链接' },{ Choice: '.ql-table', title: '添加表格' },{ Choice: '.ql-formula', title: '插入公式' },{ Choice: '.ql-clean', title: '清除字体格式' },{ Choice: '.ql-script[value="sub"]', title: '下标' },{ Choice: '.ql-script[value="super"]', title: '上标' },{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },{ Choice: '.ql-align', title: '文本对齐' },{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]