introduce.vue
2.2 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
<template>
<div class="container">
<quill-editor ref="myQuillEditor" class="editor" :options="editorOption" v-model="model.richtext" style="height: 500px;"/>
<el-button type="primary" @click="BtnClick" style=" margin:50px 0px 10px 10px">发布介绍</el-button>
</div>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{
header: 1
}, {
header: 2
}], // 1、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: []
}], // 对齐方式
['clean'], // 清除文本格式
// ['link', 'image', 'video'] // 链接、图片、视频
['link', 'image', 'video'] // 链接、图片
]
import {
AddOrUpdRichTextduce,
DelRichTextduce,
GetListRichTextduce
} from '../../api/Introduce.js'
export default {
data() {
return {
editorOption: { // 编辑框操作事件
theme: 'snow', // or 'bubble'
placeholder: '您想发布点什么？',
modules: {
toolbar: {
container: toolbarOptions,
}
}
},
model: {
"id": 0,
"richtext": "",
"add_time": "2022-01-05T08:49:51.139Z",
"update_time": "2022-01-05T08:49:51.139Z",
"status": 0
}
}
},
created() {
},
methods: {
BtnClick() {
if (this.model.richtext == '') {
this.$message.error('请输入内容')
} else {
AddOrUpdRichTextduce(this.model).then(res => {
console.log('res', res)
if(res.data.code==200){
this.$message.success('发布成功')
this.model.richtext=''
}else{
this.$message.error('发布失败')
}
})
}
}
}
}
</script>
<style>
</style>