wiki文章增加图片预览功能
This commit is contained in:
暮光：城中城
@@ -53,7 +53,7 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="wiki-content w-e-text">
|
||||
<div class="wiki-content w-e-text" ref="pageContent">
|
||||
<div v-html="pageHistoryDetail" v-if="!!pageHistoryDetail"></div>
|
||||
<div v-html="pageContent.content" v-else></div>
|
||||
</div>
|
||||
@@ -197,6 +197,7 @@
|
||||
<el-button type="primary" v-on:click="saveUserPageAuth">保存配置</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-image-viewer v-if="showImagePreview" :url-list="showImagePreviewList" :on-close="closeImagePreview" :initial-index="previewInitialIndex"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -205,6 +206,7 @@
|
||||
import pageApi from '../../common/api/page'
|
||||
import userApi from '../../common/api/user'
|
||||
import {mavonEditor, markdownIt} from 'mavon-editor'
|
||||
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
|
||||
|
||||
var page = {
|
||||
colorArr: ["#67C23A", "#409EFF", "#E6A23C", "#F56C6C", "#909399", "#303133"],
|
||||
@@ -212,6 +214,7 @@
|
||||
};
|
||||
export default {
|
||||
props: ['spaceInfo'],
|
||||
components: {'el-image-viewer': ElImageViewer},
|
||||
data() {
|
||||
return {
|
||||
// 页面展示相关
|
||||
@@ -243,6 +246,10 @@
|
||||
pageHistoryChoice: {},
|
||||
pageHistoryList: [],
|
||||
pageHistoryPageNum: 1,
|
||||
// 大图预览
|
||||
previewInitialIndex: 0,
|
||||
showImagePreview: false,
|
||||
showImagePreviewList: [],
|
||||
};
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
@@ -481,10 +488,25 @@
|
||||
this.$emit('switchSpace', this.wikiPage.spaceId);
|
||||
// 调用父方法展开目录树
|
||||
this.$emit('changeExpandedKeys', pageId);
|
||||
setTimeout(() => this.previewPageImage(), 1000);
|
||||
});
|
||||
this.loadCommentList(pageId);
|
||||
this.getPageHistory(pageId, 1);
|
||||
},
|
||||
closeImagePreview() {
|
||||
this.showImagePreview = false;
|
||||
},
|
||||
previewPageImage() {
|
||||
this.showImagePreviewList = [];
|
||||
const imgSelector = this.$refs.pageContent.querySelectorAll('img');
|
||||
imgSelector.forEach((item, index) => {
|
||||
this.showImagePreviewList.push(item.src);
|
||||
item.onclick = () => {
|
||||
this.showImagePreview = true;
|
||||
this.previewInitialIndex = index;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadCommentList(pageId) {
|
||||
this.cancelCommentUser();
|
||||
pageApi.pageCommentList({pageId: pageId}).then(json => {
|
||||
@@ -608,10 +630,10 @@
|
||||
.page-show-vue .wiki-title{font-size: 20px;text-align: center;font-weight: bold;}
|
||||
.page-show-vue .create-user-time{margin-right: 20px;}
|
||||
.page-show-vue .wiki-author{font-size: 14px;color: #888;padding: 20px 0;height: 40px;line-height: 40px;}
|
||||
.page-show-vue .wiki-content{font-size: 14px;}
|
||||
.page-show-vue .wiki-content{font-size: 14px;padding: 6px;}
|
||||
.page-show-vue .wiki-content img{cursor: pointer;max-width: 100%;}
|
||||
.page-show-vue .wiki-content img:hover{box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);}
|
||||
.page-show-vue .wiki-content.w-e-text{overflow-y: auto;}
|
||||
.page-show-vue .wiki-content.w-e-text img{cursor: auto;}
|
||||
.page-show-vue .wiki-content.w-e-text img:hover{box-shadow: unset;}
|
||||
|
||||
.page-show-vue .upload-page-file .el-upload-list{display: none;}
|
||||
.page-show-vue .is-link{color: #1e88e5;cursor: pointer;}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
.el-main{overflow:hidden}.page-show-vue{height:100%}.page-show-vue .icon-collapse{float:left;font-size:25px;color:#aaa;margin-top:8px;cursor:pointer}.page-show-vue .icon-collapse:hover{color:#eee}.page-show-vue .wiki-title{font-size:20px;text-align:center;font-weight:700}.page-show-vue .create-user-time{margin-right:20px}.page-show-vue .wiki-author{font-size:14px;color:#888;padding:20px 0;height:40px;line-height:40px}.page-show-vue .wiki-content{font-size:14px}.page-show-vue .wiki-content.w-e-text{overflow-y:auto}.page-show-vue .wiki-content.w-e-text img{cursor:auto}.page-show-vue .wiki-content.w-e-text img:hover{-webkit-box-shadow:unset;box-shadow:unset}.page-show-vue .upload-page-file .el-upload-list{display:none}.page-show-vue .is-link{color:#1e88e5;cursor:pointer}.page-show-vue #newPageContentDiv .w-e-text-container{height:600px!important}.page-show-vue .head{float:left;background-color:#ccc;border-radius:50%;margin-right:10px;width:45px;height:45px;line-height:45px;text-align:center;color:#fff}.page-show-vue .el-tabs__header{margin:0}.page-show-vue .el-tabs__nav-wrap{padding:0 20px}.page-show-vue .close-action-tab{position:absolute;right:15px;top:12px;cursor:pointer;z-index:1}.page-show-vue .action-tab-box{height:calc(100vh - 120px);overflow:auto;padding:20px 10px}.page-show-vue .action-box-empty{text-align:center;padding-top:30px;color:#888;font-size:14px}.page-show-vue .history-item{height:55px;line-height:25px;cursor:pointer;vertical-align:middle}.page-show-vue .history-loading-status{margin-left:5px;color:#67c23a}.page-show-vue .history-loading-status.el-icon-circle-close{color:#f56c6c}.page-show-vue .el-timeline{-webkit-padding-start:0;padding-inline-start:0}.page-show-vue .comment-user-name{margin-bottom:10px}.page-show-vue .comment-content{padding:0;color:#666;margin:0;white-space:pre-wrap;word-wrap:break-word;line-height:20px}.page-show-vue .comment-input-box{position:absolute;bottom:0;width:100%;background:#fff;border-top:1px solid #f1f1f1}.page-show-vue .comment-input-box textarea{resize:none;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;outline:none!important;padding:10px}.page-show-vue .comment-card .comment-user-name .el-icon-delete{color:#888;font-size:13px;cursor:pointer;float:right;display:none}.page-show-vue .comment-card:hover .comment-user-name .el-icon-delete{display:inline-block}.wiki-content table{border-top:1px solid #ccc;border-left:1px solid #ccc}.wiki-content table td,.wiki-content table th{border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:3px 5px}.wiki-content table th{border-bottom:2px solid #ccc;text-align:center}.wiki-content blockquote{display:block;border-left:8px solid #d0e5f2;padding:5px 10px;margin:10px 0;line-height:1.4;font-size:100%;background-color:#f1f1f1}.wiki-content code{display:inline-block;*display:inline;*zoom:1;background-color:#f1f1f1;border-radius:3px;padding:3px 5px;margin:0 3px}.wiki-content pre code{display:block}.wiki-content ul,ol{margin:10px 0 10px 20px}
|
||||
@@ -0,0 +1 @@
|
||||
.el-main{overflow:hidden}.page-show-vue{height:100%}.page-show-vue .icon-collapse{float:left;font-size:25px;color:#aaa;margin-top:8px;cursor:pointer}.page-show-vue .icon-collapse:hover{color:#eee}.page-show-vue .wiki-title{font-size:20px;text-align:center;font-weight:700}.page-show-vue .create-user-time{margin-right:20px}.page-show-vue .wiki-author{font-size:14px;color:#888;padding:20px 0;height:40px;line-height:40px}.page-show-vue .wiki-content{font-size:14px;padding:6px}.page-show-vue .wiki-content img{cursor:pointer;max-width:100%}.page-show-vue .wiki-content img:hover{-webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.3);box-shadow:0 2px 6px 0 rgba(0,0,0,.3)}.page-show-vue .wiki-content.w-e-text{overflow-y:auto}.page-show-vue .upload-page-file .el-upload-list{display:none}.page-show-vue .is-link{color:#1e88e5;cursor:pointer}.page-show-vue #newPageContentDiv .w-e-text-container{height:600px!important}.page-show-vue .head{float:left;background-color:#ccc;border-radius:50%;margin-right:10px;width:45px;height:45px;line-height:45px;text-align:center;color:#fff}.page-show-vue .el-tabs__header{margin:0}.page-show-vue .el-tabs__nav-wrap{padding:0 20px}.page-show-vue .close-action-tab{position:absolute;right:15px;top:12px;cursor:pointer;z-index:1}.page-show-vue .action-tab-box{height:calc(100vh - 120px);overflow:auto;padding:20px 10px}.page-show-vue .action-box-empty{text-align:center;padding-top:30px;color:#888;font-size:14px}.page-show-vue .history-item{height:55px;line-height:25px;cursor:pointer;vertical-align:middle}.page-show-vue .history-loading-status{margin-left:5px;color:#67c23a}.page-show-vue .history-loading-status.el-icon-circle-close{color:#f56c6c}.page-show-vue .el-timeline{-webkit-padding-start:0;padding-inline-start:0}.page-show-vue .comment-user-name{margin-bottom:10px}.page-show-vue .comment-content{padding:0;color:#666;margin:0;white-space:pre-wrap;word-wrap:break-word;line-height:20px}.page-show-vue .comment-input-box{position:absolute;bottom:0;width:100%;background:#fff;border-top:1px solid #f1f1f1}.page-show-vue .comment-input-box textarea{resize:none;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;outline:none!important;padding:10px}.page-show-vue .comment-card .comment-user-name .el-icon-delete{color:#888;font-size:13px;cursor:pointer;float:right;display:none}.page-show-vue .comment-card:hover .comment-user-name .el-icon-delete{display:inline-block}.wiki-content table{border-top:1px solid #ccc;border-left:1px solid #ccc}.wiki-content table td,.wiki-content table th{border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:3px 5px}.wiki-content table th{border-bottom:2px solid #ccc;text-align:center}.wiki-content blockquote{display:block;border-left:8px solid #d0e5f2;padding:5px 10px;margin:10px 0;line-height:1.4;font-size:100%;background-color:#f1f1f1}.wiki-content code{display:inline-block;*display:inline;*zoom:1;background-color:#f1f1f1;border-radius:3px;padding:3px 5px;margin:0 3px}.wiki-content pre code{display:block}.wiki-content ul,ol{margin:10px 0 10px 20px}
|
||||
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-wiki.png><title>WIKI文档管理系统</title><link href=css/chunk-009efa60.c1509684.css rel=prefetch><link href=css/chunk-32cc5643.5a5b2ca1.css rel=prefetch><link href=css/chunk-33457f32.88156f9e.css rel=prefetch><link href=css/chunk-34407190.57bbfb51.css rel=prefetch><link href=css/chunk-4b763d50.edd147c5.css rel=prefetch><link href=css/chunk-5544a2b8.17d2b8a1.css rel=prefetch><link href=css/chunk-578c28a7.83c6d32d.css rel=prefetch><link href=css/chunk-5dc97978.ec6236ec.css rel=prefetch><link href=js/chunk-009efa60.dbe73c24.js rel=prefetch><link href=js/chunk-2d207ece.20edf665.js rel=prefetch><link href=js/chunk-2d20f55a.217546ad.js rel=prefetch><link href=js/chunk-32cc5643.fcf57a84.js rel=prefetch><link href=js/chunk-33457f32.670d1b18.js rel=prefetch><link href=js/chunk-34407190.69ced152.js rel=prefetch><link href=js/chunk-4b763d50.e8bf0362.js rel=prefetch><link href=js/chunk-5544a2b8.774dc497.js rel=prefetch><link href=js/chunk-578c28a7.54a578cc.js rel=prefetch><link href=js/chunk-5dc97978.1238356c.js rel=prefetch><link href=css/app.3d0d405b.css rel=preload as=style><link href=css/chunk-vendors.43fc3011.css rel=preload as=style><link href=js/app.4dd6b6f6.js rel=preload as=script><link href=js/chunk-vendors.4d2ae4cf.js rel=preload as=script><link href=css/chunk-vendors.43fc3011.css rel=stylesheet><link href=css/app.3d0d405b.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-wiki-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.4d2ae4cf.js></script><script src=js/app.4dd6b6f6.js></script></body></html>
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-wiki.png><title>WIKI文档管理系统</title><link href=css/chunk-009efa60.c1509684.css rel=prefetch><link href=css/chunk-32cc5643.5a5b2ca1.css rel=prefetch><link href=css/chunk-34407190.57bbfb51.css rel=prefetch><link href=css/chunk-4b763d50.edd147c5.css rel=prefetch><link href=css/chunk-5544a2b8.17d2b8a1.css rel=prefetch><link href=css/chunk-566cb39a.72393404.css rel=prefetch><link href=css/chunk-578c28a7.83c6d32d.css rel=prefetch><link href=css/chunk-5dc97978.ec6236ec.css rel=prefetch><link href=js/chunk-009efa60.dbe73c24.js rel=prefetch><link href=js/chunk-2d207ece.20edf665.js rel=prefetch><link href=js/chunk-2d20f55a.217546ad.js rel=prefetch><link href=js/chunk-32cc5643.fcf57a84.js rel=prefetch><link href=js/chunk-34407190.69ced152.js rel=prefetch><link href=js/chunk-4b763d50.e8bf0362.js rel=prefetch><link href=js/chunk-5544a2b8.774dc497.js rel=prefetch><link href=js/chunk-566cb39a.d4bb3e71.js rel=prefetch><link href=js/chunk-578c28a7.54a578cc.js rel=prefetch><link href=js/chunk-5dc97978.1238356c.js rel=prefetch><link href=css/app.3d0d405b.css rel=preload as=style><link href=css/chunk-vendors.43fc3011.css rel=preload as=style><link href=js/app.896f3b58.js rel=preload as=script><link href=js/chunk-vendors.4d2ae4cf.js rel=preload as=script><link href=css/chunk-vendors.43fc3011.css rel=stylesheet><link href=css/app.3d0d405b.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-wiki-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.4d2ae4cf.js></script><script src=js/app.896f3b58.js></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user