新闻发布 - 管理后台

<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" />
    <input type="file" ref="videoInput" accept="video/mp4" style="display:none" @change="uploadVideo" />
    <el-row style="margin-top:50px;">
      <el-button type="success" @click="submit">发布</el-button>
    </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'
import { VideoExtend } from 'quill-video-extend-module'
Quill.register({
  'modules/ImageExtend': ImageExtend,
  'modules/VideoExtend': VideoExtend
})
// axios.defaults.withCredentials = true
<p>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 =&gt; {
console.log(res)
return 'http://localhost:7070/' + res.data
},
headers: xhr =&gt; {
// axios.defaults.withCredentials = true;
// xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288')
}, // 可选参数 设置请求头部
sizeError: () =&gt; {}, // 图片超过大小的回调
start: () =&gt; {}, // 可选参数 自定义开始上传触发事件
end: () =&gt; {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
error: () =&gt; {}, // 可选参数 上传失败触发的事件
success: () =&gt; {}, // 可选参数  上传成功触发的事件
change: (xhr, formData) =&gt; {
// formData.append('token', 'myToken')
} // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
},
VideoExtend: {
// 可选参数，设置上传视频的格式
formats: ['mp4']
},
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'],
[{
video: function() {
// 触发input的点击事件，选择视频文件
this.$refs.videoInput.click()
}
}]
],
handlers: {
image: function() {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id)
}
}
}
}
}, // 编辑器新闻对象
fileList: []
}
},
created() {
// console.log('&gt;&gt;&gt;&gt;&gt;&gt;&gt;',this.$route.query.id);
this.newsCategoryId = this.$route.query.id
},
mounted() {},
methods: {
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 =&gt; {
console.log(res)
if (res.code !== 200) {
return this.$message.error('发布新闻失败，请重试！')
} else {
this.$message.success('新闻发布成功！')
console.log(this.content)
this.$router.go(-1)
}
})
},
uploadVideo() {
// 获取input中的文件
const file = this.$refs.videoInput.files[0]
if (!file) return
// 调用fileUpload接口上传文件
fileUpload(file).then(res =&gt; {
if (res.code === 200) {
// 获取视频链接
const url = res.data.url
// 插入视频
const range = this.$refs.text.quill.getSelection()
this.$refs.text.quill.insertEmbed(range.index, 'video', url)
} else {
this.$message.error('上传视频失败，请重试')
}
})
}
}
}
</script></p>
<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>
<style lang="less" scoped>
  // ...
  .video-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 12px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: #409eff;
    border: 1px solid #409eff;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  .video-btn:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
</style>