修改：编辑器由mavon-editor改为vditor
This commit is contained in:
jmal
parent
8a47f2cdb6
commit
f44366a166
@ -35,7 +35,6 @@
|
||||
"jshint": "^2.11.1",
|
||||
"less-loader": "^6.1.0",
|
||||
"lib-flexible": "^0.3.2",
|
||||
"mavon-editor": "^2.7.7",
|
||||
"monaco-editor-vue": "^1.0.10",
|
||||
"monaco-editor-webpack-plugin": "^1.9.0",
|
||||
"monaco-languages": "^1.10.0",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
import { Icon } from 'ant-design-vue'
|
||||
const IconFont = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_3royfgdezl.js'
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_7y6nutfxwm5.js'
|
||||
})
|
||||
|
||||
export default {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
}"
|
||||
class="el-backtop">
|
||||
<slot>
|
||||
<el-icon name="caret-top"></el-icon>
|
||||
<svg-icon icon-class="Up"/>
|
||||
</slot>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@ -95,17 +95,11 @@
|
||||
>
|
||||
<span slot="label"><svg-icon class="tabs-icon-svg" :icon-class="findSvgClass(item.name)"></svg-icon> {{item.title}}</span>
|
||||
<div v-if="textPreviewVisible" class="editor">
|
||||
<mavon-editor
|
||||
ref="simTextMd"
|
||||
<vditor-preview
|
||||
class="content-body"
|
||||
v-show="editableTabsValue.endsWith('.md') && previewMode"
|
||||
v-model="item.content"
|
||||
:content="item.content"
|
||||
:style="{height: editorHieght+'px'}"
|
||||
:subfield="false"
|
||||
:boxShadow="true"
|
||||
:toolbarsFlag="true"
|
||||
:toolbars="toolbars"
|
||||
codeStyle="idea"
|
||||
defaultOpen="preview"
|
||||
/>
|
||||
<MonacoEditor
|
||||
v-show="editableTabsValue.endsWith('.md') ? !previewMode: true"
|
||||
@ -148,10 +142,12 @@
|
||||
import FilePathNav from '@/components/Breadcrumb/FilePathNav'
|
||||
import Icon from '@/components/Icon/Icon.vue'
|
||||
|
||||
import VditorPreview from "@/components/preview/VditorPreview";
|
||||
|
||||
export default {
|
||||
name: "SimTextPreview",
|
||||
components: {
|
||||
Icon,MonacoEditor,FileTree,FancyTree,MessageDialog,FilePathNav
|
||||
Icon,MonacoEditor,FileTree,FancyTree,MessageDialog,FilePathNav,VditorPreview
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
@ -1264,4 +1260,9 @@
|
||||
>>> .fancytree-expander {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.content-body {
|
||||
overflow-y: scroll;
|
||||
padding: 20px 30px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
66
src/components/preview/VditorPreview.vue
Normal file
66
src/components/preview/VditorPreview.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="vditor" :style="{height: height}"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vditor from 'vditor/dist/method.min'
|
||||
import "vditor/src/assets/scss/index.scss"
|
||||
export default {
|
||||
name: "VidtorPreview",
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
vditorPreviewShow: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
content(val){
|
||||
if(!this.vditorPreviewShow){
|
||||
this.vditorPreviewInit(val)
|
||||
this.vditorPreviewShow = true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.content){
|
||||
this.vditorPreviewInit(this.content)
|
||||
this.vditorPreviewShow = true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
vditorPreviewInit(content){
|
||||
const that = this
|
||||
vditor.preview(document.getElementById('vditor'),
|
||||
content,{
|
||||
speech: {
|
||||
enable: true,
|
||||
},
|
||||
hljs: {
|
||||
lineNumber: true
|
||||
},
|
||||
after() {
|
||||
that.$emit('after')
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -26,10 +26,6 @@ import contentmenu from 'v-contextmenu'
|
||||
import 'v-contextmenu/dist/index.css'
|
||||
Vue.use(contentmenu)
|
||||
|
||||
// mavonEditor
|
||||
import mavonEditor from 'mavon-editor'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
|
||||
import '@/icons' // icon
|
||||
import '@/permission' // permission control
|
||||
|
||||
@ -92,8 +88,6 @@ Vue.use(CheckboxGroup);
|
||||
Vue.use(Grid);
|
||||
Vue.use(GridItem);
|
||||
|
||||
Vue.use(mavonEditor);
|
||||
|
||||
Vue.use(uploader)
|
||||
Vue.use(EVueContextmenu)
|
||||
|
||||
|
||||
@ -241,14 +241,7 @@
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/deep/ .v-note-wrapper {
|
||||
position: unset;
|
||||
.show {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.v-note-panel {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
/deep/ .article-body {
|
||||
.note-update-date {
|
||||
padding: 0.75rem;
|
||||
border-left: 0.35rem solid;
|
||||
@ -501,12 +494,12 @@
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
/deep/ .right-menu > div.titleList li.active a {
|
||||
color: #13C2C2;
|
||||
}
|
||||
/deep/ .right-menu > div.titleList li:hover a {
|
||||
color: #13C2C2;
|
||||
}
|
||||
///deep/ .right-menu > div.titleList li.active a {
|
||||
// color: #13C2C2;
|
||||
//}
|
||||
///deep/ .right-menu > div.titleList li:hover a {
|
||||
// color: #13C2C2;
|
||||
//}
|
||||
/deep/ .right-menu > div.titleList {
|
||||
.h-1 {
|
||||
padding-left: 10px;
|
||||
@ -534,10 +527,6 @@
|
||||
color: #6a737d;
|
||||
}
|
||||
}
|
||||
/deep/ .right-menu > div.titleList .pl a {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
}
|
||||
/deep/ .right-menu > div.titleList .j-bj {
|
||||
background: linear-gradient(to right, #5d9eea, #afcafd);
|
||||
position: absolute;
|
||||
|
||||
@ -1,36 +1,55 @@
|
||||
<template>
|
||||
<div v-wechat-title="'编辑'+filename">
|
||||
<div v-wechat-title="'编辑:'+filename">
|
||||
<dir-tree ref="dirTree" :append-to-body='true'>
|
||||
<el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
|
||||
</dir-tree>
|
||||
<el-header>
|
||||
<div class="header-item">
|
||||
文章标题：
|
||||
<el-input class="articles-title" placeholder="文章标题" v-model="filename" size="small"/>
|
||||
<el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">
|
||||
<el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>
|
||||
<el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
|
||||
<el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
|
||||
<el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
|
||||
<div class="article-editor">
|
||||
<div class="editor-left">
|
||||
<el-header>
|
||||
<div class="header-item">
|
||||
<span class="title-label">标题：</span>
|
||||
<el-input class="articles-title" placeholder="文章标题" v-model="filename" />
|
||||
<!-- <el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">-->
|
||||
<!-- <el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>-->
|
||||
<!-- </el-input>-->
|
||||
<!-- <el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>-->
|
||||
<!-- <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>-->
|
||||
<!-- <el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>-->
|
||||
<!-- <el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>-->
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div id="vditor"></div>
|
||||
</el-main>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div id="vditor"></div>
|
||||
<!-- <mavon-editor-->
|
||||
<!-- v-model="content"-->
|
||||
<!-- ref="md"-->
|
||||
<!-- @change="change"-->
|
||||
<!-- codeStyle="atelier-dune-dark"-->
|
||||
<!-- :style="{'height': clientHeight+'px'}"-->
|
||||
<!-- :imageFilter="imageFilter"-->
|
||||
<!-- @save="save"-->
|
||||
<!-- @imgAdd="$imgAdd"-->
|
||||
<!-- @imgDel="$imgDel"-->
|
||||
<!-- @fullScreen="fullScreen"-->
|
||||
<!-- />-->
|
||||
</el-main>
|
||||
<div class="editor-right">
|
||||
<div class="operation">
|
||||
<el-button class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
|
||||
<el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
|
||||
<el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
|
||||
</div>
|
||||
<div class="more-setting">
|
||||
<p class="mark-setting-label">文章封面：</p>
|
||||
<el-input
|
||||
class="mark-setting-input"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 8}"
|
||||
placeholder="输入图片URL"
|
||||
v-model="file.cover">
|
||||
</el-input>
|
||||
|
||||
<p class="mark-setting-label">分类：</p>
|
||||
<el-cascader
|
||||
class="mark-setting-input"
|
||||
placeholder="不选择"
|
||||
:options="categories"
|
||||
:show-all-levels="false"
|
||||
:props="{ checkStrictly: true }"
|
||||
clearable></el-cascader>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
:visible.sync="moreSetting"
|
||||
@ -43,7 +62,7 @@
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 8}"
|
||||
placeholder="输入图片URL"
|
||||
v-model="markdownCover">
|
||||
v-model="file.cover">
|
||||
</el-input>
|
||||
</div>
|
||||
</el-drawer>
|
||||
@ -58,6 +77,7 @@
|
||||
|
||||
import Vditor from 'vditor'
|
||||
import "vditor/src/assets/scss/index.scss"
|
||||
import categoryApi from "@/api/category";
|
||||
|
||||
let toolbar = [
|
||||
'emoji',
|
||||
@ -110,10 +130,10 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
file: {},
|
||||
editStatus: false,
|
||||
content:"", // 输入的markdown
|
||||
html:'', // 及时转的html
|
||||
filename: '新建文档',
|
||||
filename: '',
|
||||
clientHeight: document.documentElement.clientHeight - 210,
|
||||
updating: false,
|
||||
adding: false,
|
||||
@ -121,48 +141,65 @@
|
||||
storageLocation: '/',
|
||||
selectLocationVisible: false,
|
||||
moreSetting: false,
|
||||
markdownCover: null,
|
||||
contentEditor: '',
|
||||
categories: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.contentEditor = new Vditor('vditor', {
|
||||
height: this.clientHeight,
|
||||
toolbar,
|
||||
toolbarConfig: {
|
||||
pin: true,
|
||||
},
|
||||
preview: {
|
||||
mode: 'both',
|
||||
hljs: {
|
||||
lineNumber: true
|
||||
}
|
||||
},
|
||||
cache: {
|
||||
enable: false,
|
||||
},
|
||||
after: () => {
|
||||
this.contentEditor.setValue(this.content)
|
||||
},
|
||||
})
|
||||
if(this.$route.query.id){
|
||||
this.editStatus = true
|
||||
markdownApi.getMarkdown({
|
||||
mark: this.$route.query.id
|
||||
}).then((res) => {
|
||||
this.content = res.data.contentText
|
||||
this.filename = res.data.name.split('.md')[0]
|
||||
this.markdownCover = res.data.cover
|
||||
this.storageLocation = res.data.path
|
||||
})
|
||||
}
|
||||
this.getMarkdown()
|
||||
this.categoryTree()
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.reHeight()
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.contentEditor.destroy()
|
||||
},
|
||||
methods: {
|
||||
getMarkdown(){
|
||||
if(this.$route.query.id){
|
||||
this.editStatus = true
|
||||
markdownApi.getMarkdown({
|
||||
mark: this.$route.query.id
|
||||
}).then((res) => {
|
||||
this.file = res.data
|
||||
this.content = this.file.contentText
|
||||
this.filename = this.file.name.split('.md')[0]
|
||||
this.storageLocation = res.data.path
|
||||
// 初始化编辑器
|
||||
this.vditorInit(res.data.contentText)
|
||||
})
|
||||
} else {
|
||||
this.vditorInit('')
|
||||
}
|
||||
},
|
||||
categoryTree() {
|
||||
categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
|
||||
this.categories = res.data
|
||||
})
|
||||
},
|
||||
vditorInit(content){
|
||||
this.contentEditor = new Vditor('vditor', {
|
||||
height: this.clientHeight,
|
||||
toolbar,
|
||||
toolbarConfig: {
|
||||
pin: true,
|
||||
},
|
||||
preview: {
|
||||
mode: 'both',
|
||||
hljs: {
|
||||
lineNumber: true
|
||||
}
|
||||
},
|
||||
cache: {
|
||||
enable: false,
|
||||
},
|
||||
after: () => {
|
||||
this.contentEditor.setValue(content)
|
||||
},
|
||||
})
|
||||
},
|
||||
$imgAdd(pos, $file) {
|
||||
const maxSize = 1024 * 1024 * 5
|
||||
if($file.size > maxSize){
|
||||
@ -231,7 +268,7 @@
|
||||
filename: filename,
|
||||
cover: this.markdownCover,
|
||||
currentDirectory: this.storageLocation,
|
||||
contentText: this.content
|
||||
contentText: this.contentEditor.getValue()
|
||||
}).then((res) => {
|
||||
this.adding = false
|
||||
this.$message({
|
||||
@ -255,7 +292,7 @@
|
||||
filename: filename,
|
||||
cover: this.markdownCover,
|
||||
currentDirectory: this.storageLocation,
|
||||
contentText: this.content
|
||||
contentText: this.contentEditor.getValue()
|
||||
}).then(() => {
|
||||
this.updating = false
|
||||
this.$message({
|
||||
@ -290,27 +327,65 @@
|
||||
/deep/ .el-input-group {
|
||||
width: unset;
|
||||
}
|
||||
.header-item {
|
||||
min-width: 800px;
|
||||
/deep/ .header-item {
|
||||
line-height: 40px;
|
||||
padding: 5px 0 5px 0;
|
||||
.release-button {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
width: 90%;
|
||||
input[type='text'] {
|
||||
font-weight: 900;
|
||||
color: #000000!important;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-bottom: #ccc 1px solid;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.more-setting {
|
||||
padding: 15px;
|
||||
/deep/ .more-setting {
|
||||
.el-input {
|
||||
width: 100%;
|
||||
}
|
||||
margin-top: 68px;
|
||||
.mark-setting-label {
|
||||
font-weight: 500;
|
||||
margin-top: 10px!important;
|
||||
}
|
||||
.mark-setting-input {
|
||||
width: 100%;
|
||||
}
|
||||
.mark-description {
|
||||
font-size: 12px;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
.article-editor {
|
||||
min-width: 1160px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
.editor-left {
|
||||
width: 75%;
|
||||
}
|
||||
.editor-right {
|
||||
width: 25%;
|
||||
.operation {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.article-editor {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="leimupinleifenleileibie"></svg-icon><span class="nav-link-label">分类</span></a>
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="fenlei"></svg-icon><span class="nav-link-label">分类</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="leimupinleifenleileibie"></svg-icon><span class="nav-link-label">分类</span></a>
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="fenlei"></svg-icon><span class="nav-link-label">分类</span></a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
</transition>
|
||||
<al-back-top></al-back-top>
|
||||
|
||||
<!--SideBar menu-->
|
||||
<SidebarNav :setting="userSetting"/>
|
||||
|
||||
<div id="body">
|
||||
@ -21,24 +20,19 @@
|
||||
<a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
|
||||
· {{file.uploadDate}}
|
||||
<span v-if="isEditor">
|
||||
· <a :href="'/markdown/editor?id='+file.id" target="_blank">编辑</a>
|
||||
· <a :href="'/setting/website/manager-articles?operation=editor&id='+file.id" target="_blank">编辑</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
|
||||
<div id="vditor" class="article-body"></div>
|
||||
<!-- <mavon-editor-->
|
||||
<!-- ref="md"-->
|
||||
<!-- v-if="!showList"-->
|
||||
<!-- v-model="content"-->
|
||||
<!-- :subfield="false"-->
|
||||
<!-- :boxShadow="true"-->
|
||||
<!-- :toolbarsFlag="false"-->
|
||||
<!-- codeStyle="atom-one-dark"-->
|
||||
<!-- defaultOpen="preview"-->
|
||||
<!-- />-->
|
||||
<!-- <div id="vditor" class="article-body"></div>-->
|
||||
<vditor-preview
|
||||
:content="content"
|
||||
class="article-body"
|
||||
@after="renderContents"
|
||||
/>
|
||||
</el-main>
|
||||
<div v-show="titleList.length > 0" class="right-bj">
|
||||
<a-affix>
|
||||
@ -71,16 +65,18 @@ import ArticleTop from "@/views/public/article/ArticleTop";
|
||||
import {getSetting} from '@/api/user'
|
||||
import SidebarNav from "@/views/public/article/SidebarNav";
|
||||
|
||||
import VditorPreview from 'vditor/dist/method.min'
|
||||
import "vditor/src/assets/scss/index.scss"
|
||||
import VditorPreview from "@/components/preview/VditorPreview";
|
||||
|
||||
// import VditorPreview from 'vditor/dist/method.min'
|
||||
// import "vditor/src/assets/scss/index.scss"
|
||||
|
||||
export default {
|
||||
components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
|
||||
components: {SidebarNav, ArticleTop, AlBackTop, AlLoading, VditorPreview },
|
||||
data() {
|
||||
return {
|
||||
file: {},
|
||||
isLoading: true,
|
||||
pageTitle: "文章",
|
||||
pageTitle: "",
|
||||
showList: true,
|
||||
toolbars: null,
|
||||
toolbarsFlag: true,
|
||||
@ -94,6 +90,7 @@ export default {
|
||||
top: 70,
|
||||
isEditor : false,
|
||||
contentEditor: '',
|
||||
direction: 'up'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -107,24 +104,10 @@ export default {
|
||||
that.maxMenuHeight= document.documentElement.clientHeight - 155
|
||||
}
|
||||
},
|
||||
// beforeRouteLeave(to, from, next) {
|
||||
// to.meta.keepAlive = true;
|
||||
// next();
|
||||
// },
|
||||
activated() {
|
||||
console.log('activated', 'article')
|
||||
},
|
||||
deactivated() {
|
||||
console.log('deactivated')
|
||||
// this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
},
|
||||
methods: {
|
||||
getSetting() {
|
||||
getSetting({userId: this.$store.state.user.userId}).then((res) => {
|
||||
this.userSetting = res.data;
|
||||
this.$nextTick(()=>{
|
||||
this.dynamicTyping()
|
||||
})
|
||||
})
|
||||
},
|
||||
onScroll() {
|
||||
@ -155,30 +138,9 @@ export default {
|
||||
const filename = res.data.name
|
||||
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
|
||||
this.content = res.data.contentText
|
||||
|
||||
const that = this
|
||||
VditorPreview.preview(document.getElementById('vditor'),
|
||||
this.content,{
|
||||
speech: {
|
||||
enable: true,
|
||||
},
|
||||
anchor: 1,
|
||||
after() {
|
||||
that.renderAfter()
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(()=>{ // DOM更新之后获取子元素
|
||||
// // 在文章最前面添加更新时间
|
||||
// let main = document.getElementById('vditor')
|
||||
// let p = document.createElement("p")
|
||||
// p.className = "note-update-date"
|
||||
// p.innerText = `本文最后更新于：${this.file.updateDate}`
|
||||
// main.insertBefore(p , main.childNodes[0])
|
||||
|
||||
this.$nextTick(()=>{
|
||||
// 动态打字效果
|
||||
this.dynamicTyping()
|
||||
|
||||
const hTag = document.querySelector("h1");
|
||||
if(hTag){
|
||||
this.pageTitle = hTag.innerText
|
||||
@ -187,121 +149,135 @@ export default {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
renderAfter(){
|
||||
let headers = $('.article-body').find(":header")
|
||||
let a = []
|
||||
if(headers && headers.length >0 ){
|
||||
const that = this
|
||||
headers.each(function () {
|
||||
const tagName = $(this).prop("tagName")
|
||||
if(tagName === 'H3'){
|
||||
let li = '<li class="pl h-3"><a href="#'+$(this).attr('id')+'">'+$(this).text()+'</a></li>'
|
||||
a.push(li)
|
||||
that.titleList.push(li)
|
||||
}
|
||||
})
|
||||
|
||||
// for (let i = 0; i < a.length; i++) {
|
||||
// // a[i] = a[i].replace(/id="/g, 'href="#')
|
||||
// if (i ===0 && a[i].indexOf('h1') !== -1) {
|
||||
// a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
// }else if (a[i].indexOf('h1') !== -1) {
|
||||
// a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
// }else if (a[i].indexOf('h2') !== -1) {
|
||||
// a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
||||
// }else if (a[i].indexOf('h3') !== -1) {
|
||||
// a[i] = '<li class="pl h-3">' + a[i].replace(/<h3>|<\/h3>/g, '') + '</li>'
|
||||
// }else if (a[i].indexOf('h4') !== -1) {
|
||||
// a[i] = '<li class="pl h-4">' + a[i].replace(/<h4>|<\/h4>/g, '') + '</li>'
|
||||
// }else if (a[i].indexOf('h5') !== -1) {
|
||||
// a[i] = '<li class="pl h-5">' + a[i].replace(/<h5>|<\/h5>/g, '') + '</li>'
|
||||
// }else if (a[i].indexOf('h6') !== -1) {
|
||||
// a[i] = '<li class="pl h-6">' + a[i].replace(/<h6>|<\/h6>/g, '') + '</li>'
|
||||
// } else {
|
||||
// a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||
// }
|
||||
// this.titleList.push(i)
|
||||
// }
|
||||
$('.j-titleList').prepend(this.titleList)
|
||||
|
||||
// 获取id数组
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
|
||||
}
|
||||
|
||||
let beforeScrollTop = document.documentElement.scrollTop;
|
||||
let fn = fn || function (direction) {
|
||||
// 判断是上滑显示,下滑隐藏
|
||||
const top = $('#top')
|
||||
const toogleNav = $('#toggle-nav')
|
||||
|
||||
const body = document.getElementById("body")
|
||||
|
||||
if(direction === 'down'){
|
||||
top.removeClass('animateIn')
|
||||
top.addClass('animateOut')
|
||||
toogleNav.removeClass('animateRight')
|
||||
toogleNav.addClass('animateLeft')
|
||||
if(body.style.transform.length > 0) {
|
||||
document.getElementById("sidebar-nav").style.transform = ''
|
||||
body.style.transform = ''
|
||||
document.getElementById("toggle-nav").style.transform = ''
|
||||
}
|
||||
}
|
||||
if(direction === 'up'){
|
||||
top.removeClass('animateOut')
|
||||
top.addClass('animateIn')
|
||||
toogleNav.removeClass('animateLeft')
|
||||
toogleNav.addClass('animateRight')
|
||||
}
|
||||
};
|
||||
|
||||
$(window).on("scroll",function (event) {
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
|
||||
$('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
|
||||
$('.j-bj').css('top', i * 34)
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是上滑还是下滑
|
||||
var afterScrollTop = document.documentElement.scrollTop;
|
||||
let delta = afterScrollTop - beforeScrollTop;
|
||||
beforeScrollTop = afterScrollTop;
|
||||
var scrollTop = $(this).scrollTop();
|
||||
var scrollHeight = $(document).height();
|
||||
var windowHeight = $(this).height();
|
||||
var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
|
||||
// 改变top bar 进度条
|
||||
document.querySelector(".scrollbar").style.width = progress +'%'
|
||||
|
||||
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
|
||||
fn('bottom');
|
||||
return;
|
||||
}
|
||||
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
|
||||
fn('up');
|
||||
} else {
|
||||
if (Math.abs(delta) < 10) {
|
||||
return false;
|
||||
}
|
||||
fn(delta > 0 ? "down" : "up");
|
||||
}
|
||||
})
|
||||
|
||||
let $root = $('html, body');
|
||||
$('.j-titleList li').on("click", function () {
|
||||
let top = 70
|
||||
if (typeof($(this).attr("first"))!=="undefined") {
|
||||
// 点击第一个目录
|
||||
top = 100
|
||||
}
|
||||
$root.animate({
|
||||
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
|
||||
}, 400)
|
||||
return false
|
||||
});
|
||||
addUpdateTime(){
|
||||
// DOM更新之后获取子元素
|
||||
// 在文章最前面添加更新时间
|
||||
let main = document.getElementById('vditor')
|
||||
let p = document.createElement("p")
|
||||
p.className = "note-update-date"
|
||||
p.innerText = `本文最后更新于：${this.file.updateDate}`
|
||||
main.insertBefore(p , main.childNodes[0])
|
||||
},
|
||||
titleOneItem(index, jqel, tagName){
|
||||
const h = tagName.substring(1,2)
|
||||
if(index === 0){
|
||||
return '<li first class="pl h-'+h+'"><a href="#'+jqel.attr('id')+'">'+jqel.text()+'</a></li>'
|
||||
}
|
||||
return '<li class="pl h-'+h+'"><a href="#'+jqel.attr('id')+'">'+jqel.text()+'</a></li>'
|
||||
},
|
||||
// 渲染目录
|
||||
renderContents(){
|
||||
// 添加更新时间
|
||||
this.addUpdateTime()
|
||||
let contents = []
|
||||
let headers = $('.article-body').find(":header")
|
||||
if(!headers || headers.length < 1){
|
||||
return
|
||||
}
|
||||
const that = this
|
||||
headers.each(function (index) {
|
||||
contents.push(that.titleOneItem(index, $(this), $(this).prop("tagName")))
|
||||
that.titleList.push(index)
|
||||
})
|
||||
$('.j-titleList').prepend(contents)
|
||||
// 获取id数组
|
||||
for (let i = 0; i < contents.length; i++) {
|
||||
contents[i] = contents[i].replace(/.*?#(.*)".*/g, '$1')
|
||||
}
|
||||
this.renderContentsAfter(contents)
|
||||
},
|
||||
// 渲染目录后的操作
|
||||
renderContentsAfter(contents){
|
||||
const that = this
|
||||
let beforeScrollTop = document.documentElement.scrollTop;
|
||||
let fn = fn || function (direction) {
|
||||
that.direction = direction
|
||||
// 判断是上滑显示,下滑隐藏
|
||||
const top = $('#top')
|
||||
const toogleNav = $('#toggle-nav')
|
||||
|
||||
const body = document.getElementById("body")
|
||||
|
||||
if(direction === 'down'){
|
||||
top.removeClass('animateIn')
|
||||
top.addClass('animateOut')
|
||||
toogleNav.removeClass('animateRight')
|
||||
toogleNav.addClass('animateLeft')
|
||||
if(body.style.transform.length > 0) {
|
||||
document.getElementById("sidebar-nav").style.transform = ''
|
||||
body.style.transform = ''
|
||||
document.getElementById("toggle-nav").style.transform = ''
|
||||
}
|
||||
}
|
||||
if(direction === 'up'){
|
||||
top.removeClass('animateOut')
|
||||
top.addClass('animateIn')
|
||||
toogleNav.removeClass('animateLeft')
|
||||
toogleNav.addClass('animateRight')
|
||||
}
|
||||
};
|
||||
console.log(contents[1])
|
||||
|
||||
let scrollAfterTimer = null
|
||||
$(window).on("scroll",function (event) {
|
||||
for (let i = 0; i < contents.length; i++) {
|
||||
if ($(window).scrollTop() > $('#' + contents[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
|
||||
$('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
|
||||
$('.j-bj').css('top', i * 34)
|
||||
}
|
||||
}
|
||||
if(scrollAfterTimer != null){
|
||||
clearTimeout(scrollAfterTimer)
|
||||
}
|
||||
scrollAfterTimer = setTimeout(function (){
|
||||
that.$router.replace({path: that.$route.path, query: that.$route.query, hash: $('.j-titleList').find('li.active').find('a').attr('href')})
|
||||
}, 50)
|
||||
|
||||
// 判断是上滑还是下滑
|
||||
var afterScrollTop = document.documentElement.scrollTop
|
||||
let delta = afterScrollTop - beforeScrollTop
|
||||
beforeScrollTop = afterScrollTop
|
||||
var scrollTop = $(this).scrollTop()
|
||||
var scrollHeight = $(document).height()
|
||||
var windowHeight = $(this).height()
|
||||
var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
|
||||
// 改变top bar 进度条
|
||||
document.querySelector(".scrollbar").style.width = progress +'%'
|
||||
|
||||
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
|
||||
fn('bottom')
|
||||
return
|
||||
}
|
||||
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
|
||||
fn('up')
|
||||
} else {
|
||||
if (Math.abs(delta) < 10) {
|
||||
return false
|
||||
}
|
||||
fn(delta > 0 ? "down" : "up")
|
||||
}
|
||||
})
|
||||
let $root = $('html, body')
|
||||
$('.j-titleList li').on("click", function () {
|
||||
let top = 75
|
||||
if (typeof($(this).attr("first"))!=="undefined") {
|
||||
// 点击第一个目录
|
||||
top = 168
|
||||
}
|
||||
let herf = $.attr(this.querySelector("a"), 'href')
|
||||
$root.animate({
|
||||
scrollTop: $(herf).offset().top - top
|
||||
}, 400)
|
||||
return false
|
||||
})
|
||||
// 滚动到响应的锚点
|
||||
setTimeout(function (){
|
||||
if(that.$route.hash){
|
||||
$root.animate({
|
||||
scrollTop: $(decodeURIComponent(that.$route.hash)).offset().top - 75
|
||||
}, 400)
|
||||
}
|
||||
},100)
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
@ -98,7 +98,7 @@ import { getSetting } from '@/api/user'
|
||||
return {
|
||||
imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
|
||||
isLoading: true,
|
||||
pageTitle: "文章列表",
|
||||
pageTitle: '',
|
||||
articleList: [],
|
||||
backImageSrc: "~@/assets/img/widget-img1.jpg",
|
||||
userSetting: {},
|
||||
@ -113,23 +113,7 @@ import { getSetting } from '@/api/user'
|
||||
mounted() {
|
||||
this.getSetting()
|
||||
this.getMarkDown()
|
||||
console.log('mounted')
|
||||
},
|
||||
// beforeRouteEnter (to, from, next) {
|
||||
// console.log('beforeRouteEnter')
|
||||
// next(vm => {
|
||||
// console.log(vm.scrollTop)
|
||||
// document.body.scrollTop = vm.scrollTop
|
||||
// })
|
||||
// },
|
||||
// // beforeRouteUpdate (to, from, next) {
|
||||
// // console.log('beforeRouteUpdate')
|
||||
// // next()
|
||||
// // },
|
||||
// beforeRouteLeave(to, from, next) {
|
||||
// to.meta.keepAlive = false;
|
||||
// next();
|
||||
// },
|
||||
activated() {
|
||||
console.log('activated',this.scrollTop)
|
||||
},
|
||||
@ -141,6 +125,7 @@ import { getSetting } from '@/api/user'
|
||||
getSetting() {
|
||||
getSetting({userId: this.$store.state.user.userId}).then((res) => {
|
||||
this.userSetting = res.data;
|
||||
this.pageTitle = this.userSetting.siteName
|
||||
this.$nextTick(()=>{
|
||||
this.dynamicTyping()
|
||||
})
|
||||
|
||||
@ -1,661 +0,0 @@
|
||||
<template>
|
||||
<mavon-editor
|
||||
v-model="content"
|
||||
:subfield="false"
|
||||
:boxShadow="false"
|
||||
defaultOpen="preview"
|
||||
:toolbarsFlag="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { mavonEditor } from 'mavon-editor'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
export default {
|
||||
// 注册
|
||||
components: {
|
||||
mavonEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content:'# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd\n' +
|
||||
'# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd# 一级标题\n' +
|
||||
'## 二级标题\n' +
|
||||
'### 三级标题\n' +
|
||||
'#### 四级标题\n' +
|
||||
'##### 五级标题\n' +
|
||||
'###### 六级标题\n' +
|
||||
'==标记==\n' +
|
||||
'|column1|column2|column3|\n' +
|
||||
'|-|-|-|\n' +
|
||||
'|content1|content2|content3|\n' +
|
||||
'dsafsdfsadf sacasdca\n' +
|
||||
'> sdfasdfasd',
|
||||
html:'',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="container" v-wechat-title="title">
|
||||
<el-dialog title="新增文章" :fullscreen="true" :visible.sync="newArticleDialogVisible">
|
||||
<el-dialog
|
||||
title="新增文章"
|
||||
:fullscreen="true"
|
||||
:visible.sync="newArticleDialogVisible"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<markdown-editor></markdown-editor>
|
||||
</el-dialog>
|
||||
<el-card class="box-card">
|
||||
@ -31,14 +36,17 @@ export default {
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
if(this.$route.query.markdown){
|
||||
if(this.$route.query.operation){
|
||||
this.newArticleDialogVisible = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
newArticle() {
|
||||
this.newArticleDialogVisible = true
|
||||
this.$router.push({path:'/setting/website/manager-articles', query: {markdown: 'new'}})
|
||||
this.$router.push({path: this.$route.path, query: {operation: 'new'}})
|
||||
},
|
||||
closeDialog(){
|
||||
this.$router.replace({path: this.$route.path})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user