需求：vue-quill-editor把生成的内容的class类名转换为style
分析：
从以下quill源码上看，quill生成的html内容都是默认使用class，但在某些场合中，要求生成的html内容是行内式。
解决：
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'
// 引用字号和字体css
import '../../assets/css/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'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
[{
color: [] }, {
background: [] }], // 字体颜色、字体背景颜色-----[{
color: [] }, {
background: [] }]
[{
align: [] }], // 对齐方式-----[{
align: [] }]
[{
size: fontSizeStyle.whitelist }], // 字体大小-----[{
size: ['small', false, 'large', 'huge'] }]
[{
font: fonts }], // 字体种类-----[{
font: [] }]
[{
header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{
direction: 'ltl' }], // 文本方向-----[{
'direction': 'rtl'}]
[{
direction: 'rtl' }], // 文本方向-----[{
'direction': 'rtl'}]
[{
indent: '-1' }, {
indent: '+1' }], // 缩进-----[{
indent: '-1' }, {
indent: '+1' }]
[{
list: 'ordered' }, {
list: 'bullet' }], // 有序、无序列表-----[{
list: 'ordered' }, {
list: 'bullet' }]
[{
script: 'sub' }, {
script: 'super' }], // 上标/下标-----[{
script: 'sub' }, {
script: 'super' }]
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
['clean'], // 清除文本格式-----['clean']
['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
name: 'VueQuillEditor',
components: {
quillEditor
},
props: {
value: {
type: [Number, Object, Array, String],
default: ''
}
},
data () {
return {
html: this.value,
editorOption: {
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: this.handleImgUpload
}
}
}
},
isShow: false
}
},
watch: {
html: {
handler (newValue) {
this.$emit('input', newValue)
},
deep: true
},
value: {
handler (newValue, oldValue) {
if (newValue !== oldValue) this.html = newValue
},
deep: true
}
},
mounted () {
this.initMounted()
},
methods: {
initMounted () {
setTimeout(() => {
this.isShow = true
}, 100)
},
handleImgUpload () {
const {
quill } = this.$refs.mwQuillEditor
SelectImages({
visible: true,
multi: true,
showButton: true,
maxMulti: 18,
success: (data, filPath) => {
for (const item of data) {
const length = quill.getSelection(true).index
// 获取光标所在位置
// 插入图片，res为服务器返回的图片链接地址
quill.insertEmbed(length, 'image', filPath + item)
// 调整光标到最后
quill.setSelection(length + 1)
}
}
})
}
}
}
quillEditor.css（引用的字体字号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="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;
}
效果
// 原来默认生成的html带类名
<p class="ql-align-center">测试</p>
// 现在改回style行内式
<p style="text-align:center">测试</p>