vue+elementui+自定义Vue-Quill-Editor富文本框（一）

Quill官方中文文档：http://static.kancloud.cn/liuwave/quill/1434140

其中有自定义字体大小、行高、行间距、链接、上传视频上传图片到服务器（后续有时间会拆分）

安装依赖Vue-Quill-Editor

 npm install vue-quill-editor --save

完整代码（可按照自己的需求参照官网配置全局使用还是组件使用）

<template><div><el-formref="articleForm"label-width="100px":model="articleForm":rules="rules"style="width: 60%"><el-form-item label="文章内容" prop="artContent" style="height: 350px"><quill-editorref="myQuillEditor"v-model="articleForm.artContent"v-screenclass="quilleditor":options="editorOption"style="height: 265px"/><!-- 图片上传 --><el-uploadref="Quillupload":action="action":before-upload="bfUpload"class="pictureQuill":file-list="fileListQuill":headers="headers"list-type="picture-card":on-success="handleSuccessQuill"style="display: none"><i class="el-icon-plus"></i></el-upload><!-- 视频上传 --><el-upload:action="action":before-upload="beforeUploadVideo"class="pictureQuillVideo":headers="headers":on-progress="uploadVideoProcess":on-success="handleVideoSuccess":show-file-list="false"style="display: none"><videov-if="videoForm.showVideoPath != '' && !videoFlag"controlsheight="100":src="videoForm.showVideoPath"width="400">您的浏览器不支持视频播放</video><iv-else-if="videoForm.showVideoPath == '' && !videoFlag"class="el-icon-plus avatar-uploader-icon"></i><el-progressv-if="videoFlag == true":percentage="videoUploadPercent"style="margin-top: 7px"type="circle"/></el-upload></el-form-item></el-form</div>
</template>
<script>import { quillEditor } from 'vue-quill-editor'import * as Quill from 'quill'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import '../../../assets/css/quillEditor.css'  //自定义cssimport { mapGetters } from 'vuex' //上传图片、视频需要token（按自己需求配置）import { uploadURL } from '@/config' //上传图片、视频接口（按自己需求配置）import { addQuillTitle } from './components/quill-title.js'  //设置工具栏鼠标悬浮中文提示import screen from '@/directive/screen' //设置最大化和最小化// 字体var fonts = ['SimHei','SimSun','Microsoft-YaHei','KaiTi','FangSong','Arial','sans-serif',]   var Font = Quill.import('formats/font')Font.whitelist = fontsQuill.register(Font, true)// 字体大小var sizes = [false, '14px', '16px', '18px', '20px', '22px', '24px', '26px']var Size = Quill.import('formats/size')Size.whitelist = sizes// 行高import { lineHeightStyle } from './components/lineHeight.js'Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)// 行间距import { letterSpacingStyle } from './components/letterSpacing.js'Quill.register({ 'formats/letterSpacing': letterSpacingStyle }, true)// 链接var Link = Quill.import('formats/link')class MyLink extends Link {static create(value) {let node = super.create(value)value = this.sanitize(value)if (!value.startsWith('http')) {value = 'http://' + value}node.setAttribute('href', value)return node}}Quill.register(MyLink)// 视频import Video from './components/video.js'Quill.register(Video, true)// 工具栏配置const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']// [{ header: '1' }, { header: '2' }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block'][{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }][{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }][{ align: [] }], // 对齐方式-----[{ align: [] }][{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }][{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}][{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }][{ size: sizes }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }][{ header: [false, 1, 2, 3, 4, 5, 6] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }][{ font: fonts }], // 字体种类-----[{ font: [] }][{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }], //行高[{ letterSpacing: [ 'initial','2px','4px', '6px','8px','10px', '12px', '14px', '16px'],},], //行间距['link', 'image', 'video'], // 链接、图片、视频-----['link', 'image', 'video']['clean'], // 清除文本格式-----['clean']]export default {components: {quillEditor}directives: { screen },//最大化最小化data(){return{articleForm: {artContent: '',},rules:{},headers: {},action: uploadURL,fileListQuill: [],editorOption: {modules: {toolbar: {container: toolbarOptions, //自定义工具栏handlers: {letterSpacing: function (value) {if (value) {this.quill.format('letterSpacing', value)} else {console.log(value)}},lineheight: function (value) {if (value) {this.quill.format('lineHeight', value)} else {console.log(value)}},image: function (value) {if (value) {document.querySelector('.pictureQuill input').click()} else {this.quill.format('image', false)}},video: function (value) {if (value) {document.querySelector('.pictureQuillVideo input').click()} else {this.quill.format('video', false)}},},},},//主题theme: 'snow',placeholder: '请输入正文',},//视频videoFlag: false,//是否显示进度条videoUploadPercent: '',//进度条的进度，isShowUploadVideo: false,//显示上传按钮videoForm: {showVideoPath: '',},}},computed: {...mapGetters({token: 'user/token',//token按自己的需求}),editor() {return this.$refs.myQuillEditor.quill},},created() {this.headers['Authorization'] = `Bearer ${this.token}`},mounted() {// 富文本工具栏提示addQuillTitle()//解决文本框赋值后获取焦点this.$refs.myQuillEditor.quill.enable(false)this.$nextTick(function () {this.$refs.myQuillEditor.quill.enable(true)this.$refs.myQuillEditor.quill.blur()})},methods:{// 富文本框上传图片回调bfUpload(file) {if ('image/png' == file.type ||'image/jpeg' == file.type ||'image/jpg' == file.type) {console.log()} else {this.ME('图片上传失败,请上传png,jpeg,jpg格式')return false}},// 富文本框上传图片handleSuccessQuill(response, file) {this.fileListQuill.push({ url: response.data.filePath })let quill = this.$refs.myQuillEditor.quillif (response.data.filePath) {let length = quill.getSelection().indexquill.insertEmbed(length, 'image', response.data.filePath)quill.setSelection(length + 1)}},//富文本上传视频回调beforeUploadVideo(file) {var fileSize = file.size / 1024 / 1024 < 50if (['video/mp4','video/ogg','video/flv','video/avi','video/wmv','video/rmvb','video/mov',].indexOf(file.type) == -1) {this.$message.error('请上传正确的视频格式')return false}if (!fileSize) {this.$message.error('视频大小不能超过50MB')return false}this.isShowUploadVideo = false},//进度条uploadVideoProcess(event, file, fileList) {this.videoFlag = truethis.videoUploadPercent = file.percentage.toFixed(0) * 1},//富文本上传视频handleVideoSuccess(res, file) {this.isShowUploadVideo = truethis.videoFlag = falsethis.videoUploadPercent = 0let quill = this.$refs.myQuillEditor.quillthis.videoForm.showVideoPath = res.data.filePathif (res.data.filePath) {let length = quill.getSelection().indexquill.insertEmbed(length, 'video', res.data.filePath)quill.setSelection(length + 1)}},},}
</script>

