markdown格式展示样式修改

This commit is contained in:
暮光:城中城
2021-01-01 17:58:28 +08:00
parent 3fbc7e5b38
commit 8767acf080
11 changed files with 39 additions and 31 deletions

View File

@@ -30,6 +30,7 @@
</el-row>
<el-input v-model="wikiPageEdit.pageTitle" placeholder="请输入标题" class="page-title-input"></el-input>
<mavon-editor v-show="wikiPageEdit.editorType===2" ref="mavonEditor" v-model="markdownContent" :toolbars="toolbars"
:externalLink="false"
@save="createWikiSave(0)" @imgAdd="addMarkdownImage"
placeholder="请录入文档内容" class="page-content-editor"/>
<div v-show="wikiPageEdit.editorType===1" id="newPageContentDiv" class="page-content-editor" style="height: calc(100vh - 250px);"></div>
@@ -41,6 +42,7 @@
import WangEditor from 'wangeditor'
import pageApi from '../../common/api/page'
import {mavonEditor, markdownIt} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import axios from 'axios'

View File

@@ -53,24 +53,24 @@
</el-table-column>
</el-table>
</div>
<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 ref="pageContent">
<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2"></div>
<div v-html="pageShowDetail" class="wiki-html-content" v-else></div>
</div>
<div style="margin-top: 40px; font-size: 14px;">
<span style="vertical-align: top;" class="is-link">
<span v-show="wikiPage.selfZan == 0" v-on:click="zanPage(1)"><img src="../../assets/img/zan.png" style="vertical-align: middle;"> </span>
<span v-show="wikiPage.selfZan == 1" v-on:click="zanPage(0)"><img src="../../assets/img/zan.png" style="vertical-align: middle;transform: rotateX(180deg);"> </span>
</span>
<span style="vertical-align: top;" class="is-link">
<span v-show="wikiPage.selfZan == 0" v-on:click="zanPage(1)"><img src="../../assets/img/zan.png" style="vertical-align: middle;"> </span>
<span v-show="wikiPage.selfZan == 1" v-on:click="zanPage(0)"><img src="../../assets/img/zan.png" style="vertical-align: middle;transform: rotateX(180deg);"> </span>
</span>
<span style="margin-left: 10px;vertical-align: top;">
<span v-if="wikiPage.selfZan == 0 && wikiPage.zanNum <= 0">成为第一个赞同者</span>
<span v-else-if="wikiPage.selfZan == 0 && wikiPage.zanNum > 0"><span class="is-link" v-on:click="showZanPageUser">{{wikiPage.zanNum}}</span>赞了它</span>
<span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum <= 1">我赞了它</span>
<span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum > 1"><span class="is-link" v-on:click="showZanPageUser">我和{{wikiPage.zanNum-1}}个其他人</span>赞了它</span>
</span>
<span v-if="wikiPage.selfZan == 0 && wikiPage.zanNum <= 0">成为第一个赞同者</span>
<span v-else-if="wikiPage.selfZan == 0 && wikiPage.zanNum > 0"><span class="is-link" v-on:click="showZanPageUser">{{wikiPage.zanNum}}</span>赞了它</span>
<span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum <= 1">我赞了它</span>
<span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum > 1"><span class="is-link" v-on:click="showZanPageUser">我和{{wikiPage.zanNum-1}}个其他人</span>赞了它</span>
</span>
<span style="margin-left: 10px;">
<i class="el-icon-view" style="font-size: 16px;color: #666;"></i> {{wikiPage.viewNum}}次阅读
</span>
<i class="el-icon-view" style="font-size: 16px;color: #666;"></i> {{wikiPage.viewNum}}次阅读
</span>
</div>
</div>
<!-- <div v-show="commentList.length > 0" class="comment-box" style="margin-top: 20px;">-->
@@ -209,6 +209,8 @@
import userApi from '../../common/api/user'
import {mavonEditor, markdownIt} from 'mavon-editor'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
var page = {
colorArr: ["#67C23A", "#409EFF", "#E6A23C", "#F56C6C", "#909399", "#303133"],
@@ -245,6 +247,7 @@
actionTabVisible: false,
actionTabActiveName: 'comment',
pageHistoryDetail: '',
pageShowDetail: '',
pageHistoryChoice: {},
pageHistoryList: [],
pageHistoryPageNum: 1,
@@ -418,6 +421,7 @@
if (history.content) {
history.loading = 2;
this.pageHistoryDetail = history.content;
this.pageShowDetail = history.content;
} else {
history.loading = 1;
pageApi.pageHistoryDetail({id: history.id}).then(json => {
@@ -427,6 +431,7 @@
history.content = markdownIt.render(history.content);
}
this.pageHistoryDetail = history.content;
this.pageShowDetail = history.content;
}).catch(() => {
history.loading = 3;
});
@@ -437,6 +442,7 @@
this.pageHistoryDetail = '';
this.pageHistoryChoice = {};
this.pageHistoryList.forEach(item => item.loading = 0);
this.pageShowDetail = this.pageContent.content;
},
computeFileSize(fileSize) {
if (!fileSize) {
@@ -480,6 +486,7 @@
if (this.wikiPage.editorType === 2) {
this.pageContent.content = markdownIt.render(this.pageContent.content);
}
this.pageShowDetail = this.pageContent.content;
// 修改标题
document.title = wikiPage.name || 'WIKI-内容展示';
// 修改最后点击的项,保证刷新后点击编辑能展示编辑的项
@@ -643,10 +650,9 @@
.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;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-html-content{font-size: 14px;padding: 6px;overflow-y: auto;}
.page-show-vue .wiki-html-content img{cursor: pointer;max-width: 100%;}
.page-show-vue .wiki-html-content img:hover{box-shadow: 0 2px 6px 0 rgba(0,0,0,.3);}
.page-show-vue .upload-page-file .el-upload-list{display: none;}
.page-show-vue .is-link{color: #1e88e5;cursor: pointer;}
@@ -706,27 +712,27 @@
display: inline-block;
}
/**展示内容的样式*/
.wiki-content table {
.wiki-html-content table {
border-top: 1px solid #ccc; border-left: 1px solid #ccc;
}
.wiki-content table td, .wiki-content table th {
.wiki-html-content table td, .wiki-html-content table th {
border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px;
}
.wiki-content table th {
.wiki-html-content table th {
border-bottom: 2px solid #ccc; text-align: center;
}
.wiki-content blockquote {
.wiki-html-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 {
.wiki-html-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 {
.wiki-html-content pre code {
display: block;
}
.wiki-content ul, ol {
.wiki-html-content ul, ol {
margin: 10px 0 10px 20px;
}
</style>

View File

@@ -1 +0,0 @@
@font-face{font-family:fontello;src:url(../fonts/fontello.e73a0647.eot);src:url(../fonts/fontello.e73a0647.eot#iefix) format("embedded-opentype"),url(../fonts/fontello.8d4a4e6f.woff2) format("woff2"),url(../fonts/fontello.a782baa8.woff) format("woff"),url(../fonts/fontello.068ca2b3.ttf) format("truetype"),url(../img/fontello.9354499c.svg#fontello) format("svg");font-weight:400;font-style:normal}[class*=" fa-mavon-"]:before,[class^=fa-mavon-]:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-mavon-bold:before{content:"\E800"}.fa-mavon-italic:before{content:"\E801"}.fa-mavon-thumb-tack:before{content:"\E802"}.fa-mavon-link:before{content:"\E803"}.fa-mavon-picture-o:before{content:"\E804"}.fa-mavon-repeat:before{content:"\E805"}.fa-mavon-undo:before{content:"\E806"}.fa-mavon-trash-o:before{content:"\E807"}.fa-mavon-floppy-o:before{content:"\E808"}.fa-mavon-compress:before{content:"\E809"}.fa-mavon-eye:before{content:"\E80A"}.fa-mavon-eye-slash:before{content:"\E80B"}.fa-mavon-question-circle:before{content:"\E80C"}.fa-mavon-times:before{content:"\E80D"}.fa-mavon-align-left:before{content:"\E80F"}.fa-mavon-align-center:before{content:"\E810"}.fa-mavon-align-right:before{content:"\E811"}.fa-mavon-arrows-alt:before{content:"\F0B2"}.fa-mavon-bars:before{content:"\F0C9"}.fa-mavon-list-ul:before{content:"\F0CA"}.fa-mavon-list-ol:before{content:"\F0CB"}.fa-mavon-strikethrough:before{content:"\F0CC"}.fa-mavon-underline:before{content:"\F0CD"}.fa-mavon-table:before{content:"\F0CE"}.fa-mavon-columns:before{content:"\F0DB"}.fa-mavon-quote-left:before{content:"\F10D"}.fa-mavon-code:before{content:"\F121"}.fa-mavon-superscript:before{content:"\F12B"}.fa-mavon-subscript:before{content:"\F12C"}.fa-mavon-header:before{content:"\F1DC"}.fa-mavon-window-maximize:before{content:"\F2D0"}.markdown-body strong{font-weight:bolder}.markdown-body .hljs-center{text-align:center}.markdown-body .hljs-right{text-align:right}.markdown-body .hljs-left{text-align:left}.page-edit-vue .icon-collapse{float:left;font-size:25px;color:#aaa;margin-top:8px;cursor:pointer}.page-edit-vue .icon-collapse:hover{color:#eee}.page-edit-vue .wiki-title{font-size:20px}.page-edit-vue .wiki-author{font-size:14px;color:#888;padding:20px 0;height:40px;line-height:40px}.page-edit-vue .wiki-content{font-size:14px}.page-edit-vue .wiki-content.w-e-text{overflow-y:auto}.page-edit-vue .upload-page-file .el-upload-list{display:none}.page-edit-vue .is-link{color:#1e88e5;cursor:pointer}.page-edit-vue #newPageContentDiv .w-e-text-container{height:100%!important}.page-edit-vue .comment-box .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-edit-vue .page-content-editor,.page-edit-vue .page-title-input{padding:10px 0}

View File

@@ -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;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}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -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-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.b46571a2.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.511cc571.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.16b7cdcd.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.16b7cdcd.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-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=css/chunk-d3c77a1a.16fe166d.css rel=prefetch><link href=css/chunk-d89d7a9a.20967549.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-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=js/chunk-d3c77a1a.77cd8954.js rel=prefetch><link href=js/chunk-d89d7a9a.9964cf11.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.68dbbe64.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.68dbbe64.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