index.vue
3.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<style lang="scss">
.eagle-editor {
.ql-toolbar {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
border-color: #dcdfe6 !important;
}
.custom-height {
.ql-container {
border-bottom-left-radius: 4px !important;
border-bottom-right-radius: 4px !important;
border-color: #dcdfe6 !important;
white-space: pre !important;
}
}
.height-100 {
.ql-container {
height: 100px !important;
}
}
.height-200 {
.ql-container {
height: 200px !important;
}
}
.height-400 {
.ql-container {
height: 400px !important;
}
}
}
</style>
<template>
<div class="eagle-editor">
<quill-editor :class="`custom-height height-${height}`" ref="myQuillEditor" v-model="content" :options="editorOption" @ready="onEditorReady"></quill-editor>
</div>
</template>
<script>
export default {
name: 'Editor',
props: {
value: String,
url: String,
height: {
type: [String, Number],
default: 400
},
headers: {
type: Object,
default() {
return {};
}
},
QuillWatch: [Object, Function]
},
watch: {
value(val) {
this.content = val;
},
content(val) {
this.$emit('input', val);
}
},
mounted() {
this.content = this.value;
this.$emit('input', this.content);
},
data() {
return {
content: undefined,
quill: undefined,
editorOption: {
placeholder: '请输入内容',
modules: {
ImageExtend: {
loading: true,
name: 'img',
headers: (xhr) => {
Object.keys(this.headers).forEach(key => {
xhr.setRequestHeader(key, this.headers[key]);
})
},
action: this.url,
response: (response) => {
const { result = [] } = response;
const url = result[0];
return url;
}
},
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['12px', '14px', '16px', '18px', '20px', '24px', '32px'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
],
handlers: {
'image': function () {
if (this.QuillWatch) {
this.QuillWatch.emit(this.quill.id)
}
}
}
}
}
},
}
},
methods: {
onEditorReady(quill) {
this.quill = quill;
},
},
}
</script>