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-input v-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-column type="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 munityId) }} </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-tag v-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-button size="small" type="primary" icon="el-icon-edit" @click="editArticle(scope.row)" > 编辑 </el-button> <el-button size="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-form ref="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-input v-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-input v-model="form.picUrl" placeholder="http://" disabled style="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-option v-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-input v-model="form.panoramaUrl" placeholder="请输入全景链接" /> </el-col> </el-row> </el-form-item> <el-form-item label="项目" required> <el-select v-model="projectId" placeholder="请选择" style="width: 100%" > <el-option v-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-select v-model="provinceId" placeholder="请选择" style="margin-right: 10px" > <el-option v-for="(item, index) in provinceList" :key="index" :label="item.name" :value="item.id" /> </el-select> <el-select v-model="cityId" placeholder="请选择"> <el-option v-for="(item, index) in cityList" :key="index" :label="item.name" :value="item.id" /> </el-select> </div> </el-form-item> --> <el-form-item label="小区"> <el-select v-model="communityId" placeholder="请选择" style="width: 100%" > <el-option v-for="(item, index) in communityList" :key="index" :label="item.name" :value="item.id" /> </el-select> </el-form-item> <el-form-item label="户型名称" required> <el-select v-model="houseTypeId" placeholder="请选择" style="width: 100%" > <el-option v-for="(item, index) in houseTypeList" :key="index" :label="item.title" :value="item.id" /> </el-select> </el-form-item> <el-form-item label="风格"> <el-select v-model="seriesId" placeholder="请选择" style="width: 100%" > <el-option v-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-input v-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-switch v-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"> <QnEleUpload v-show="false" ref="upload" class="avatar-uploader" :image-url="form.avatar" @oss-url="onUploadHandler" /> <quill-editor ref="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 /' }, { value: 1, label: '小红屋', prefix: 'http://pano478.p.xiaohongwu /' }], 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 munityId = 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).children console.log(1112, this.cityList) this.provinceName = this.provinceList.find(item => item.id === val).name this.cityId = this.cityList[0].id this.form.cityId = this.cityList[0].id this.form.cityName = this.cityList[0].name this.form.provinceName = this.provinceName this.form.provinceId = val }, cityId (val) { this.cityId = val this.form.cityId = val this.form.cityName = this.cityList.find(item => item.id === val).name } // isRecommend (val) { // this.form.isRecommend = Number(val) // } }, async created () { const params = this.$route.params this.searchInfo.projectName = params.projectName this.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 munityList.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.list this.houseTypeId = this.houseTypeList[0].id this.form.houseTypeId = this.houseTypeId } }, async getSeriesList () { const res = await getSeriesList({ page: 1, pageSize: 1000 }) if (res.code === '0') { this.seriesList = res.data.list this.seriesId = this.seriesList[0].id this.form.seriesId = this.seriesId } }, async getCommunityList () { const res = await getCommunityList({ page: 1, pageSize: 10000 }) if (res.code === '0') { this munityList = [{ id: '0', name: '请选择' }, ...res.data.list] // this munityList = res.data.list this munityId = this munityList[0].id this.form munityId = this munityId } }, async getProjectList () { const res = await getProjectList({ page: 1, pageSize: 1000 }) if (res.code === '0') { this.projectList = res.data.list this.projectId = this.projectList[0].id this.form.projectId = this.projectId } }, async getCityLists () { const res = await getCityList({}) if (res.code === '0') { this.provinceList = res.data.list this.provinceId = this.provinceList[0].id this.provinceName = this.provinceList[0].name this.form.provinceId = this.provinceId this.form.provinceName = this.provinceName this.form.cityId = this.provinceList[0].children[0].id this.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.quill const 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.quill const length = quill.getSelection().index // 插入图片 quill.insertEmbed(length, 'image', imageUrl) // 调整光标到最后 quill.setSelection(length + 1) // this.content += url }, handleClick (tab, event) { console.log(tab, event) }, // 选中article handleSelectionChange (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 = 1 this.pageSize = 10 this.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 = '新增案例' break case 'edit': this.dialogTitle = '编辑案例' break default: break } this.activeName = 'first' this.type = type this.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 = row this munityId = row munityId this.projectId = row.projectId this.provinceId = row.provinceId this.cityId = row.cityId this.houseTypeId = row.houseTypeId this.seriesId = row.seriesId this.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() } break case 'edit': { const res = await updateArticle(this.form) if (res.code === '0') { this.$message({ type: 'success', message: '编辑成功', showClose: true }) } this.getTableData() this.closeDialog() } break default: // 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: '两端对齐' } ]