字符间距 letterSpacing.js文件

import Quill from 'quill'
let Parchment = Quill.import('parchment')
console.log('Parchment', Parchment)
// 字符间距
class letterSpacingAttributor extends Parchment.Attributor.Style {}
const letterSpacingStyle = new letterSpacingAttributor('letter-spacing','letterSpacing',{scope: Parchment.Scope.INLINE,whitelist: ['initial','2px','4px','6px','8px','10px','12px','14px','16px',],}
)
export { letterSpacingStyle }

行高lineHeight.js文件

import Quill from 'quill'
let Parchment = Quill.import('parchment')
console.log('Parchment', Parchment)// 行高
class lineHeightAttributor extends Parchment.Attributor.Style {}
const lineHeightStyle = new lineHeightAttributor('lineHeight', 'line-height', {scope: Parchment.Scope.INLINE,whitelist: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'],
})export { lineHeightStyle }

设置工具栏鼠标悬浮中文提示quill-title.js文件

const titleConfig = {'ql-bold': '加粗','ql-color': '颜色','ql-font': '字体','ql-code': '插入代码','ql-italic': '斜体','ql-link': '添加链接','ql-background': '背景颜色','ql-size': '字体大小','ql-strike': '删除线','ql-script': '上标/下标','ql-underline': '下划线','ql-blockquote': '引用','ql-header': '标题','ql-indent': '缩进','ql-list': '列表','ql-align': '文本对齐','ql-direction': '文本方向','ql-code-block': '代码块','ql-formula': '公式','ql-image': '图片','ql-video': '视频','ql-clean': '清除字体样式','ql-lineheight': '行高','ql-letterSpacing': '字符间距',
}export function addQuillTitle() {const oToolBar = document.querySelector('.ql-toolbar'),aButton = oToolBar.querySelectorAll('button'),aSelect = oToolBar.querySelectorAll('select')aButton.forEach(function (item) {if (item.className === 'ql-script') {item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')} else if (item.className === 'ql-indent') {item.value === '+1'? (item.title = '向右缩进'): (item.title = '向左缩进')} else {item.title = titleConfig[item.classList[0]]}})aSelect.forEach(function (item) {item.parentNode.title = titleConfig[item.classList[0]]})
}

上传视频video.js文件

import { Quill } from 'vue-quill-editor'
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')
const ATTRIBUTES = ['height', 'width']
class Video extends BlockEmbed {static create(value) {const node = super.create(value)// 添加video标签所需的属性node.setAttribute('controls', 'controls') // 控制播放器//删除原生video的控制条的下载或者全屏按钮的方法//<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>//不用哪个在下面加上哪个node.setAttribute('controlsList', 'nofullscreen') // 控制删除node.setAttribute('type', 'video/mp4')node.setAttribute('style', 'object-fit:fill;width: 100%;')node.setAttribute('preload', 'auto') // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频node.setAttribute('playsinline', 'true')node.setAttribute('x-webkit-airplay', 'allow')// node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放node.setAttribute('x5-video-player-fullscreen', 'true') // 全屏设置，设置为 true 是防止横屏node.setAttribute('src', this.sanitize(value))return node}static formats(domNode) {return ATTRIBUTES.reduce((formats, attribute) => {if (domNode.hasAttribute(attribute)) {formats[attribute] = domNode.getAttribute(attribute)}return formats}, {})}static sanitize(url) {return Link.sanitize(url)}static value(domNode) {return domNode.getAttribute('src')}format(name, value) {if (ATTRIBUTES.indexOf(name) > -1) {if (value) {this.domNode.setAttribute(name, value)} else {this.domNode.removeAttribute(name)}} else {super.format(name, value)}}html() {const { video } = this.value()return `<a href="${video}">${video}</a>`}
}
Video.blotName = 'video' // 不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframeexport default Video

最大化和最小化新建directive指令文件夹screen.js文件

const domList = [{dom: `<svg  t="1637824425355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10463"><path d="M243.2 780.8v-179.2H153.6v179.2c0 49.28 40.32 89.6 89.6 89.6h179.2v-89.6H243.2zM780.8 153.6h-179.2v89.6h179.2v179.2h89.6V243.2c0-49.28-40.32-89.6-89.6-89.6zM243.2 243.2h179.2V153.6H243.2c-49.28 0-89.6 40.32-89.6 89.6v179.2h89.6V243.2z m537.6 537.6h-179.2v89.6h179.2c49.28 0 89.6-40.32 89.6-89.6v-179.2h-89.6v179.2z" p-id="10464" fill="#000000"></path></svg>`,tit: '最大化',id: 'maxId',display: 'block',},{dom: `<svg t="1637824296192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6336"><path d="M341.065143 910.189714v-146.285714c0-53.686857-43.885714-97.572571-97.572572-97.572571h-146.285714a48.786286 48.786286 0 0 0 0 97.499428h146.285714v146.285714a48.786286 48.786286 0 1 0 97.499429 0z m-292.571429-617.910857c0 26.916571 21.796571 48.786286 48.713143 48.786286h146.285714c53.686857 0 97.572571-43.885714 97.572572-97.572572v-146.285714a48.786286 48.786286 0 0 0-97.499429 0v146.285714h-146.285714a48.786286 48.786286 0 0 0-48.786286 48.786286z m910.409143 0a48.786286 48.786286 0 0 0-48.713143-48.786286h-146.285714v-146.285714a48.786286 48.786286 0 1 0-97.499429 0v146.285714c0 53.686857 43.885714 97.572571 97.499429 97.572572h146.285714a48.786286 48.786286 0 0 0 48.713143-48.786286z m0 422.765714a48.786286 48.786286 0 0 0-48.713143-48.713142h-146.285714c-53.686857 0-97.572571 43.885714-97.572571 97.572571v146.285714a48.786286 48.786286 0 1 0 97.499428 0v-146.285714h146.285714a48.786286 48.786286 0 0 0 48.786286-48.786286z" fill="#000000" p-id="6337"></path></svg>`,tit: '还原',id: 'minId',display: 'none',},
]
export default {bind(el, binding, vnode, oldVnode) {console.log(el, binding, vnode, oldVnode)setTimeout(() => {let dialogHeaderEl = el.querySelector('.ql-toolbar')domList.map((item) => {let dom = document.createElement('span')dom.className = 'ql-formats'dom.style.float = 'right'dom.style.marginTop = '5px'dom.innerHTML = `<button title="${item.tit}" style="display:${item.display};" id="${item.id}"  type="button" class="ql-clean">${item.dom}</button>`dialogHeaderEl.appendChild(dom)})//最大化document.getElementById('maxId').onclick = () => {el.style.width = 100 + 'vw'el.style.height = 100 + 'vh'el.style.position = 'fixed'el.style.top = 0el.style.left = 0el.style.zIndex = 99999el.style.background = 'white'document.getElementById('maxId').style.display = 'none'document.getElementById('minId').style.display = 'block'}//最小化document.getElementById('minId').onclick = () => {el.style.width = 'auto'el.style.height = '265px'el.style.position = 'inherit'el.style.zIndex = 9document.getElementById('maxId').style.display = 'block'document.getElementById('minId').style.display = 'none'}}, 0)},
}

新建一个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: '字号大小';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="字号大小"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {content: '默认';
}.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";
}.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";
}.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";
}.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";
}.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";
}.ql-size-22px {font-size: 22px;
}.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";
}.ql-size-24px {font-size: 24px;
}.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";
}.ql-size-26px {font-size: 26px;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="行高"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {content: '默认';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {content: '1px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {content: '1.5px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {content: '1.75px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {content: '2px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {content: '3px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {content: '4px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {content: '5px';
}
.ql-snow .ql-picker.ql-lineheight {width: 70px;
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item::before {content: '字符间距';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="字符间距"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='initial']::before {content: '默认';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="2px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='2px']::before {content: '2px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="4px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='4px']::before {content: '4px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="6px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='6px']::before {content: '6px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='8px']::before {content: '8px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='10px']::before {content: '10px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='12px']::before {content: '12px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='14px']::before {content: '14px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='16px']::before {content: '16px';
}
.ql-snow .ql-picker.ql-letterSpacing {width: 90px;
}/* 标题 */
.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;
}

vue+elementui+自定义Vue-Quill-Editor富文本框（一）相关推荐

uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
uniapp 发布文章app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
vue+elementui+quill富文本框实现（富文本框最大化和最小化）
效果图:(点击最大化放大,富文本框撑满整个屏幕:点击还原回到原来的位置) 1 .html <quill-editorref="myQuillEditor"v-model=&q ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
vue中如何使用wangEditor 富文本框
在做后台管理项目时常常会用到富文本编辑器,在这里推荐大家使用wangEditor,亲测好用话不多说先上图第一步安装 npm wangeditor --save 第二步在项目中使用先建立一个wan ...
vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
vue elementUI 自定义日历内容
vue elementUI 自定义日历内容 <el-calendar><template style="height:100px" slot="date ...
tiptap - 基于 vue 的优雅流畅的开源富文本编辑器
一款专为 vue.js 打造,设计优雅,体验流畅舒服的现代富文本编辑器. 关于 Tiptap Tiptap 是一款专为 vue 打造的简洁明快的富文本编辑器,通过简单的设置能为用户提供多种优秀的文字编 ...
vue element-ui 自定义规则限制图片尺寸
vue element-ui 自定义规则限制图片上传尺寸效果: data() {let checkImageSize = (rule, value, callback) => {const ...
使用vue制作富文本框
这里分享一个富文本框插件,如图使用方法: 1-安装 npm install --save vue2-editor或者yarn add vue2-editor 2- 使用 // Basic Use - ...

vue+elementui+自定义Vue-Quill-Editor富文本框（一）

vue+elementui+自定义Vue-Quill-Editor富文本框（一）相关推荐

最新文章

热门文章