<template>
|
<transition name="el-fade-in-linear el-fade-in">
|
<div
|
class="markdown-preview-wrapper"
|
v-show="visible"
|
|
>
|
<!-- 顶部信息栏 & 工具栏 -->
|
<div class="tip-wrapper" v-if="visible">
|
<div class="name" :title="$file.getFileNameComplete(fileInfo)">
|
{{ $file.getFileNameComplete(fileInfo) }}
|
<span class="un-save" v-show="isModify">（未保存）</span>
|
</div>
|
<div class="editor-preveiw">
|
在线预览{{ editable ? ' & 编辑' : '' }}
|
</div>
|
<div class="tool-wrapper">
|
<a
|
class="item download-link"
|
target="_blank"
|
:href="$file.getDownloadFilePath(fileInfo,token)"
|
:download="$file.getFileNameComplete(fileInfo)"
|
>
|
<i class="el-icon-download" title="下载"></i>
|
</a>
|
<el-tooltip effect="dark" placement="bottom">
|
<div slot="content">
|
1. 点击文档以外的区域可退出查看<br />
|
2. 按 Esc 键可退出查看
|
</div>
|
<div class="item text-wrapper">
|
<span class="text">操作提示</span>
|
<i class="el-icon-s-opportunity"></i>
|
</div>
|
</el-tooltip>
|
<i
|
class="item el-icon-close"
|
title="关闭预览"
|
@click="closeMarkdownPreview"
|
></i>
|
</div>
|
</div>
|
<!-- mavon-editor 组件，配置项说明文档 https://www.npmjs.com/package/mavon-editor -->
|
<mavonEditor
|
ref="mavonEditor"
|
v-model="markdownText"
|
:toolbars="toolbars"
|
:editable="editable"
|
:toolbarsFlag="toolbarsFlag"
|
:externalLink="externalLink"
|
:subfield="device === 'mobile' ? false : true"
|
defaultOpen="preview"
|
v-loading="markdownLoading"
|
@save="handleModifyFileContent"
|
></mavonEditor>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
import { mavonEditor } from 'mavon-editor'
|
import 'mavon-editor/dist/css/index.css'
|
// 代码高亮样式表
|
// import 'public/mavonEditor/css/tomorrow-night.css'
|
// import 'public/mavonEditor/css/github-markdown.css'
|
import store from '@/store/index.js'
|
//import { getFilePreview, modifyFileContent } from '_r/file.js'
|
import {
|
deleteAction,
|
getAction,
|
postAction,
|
downFile,
|
getFileAccessHttpUrl, getDeskDownloadHttpUrl
|
} from '@/api/manage'
|
export default {
|
name: 'ImgPreview',
|
components: {
|
mavonEditor
|
},
|
data() {
|
return {
|
visible: false, // markdown 预览遮罩层组件是否显示
|
originalMarkdownText: '', // markdown 原本的文本
|
markdownText: '', // markdown 实时修改的文本
|
markdownLoading: false, // markdown 内容是否加载中
|
// 工具栏
|
toolbars: {
|
bold: true, // 粗体
|
italic: true, // 斜体
|
header: true, // 标题
|
underline: true, // 下划线
|
strikethrough: true, // 中划线
|
mark: true, // 标记
|
superscript: true, // 上角标
|
subscript: true, // 下角标
|
quote: true, // 引用
|
ol: true, // 有序列表
|
ul: true, // 无序列表
|
link: true, // 链接
|
imagelink: true, // 图片链接
|
code: true, // code
|
table: true, // 表格
|
fullscreen: true, // 全屏编辑
|
readmodel: true, // 沉浸式阅读
|
htmlcode: true, // 展示html源码
|
help: true, // 帮助
|
/* 1.3.5 */
|
undo: true, // 上一步
|
redo: true, // 下一步
|
trash: true, // 清空
|
save: true, // 保存（触发 events 中的 save 事件）
|
/* 1.4.2 */
|
navigation: true, // 导航目录
|
/* 2.1.8 */
|
alignleft: true, // 左对齐
|
aligncenter: true, // 居中
|
alignright: true, // 右对齐
|
/* 2.2.1 */
|
subfield: true, // 单双栏模式
|
preview: true // 预览
|
}
|
}
|
},
|
computed: {
|
device() {
|
return store.getters.device
|
},
|
token() {
|
return store.getters.token
|
},
|
// 是否修改
|
isModify() {
|
return this.originalMarkdownText !== this.markdownText
|
},
|
// 外链 cdn 改为本地引入
|
externalLink() {
|
let context =
|
process.env.NODE_ENV === 'production'
|
? '/' // 生产环境
|
: '/' // 开发环境
|
return {
|
markdown_css: function () {
|
// 这是你的markdown css文件路径
|
return `${context}mavonEditor/css/github-markdown.css`
|
},
|
hljs_js: function () {
|
// 这是你的hljs文件路径
|
return `${context}mavonEditor/js/highlight.min.js`
|
},
|
hljs_css: function () {
|
// 这是你的代码高亮配色文件路径
|
return `${context}mavonEditor/css/tomorrow-night.css`
|
},
|
hljs_lang: function () {
|
// 这是你的代码高亮语言解析路径
|
return `${context}mavonEditor/js/lang.hljs.js`
|
},
|
katex_css: function () {
|
// 这是你的katex配色方案路径路径
|
return `${context}mavonEditor/css/katex.min.css`
|
},
|
katex_js: function () {
|
// 这是你的katex.js路径
|
return `${context}mavonEditor/js/katex.min.js`
|
}
|
}
|
},
|
// 工具栏是否展示
|
toolbarsFlag() {
|
return this.editable
|
}
|
},
|
watch: {
|
// 监听 markdown 查看组件 显隐状态变化
|
visible(val) {
|
if (val) {
|
this.getMarkdownText()
|
// 添加键盘 Esc 事件
|
this.$nextTick(() => {
|
document.addEventListener('keyup', (e) => {
|
if (e.keyCode === 27) {
|
this.closeMarkdownPreview()
|
}
|
})
|
})
|
} else {
|
document.removeEventListener('keyup', (e) => {
|
if (e.keyCode === 27) {
|
this.closeMarkdownPreview()
|
}
|
})
|
}
|
}
|
},
|
methods: {
|
/**
|
* 获取 markdown 文本内容
|
*/
|
getMarkdownText() {
|
this.markdownLoading = true
|
getAction('/fileTransfer/preview',{
|
userFileId: this.fileInfo.pathId,
|
isMin: false,
|
shareBatchNum: this.fileInfo.shareBatchNum,
|
extractionCode: this.fileInfo.extractionCode,
|
token: this.token
|
}).then((res) => {
|
this.markdownLoading = false
|
this.originalMarkdownText = res
|
this.markdownText = res
|
})
|
},
|
/**
|
* 修改 markdown 文本内容
|
*/
|
handleModifyFileContent() {
|
this.markdownLoading = true
|
postAction('/document/update',{
|
userFileId: this.fileInfo.pathId,
|
fileContent: this.markdownText
|
})
|
.then((res) => {
|
this.markdownLoading = false
|
if (res.success) {
|
this.$message.success('已保存')
|
this.getMarkdownText()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
.catch((err) => {
|
this.markdownLoading = false
|
this.$message.error(err.message)
|
})
|
},
|
/**
|
* 关闭 markdown 预览
|
*/
|
closeMarkdownPreview() {
|
const that = this
|
if(this.isModify) {
|
|
this.$confirm({
|
content: `工作区内容尚未保存, 是否保存?`,
|
onOk: () => {
|
that.handleModifyFileContent()
|
that.visible = false
|
that.callback('cancel')
|
},
|
onCancel() {
|
that.visible = false
|
that.callback('cancel')
|
},
|
})
|
|
} else {
|
that.visible = false
|
that.callback('cancel')
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@import '~@assets/file/less/varibles.less';
|
|
.markdown-preview-wrapper {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
overflow: auto;
|
width: 100%;
|
height: 100vh;
|
z-index: 30;
|
text-align: center;
|
display: flex;
|
align-items: center;
|
animation: imgPreviewAnimation 0.3s;
|
-webkit-animation: imgPreviewAnimation 0.3s; /* Safari and Chrome */
|
animation-iteration-count: 0.3;
|
-webkit-animation-iteration-count: 0.3;
|
animation-fill-mode: forwards;
|
-webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
|
@keyframes imgPreviewAnimation {
|
0% {
|
background: transparent;
|
}
|
100% {
|
background: rgba(0, 0, 0, 0.8);
|
}
|
}
|
@keyframes imgPreviewAnimation {
|
0% {
|
background: transparent;
|
}
|
100% {
|
background: rgba(0, 0, 0, 0.8);
|
}
|
}
|
.tip-wrapper {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 30;
|
background: rgba(0, 0, 0, 0.5);
|
padding: 0 48px;
|
width: 100%;
|
height: 48px;
|
line-height: 48px;
|
color: #fff;
|
font-size: 16px;
|
display: flex;
|
justify-content: space-between;
|
.name {
|
flex: 1;
|
padding-right: 16px;
|
text-align: left;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
.un-save {
|
color: @Warning;
|
font-size: 14px;
|
}
|
}
|
.tool-wrapper {
|
flex: 1;
|
display: flex;
|
justify-content: flex-end;
|
.item {
|
margin-left: 16px;
|
height: 48px;
|
line-height: 48px;
|
cursor: pointer;
|
&:hover {
|
opacity: 0.7;
|
}
|
}
|
.save-img {
|
margin: 16px 0;
|
width: 16px;
|
height: 16px;
|
}
|
.download-link {
|
color: inherit;
|
font-size: 18px;
|
}
|
.text-wrapper {
|
.text {
|
margin-right: 8px;
|
}
|
}
|
}
|
}
|
|
/deep/ .v-note-wrapper {
|
box-shadow: none !important;
|
border: 1px solid @BorderBase;
|
.v-note-op {
|
border-bottom-color: @BorderBase;
|
.op-image {
|
.dropdown-item:nth-of-type(2) {
|
display: none;
|
}
|
}
|
}
|
.v-note-navigation-wrapper {
|
.v-note-navigation-content {
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 {
|
color: @PrimaryText;
|
&:hover {
|
color: @PrimaryText;
|
}
|
}
|
}
|
}
|
}
|
/deep/ .v-note-wrapper:not(.fullscreen) {
|
margin: 56px auto 0 auto;
|
width: 90vw;
|
height: calc(100vh - 80px);
|
}
|
}
|
</style>
|
