markdown格式展示样式修改
This commit is contained in:
@@ -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'
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
@@ -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
@@ -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
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