<template>
|
<div class="box">
|
<el-row><h3 style="margin-top: 0px">{{ $route.query.title }}</h3></el-row>
|
新闻标题：<el-input v-model="title" placeholder="请输入新闻标题"></el-input><br/><br/>
|
发布日期：<el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="releaseTime" placeholder="请选择新闻发布日期"></el-date-picker><br/><br/>
|
新闻内容：<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
|
<el-row style="margin-top:50px;">
|
<el-button type="success" @click="submit">发布</el-button>
|
<!-- <input type="file" @change="chooseFile"/><br/><br/>
|
<el-button type="success" @click="tijiao">提交</el-button><br/><br/>
|
<img :src="'http://localhost:7070/'+this.photo" style="width: 400px"> -->
|
</el-row>
|
</div>
|
</template>
|
<script>
|
import axios from 'axios'
|
|
import { add,fileUpload, login } from '../../api/api'
|
import {quillEditor,Quill} from 'vue-quill-editor'
|
import 'quill/dist/quill.core.css'
|
import 'quill/dist/quill.snow.css'
|
import 'quill/dist/quill.bubble.css'
|
import { container, ImageExtend,QuillWatch } from 'quill-image-extend-module'
|
Quill.register('modules/ImageExtend', ImageExtend)
|
axios.defaults.withCredentials = true;
|
|
export default {
|
components:{ quillEditor },
|
data(){
|
return {
|
title:'', //标题内容
|
releaseTime:'', //发布日期
|
content: '', //新闻内容
|
picture:null,
|
photo:'',
|
newsCategoryId:2,
|
editorOption: {
|
placeholder: "请输入正文",
|
modules: {
|
ImageExtend: { // 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入
|
name: 'file', // 图片参数名
|
loading: true,
|
size: 10, // 可选参数 图片大小，单位为M，1M = 1024kb
|
action:'http://localhost:7070/uploading',
|
response: (res) => {
|
console.log(res);
|
return 'http://localhost:7070/'+res.data
|
},
|
headers: (xhr) => {
|
// axios.defaults.withCredentials = true;
|
// xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288')
|
}, // 可选参数 设置请求头部
|
sizeError: () => {}, // 图片超过大小的回调
|
start: () => {}, // 可选参数 自定义开始上传触发事件
|
end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
|
error: () => {}, // 可选参数 上传失败触发的事件
|
success: () => {}, // 可选参数 上传成功触发的事件
|
change: (xhr, formData) => {
|
// formData.append('token', 'myToken')
|
} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
|
},
|
toolbar:{
|
container:[
|
['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'], //清除字体样式
|
['image'] //上传图片、上传视频
|
],
|
handlers: {
|
'image': function () { // 劫持原来的图片点击按钮事件
|
QuillWatch.emit(this.quill.id)
|
}
|
}
|
},
|
},
|
} , //编辑器新闻对象
|
fileList:[],
|
}
|
},
|
created(){
|
// console.log('>>>>>>>',this.$route.query.id);
|
this.newsCategoryId = this.$route.query.id
|
},
|
mounted(){
|
},
|
methods:{
|
// chooseFile(file){
|
// this.picture = file.target.files[0];
|
// console.log(this.picture)
|
// return false;
|
// },
|
// tijiao(){
|
// const fd = new FormData()
|
// fd.append('file',this.picture)
|
// fileUpload(fd).then(res => {
|
// console.log(res)
|
// if(res.code == 200){
|
// this.photo = res.data
|
// console.log(this.photo);
|
// }
|
// })
|
// },
|
submit(){
|
const data = {
|
newsCategoryId:this.newsCategoryId,
|
content:this.content,
|
title:this.title,
|
releaseTime:this.releaseTime
|
}
|
console.log(this.content);
|
// console.log(this.newsCategoryId);
|
add(data).then(res => {
|
console.log(res);
|
if(res.code !== 200){
|
return this.$message.error('发布新闻失败，请重试！')
|
}else{
|
this.$message.success('新闻发布成功！')
|
console.log(this.content);
|
this.$router.go(-1)
|
}
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.box{
|
width: 1200px;
|
margin: 0 auto;
|
}
|
.myQuillEditor{
|
height: 350px;
|
}
|
.btn{
|
position: absolute;
|
bottom: 20px;
|
left: 168px;
|
}
|
.ql-editor img{
|
width: 100px !important;
|
height: 100px !important;
|
}
|
</style>
|
