<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>
