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
| <template>
<div class="editor">
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur"
@focus="onEditorFocus"
@change="onEditorChange">
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: { quillEditor },
props: {
value: {
type: String,
default: ''
},
height: {
type: Number,
default: 300
}
},
data() {
return {
content: this.value,
editorOption: {
theme: 'snow',
modules: {
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': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['link', 'image', 'video'],
['clean']
],
handlers: {
image: this.handleImageUpload
}
}
},
placeholder: '请输入内容...'
}
};
},
watch: {
value(newVal) {
this.content = newVal;
},
content(newVal) {
this.$emit('input', newVal);
}
},
methods: {
onEditorBlur(quill) {
console.log('editor blur!', quill);
},
onEditorFocus(quill) {
console.log('editor focus!', quill);
},
onEditorChange({ quill, html, text }) {
this.content = html;
},
// 自定义图片上传
handleImageUpload() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
const formData = new FormData();
formData.append('file', file);
this.$axios.post('/common/upload', formData).then(res => {
if (res.code === 200) {
const quill = this.$refs.myQuillEditor.quill;
const length = quill.getSelection().index;
quill.insertEmbed(length, 'image', res.url);
quill.setSelection(length + 1);
}
});
};
}
}
};
</script>
<style scoped>
.editor ::v-deep .ql-editor {
min-height: 300px;
}
</style>
|
