新建文档界面
This commit is contained in:
jmal
parent
d0527da09c
commit
c4b5a6f7c5
@ -2,6 +2,7 @@ import request from '@/utils/request'
|
||||
// const qs = require('qs')
|
||||
|
||||
export default {
|
||||
// 获取markdown内容
|
||||
getMarkdown: function(params) {
|
||||
return request({
|
||||
url: 'public/p',
|
||||
@ -9,4 +10,12 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 获取markdown内容 /markdown/add
|
||||
addMarkdown: function(data) {
|
||||
return request({
|
||||
url: '/markdown/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
1
src/icons/svg/md-list.svg
Normal file
1
src/icons/svg/md-list.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1583414796558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6512" width="200" height="200"><path d="M160 560h512v96H160z m0-192h640v96H160z m0-192h704v96H160zM160 752h576v96H160z" fill="" p-id="6513"></path></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
1
src/icons/svg/md.svg
Normal file
1
src/icons/svg/md.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1583414863314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7354" width="200" height="200"><path d="M354.40128 0c-87.04 0-157.44 70.55872-157.44 157.59872v275.68128H78.72c-21.6576 0-39.36256 17.69984-39.36256 39.36256v236.31872c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.24128v118.08256c0 87.04 70.4 157.59872 157.44 157.59872h472.63744c87.04 0 157.59872-70.55872 157.59872-157.59872V315.0336c0-41.74848-38.9888-81.93024-107.52-149.27872l-29.11744-29.12256L818.87744 107.52C751.5392 38.9888 711.39328 0 669.59872 0H354.4064z m0 78.72h287.20128c28.35456 7.0912 27.99616 42.1376 27.99616 76.8v120.16128c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.07744c39.38816 0 78.87872-0.0256 78.87872 39.36256v512c0 43.32032-35.55328 78.87872-78.87872 78.87872H354.4064c-43.32544 0-78.72-35.5584-78.72-78.87872v-118.08256h393.91744c21.66272 0 39.36256-17.69472 39.36256-39.35744V472.64256c0-21.66272-17.69984-39.36256-39.36256-39.36256H275.68128V157.59872c0-43.32032 35.39456-78.87872 78.72-78.87872zM195.9936 507.36128h32.64l49.92 143.03744h0.96256l48.95744-143.03744h33.60256v175.67744h-22.08256v-106.55744c0-10.88 0.32256-26.56256 0.96256-47.04256h-0.96256l-52.79744 153.6h-19.2l-52.80256-153.6h-0.95744c1.28 22.4 1.92 38.72256 1.92 48.96256v104.63744H195.9936V507.36128z m214.08256 0h48.95744c24.96 0 44.48256 7.68 58.56256 23.04 14.72 14.72 22.07744 35.84 22.07744 63.36 0 28.8-7.68 50.87744-23.04 66.23744-14.72 15.36-35.51744 23.04-62.39744 23.04h-44.16V507.36128z m22.07744 19.2v137.27744h19.2c21.76 0 37.76-5.76 48-17.28 10.88-11.52 16.32256-28.8 16.32256-51.84s-5.12-39.99744-15.36-50.87744c-9.6-11.52-24.32-17.28-44.16-17.28h-24.00256z" p-id="7355"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -120,7 +120,7 @@ export const constantRoutes = [
|
||||
path: 'index',
|
||||
name: 'markdown',
|
||||
component: () => import('@/views/markdown/index'),
|
||||
meta: { title: '创建文档', icon: 'folder' }
|
||||
meta: { title: '创建文档', icon: 'md' }
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -133,6 +133,7 @@ export const constantRoutes = [
|
||||
path: '',
|
||||
name: 'p',
|
||||
component: () => import('@/views/public/p/index'),
|
||||
meta: { title: '文档列表', icon: 'md-list' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1398,7 +1398,7 @@ export default {
|
||||
this.getFileList()
|
||||
}
|
||||
} else {
|
||||
if(row.contentType === 'text/markdown'){
|
||||
if(row.contentType.includes('text')){
|
||||
this.$router.push(`/public/p?mark=${row.id}`)
|
||||
}else{
|
||||
// 打开文件
|
||||
|
||||
@ -1,24 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<mavon-editor
|
||||
v-model="content"
|
||||
ref="md"
|
||||
@change="change"
|
||||
style="min-height: 600px;max-height: 600px"
|
||||
/>
|
||||
|
||||
<button @click="submit">提交</button>
|
||||
<el-header>
|
||||
<div class="header-item">
|
||||
<el-input placeholder="请输入文档名称" v-model="filename">
|
||||
<template slot="append">.md</template>
|
||||
</el-input>
|
||||
<el-button class="release-button" type="primary" @click="submit">发布文章</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<mavon-editor
|
||||
v-model="content"
|
||||
ref="md"
|
||||
@change="change"
|
||||
:style="{'height': clientHeight+'px'}"
|
||||
/>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import markdownApi from '@/api/markdown-api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content:'', // 输入的markdown
|
||||
content:"# 一级标题\n" +
|
||||
"```java\n" +
|
||||
"import markdownApi from '@/api/markdown-api'\n" +
|
||||
" export default {\n" +
|
||||
" data() {\n" +
|
||||
" return {\n" +
|
||||
" content:'', // 输入的markdown\n" +
|
||||
" html:'', // 及时转的html\n" +
|
||||
" }\n" +
|
||||
" },\n" +
|
||||
" methods: {\n" +
|
||||
" // 所有操作都会被解析重新渲染\n" +
|
||||
" change(value, render){\n" +
|
||||
" console.log(value)\n" +
|
||||
" // render 为 markdown 解析后的结果[html]\n" +
|
||||
" this.html = render;\n" +
|
||||
" },\n" +
|
||||
" // 提交\n" +
|
||||
" submit(){\n" +
|
||||
" console.log(this.content);\n" +
|
||||
" console.log(this.html);\n" +
|
||||
" markdownApi.addMarkdown({\n" +
|
||||
" userId: this.$store.state.user.userId,\n" +
|
||||
" username: this.$store.state.user.name,\n" +
|
||||
" filename: this.filename+\".md\"\n" +
|
||||
" }).then((res) => {\n" +
|
||||
"\n" +
|
||||
" console.log(res.data)\n" +
|
||||
" })\n" +
|
||||
" }\n" +
|
||||
" },\n" +
|
||||
" mounted() {\n" +
|
||||
"\n" +
|
||||
" }\n" +
|
||||
" }\n" +
|
||||
"```\n" +
|
||||
"## 二级标题", // 输入的markdown
|
||||
html:'', // 及时转的html
|
||||
filename: '新建文档',
|
||||
clientHeight: document.documentElement.clientHeight - 155
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.clientHeight = document.documentElement.clientHeight - 155
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -32,10 +83,36 @@
|
||||
submit(){
|
||||
console.log(this.content);
|
||||
console.log(this.html);
|
||||
if(this.filename){
|
||||
const filename = this.filename + ".md"
|
||||
markdownApi.addMarkdown({
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
filename: filename,
|
||||
contentText: this.content
|
||||
}).then((res) => {
|
||||
console.log(res.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-main {
|
||||
padding: 5px 20px 20px 20px;
|
||||
}
|
||||
/deep/ .el-header {
|
||||
padding: 12.5px 10px 20px 20px;
|
||||
}
|
||||
/deep/ .el-input-group {
|
||||
width: unset;
|
||||
}
|
||||
.header-item {
|
||||
float: right;
|
||||
.release-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,35 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<mavon-editor
|
||||
v-if="!showList"
|
||||
v-model="content"
|
||||
:subfield="false"
|
||||
:boxShadow="false"
|
||||
defaultOpen="preview"
|
||||
:navigation="true"
|
||||
:navigation="toolbarsFlag"
|
||||
:toolbarsFlag="toolbarsFlag"
|
||||
:toolbars="toolbars"
|
||||
@navigationToggle="navigationToggle"
|
||||
/>
|
||||
|
||||
Scroll down to see the bottom-right button.
|
||||
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
|
||||
<div
|
||||
style="{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #f2f5f6;
|
||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
color: #1989fa;
|
||||
}"
|
||||
>
|
||||
UP
|
||||
</div>
|
||||
</el-backtop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/api/markdown-api'
|
||||
import markdownApi from '@/api/markdown-api'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showList: true,
|
||||
toolbars:{
|
||||
navigation: true,
|
||||
},
|
||||
toolbarsFlag: true,
|
||||
toolbarsFlag: false,
|
||||
content:'',
|
||||
html:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.$route.query.mark){
|
||||
this.showList = false
|
||||
}
|
||||
this.getMarkDown()
|
||||
},
|
||||
methods: {
|
||||
getMarkDown() {
|
||||
api.getMarkdown({
|
||||
markdownApi.getMarkdown({
|
||||
mark: this.$route.query.mark
|
||||
}).then((res) => {
|
||||
this.content = res.data.contentText
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user