<template>
|
<div style="height: 100%">
|
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
|
<div :id="editorId" slot="toolbar">
|
<select class="ql-header" title="段落">
|
<option selected>正文</option>
|
<option value="2">标题1</option>
|
<option value="3">标题2</option>
|
<option value="4">标题3</option>
|
<option value="5">标题4</option>
|
</select>
|
<select class="ql-font" title="字体">
|
<option value="SimSun"></option>
|
<option selected value="Sans-Serif"></option>
|
<option value="SimHei"></option>
|
<option value="Microsoft-YaHei"></option>
|
<option value="KaiTi"></option>
|
<option value="FangSong"></option>
|
<option value="Arial"></option>
|
</select>
|
<select class="ql-size" title="字体大小">
|
<option value="12px"></option>
|
<option selected value="14px"></option>
|
<option value="16px"></option>
|
<option value="18px"></option>
|
<option value="20px"></option>
|
<option value="24px"></option>
|
<option value="30px"></option>
|
<option value="36px"></option>
|
</select>
|
<button class="ql-bold" title="加粗"></button>
|
<button class="ql-italic" title="斜体"></button>
|
<button class="ql-underline" title="下划线"></button>
|
<button class="ql-strike" title="删除线"></button>
|
<button class="ql-code-block" title="代码块"></button>
|
<button class="ql-script" title="下标" value="sub"></button>
|
<button class="ql-script" title="上标" value="super"></button>
|
<button class="ql-indent" title="向左缩进" value="-1"></button>
|
<button class="ql-indent" title="向右缩进" value="+1"></button>
|
<button class="ql-list" value="ordered" title="有序列表"></button>
|
<button class="ql-list" value="bullet" title="无序列表"></button>
|
<select class="ql-color" value="color" title="字体颜色"></select>
|
<select
|
class="ql-background"
|
value="background"
|
title="字体背景"
|
></select>
|
<select class="ql-align" value="align" title="对齐方式"></select>
|
<button class="ql-image" value="image" title="图片"></button>
|
<button class="ql-clean" title="清除文本格式"></button>
|
</div>
|
</quill-editor>
|
</div>
|
</template>
|
<script>
|
import { Quill } from 'vue-quill-editor'
|
const Size = Quill.import('attributors/style/size')
|
Size.whitelist = [
|
'12px',
|
'14px',
|
'16px',
|
'18px',
|
'20px',
|
'24px',
|
'30px',
|
'36px'
|
]
|
Quill.register(Size, true)
|
// // 自定义字体类型
|
var fonts = [
|
'Sans-Serif',
|
'SimHei',
|
'SimSun',
|
'Microsoft-YaHei',
|
'KaiTi',
|
'FangSong',
|
'Arial'
|
]
|
const Font = Quill.import('attributors/style/font')
|
Font.whitelist = fonts
|
Quill.register(Font, true)
|
export default {
|
props: {
|
richContent: {
|
type: String
|
},
|
placeholder: {
|
type: String
|
},
|
editorId: { type: String, default: 'editorDefaultId' }
|
},
|
data() {
|
const _this = this
|
return {
|
content: null,
|
editorOption: {
|
modules: {
|
toolbar: '#' + _this.editorId
|
},
|
theme: 'snow',
|
placeholder: this.placeholder || '请输入内容'
|
},
|
flag: false
|
}
|
},
|
methods: {
|
getRichTextValue() {
|
return this.$refs.myQuillEditor.value
|
},
|
setEnable() {
|
this.$nextTick(() => {
|
this.$refs.myQuillEditor.quill.enable(false)
|
})
|
}
|
},
|
mounted() {
|
this.flag = true
|
this.content = this.richContent
|
},
|
watch: {
|
richContent(val, oldVal) {
|
this.content = this.richContent
|
if (this.flag) {
|
this.$refs.myQuillEditor.quill.enable(false)
|
this.$nextTick(function() {
|
this.$refs.myQuillEditor.quill.enable(true)
|
this.flag = false
|
})
|
}
|
},
|
content() {
|
this.$emit('contentChange', this.content)
|
}
|
}
|
}
|
</script>
|
<style>
|
@import '~@/styles/quill.font.scss';
|
.quill-editor .ql-container {
|
height: 208px;
|
overflow: auto;
|
}
|
.ql-container {
|
white-space: pre-wrap;
|
}
|
</style>
|
