5330d757
 monkeyhouyi
公司信息管理完成
|
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
|
<template>
<div :class="prefixCls">
<quill-editor v-model="content" ref="myQuillEditor" :content="value" :options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
export default {
name: 'NCCQuill',
components: { quillEditor },
props: {
prefixCls: {
type: String,
default: 'ncc-editor-quill'
},
// 表单校验用字段
// eslint-disable-next-line
value: {
type: String
},
placeholder: {
type: String,
default: '请输入内容...'
}
},
data() {
return {
content: this.value,
editorOption: {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ size: ["small", false, "large", "huge"] }],
[{ color: [] }, { background: [] }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ align: [] }],
[{ direction: "rtl" }],
["clean"],
["link", "image"],
]
},
theme: 'snow',
placeholder: this.placeholder
}
}
},
methods: {
onEditorBlur(quill) {
// console.log('editor blur!', quill)
},
onEditorFocus(quill) {
// console.log('editor focus!', quill)
},
onEditorReady(quill) {
// console.log('editor ready!', quill)
},
onEditorChange({ quill, html, text }) {
// console.log('editor change!', quill, html, text)
// this.$emit('change', html)
this.$emit("input", this.content);
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
watch: {
value(val) {
this.content = val
},
placeholder(val) {
this.$set(this.editorOption, 'placeholder', val)
}
}
}
</script>
<style lang="scss" scoped>
.ncc-editor-quill {
:deep(.ql-editor) {
height: 400px;
min-height: 400px;
}
>>> .ql-toolbar.ql-snow {
border: 1px solid #dcdfe6;
border-bottom: 0;
border-radius: 4px 4px 0 0;
}
>>> .ql-container.ql-snow {
border: 1px solid #dcdfe6;
border-radius: 0 0 4px 4px;
}
}
</style>
|
