textarea.vue
1.8 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
<template>
<div class="textarea-container">
<div ref="editor" class="editor"></div>
</div>
</template>
<script>
import { uploadImage } from '@/api/oa/editWorkApi'
import { getCommunityId } from '@/api/community/communityApi'
export default {
name: 'TextareaEditor',
data() {
return {
content: ''
}
},
mounted() {
this._initEditor()
},
methods: {
_initEditor() {
$(this.$refs.editor).summernote({
lang: 'zh-CN',
height: 300,
placeholder: this.$t('textarea.placeholder'),
callbacks: {
onImageUpload: (files) => {
this._uploadImage(files[0])
},
onChange: (contents) => {
this.content = contents.replace(/ /g, '').replace(/\s/gi, '')
this.$emit('change', this.content)
}
},
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture']]
]
})
},
setText(content) {
$(this.$refs.editor).summernote('code', content)
},
async _uploadImage(file) {
const formData = new FormData()
formData.append('uploadFile', file)
formData.append('communityId', getCommunityId())
try {
const res = await uploadImage(formData)
$(this.$refs.editor).summernote('insertImage', res.url)
} catch (error) {
console.error('上传图片失败:', error)
this.$message.error(this.$t('textarea.uploadFailed'))
}
}
}
}
</script>
<style lang="scss" scoped>
.textarea-container {
.editor {
width: 100%;
}
}
</style>