修改markdown编辑器
This commit is contained in:
jmal
parent
2eae339af2
commit
b4e0fed54c
@ -19,10 +19,10 @@ export default {
|
||||
$route: function(to, from) {
|
||||
const path = to.path
|
||||
if (path.indexOf('/login') < 0) {
|
||||
if (path.indexOf('_m') > 0 && this.$pc) {
|
||||
if (path === '/_m' && this.$pc) {
|
||||
this.$router.push(path.split('_m')[0])
|
||||
} else if (path.indexOf('_m') < 0 && !this.$pc) {
|
||||
this.$router.push(path + '_m')
|
||||
} else if (path === '/' && !this.$pc) {
|
||||
this.$router.push('/_m')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 获取markdown内容 /markdown/add
|
||||
// 添加文档 /markdown/add
|
||||
addMarkdown: function(data) {
|
||||
return request({
|
||||
url: '/markdown/add',
|
||||
@ -18,4 +18,12 @@ export default {
|
||||
data
|
||||
})
|
||||
},
|
||||
// 编辑文档 /markdown/edit
|
||||
editMarkdown: function(data) {
|
||||
return request({
|
||||
url: '/markdown/edit',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
1
src/icons/svg/menu-edit1.svg
Normal file
1
src/icons/svg/menu-edit1.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1583501760496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8244" width="200" height="200"><path d="M933.82656 411.19744l-49.87904 49.88928L744.97024 322.11968l49.88928-49.88928c15.7184-15.7184 39.35232-17.664 52.6848-4.34176l90.624 90.63424C951.49056 371.84512 949.54496 395.47904 933.82656 411.19744zM721.80736 345.27232 860.78464 484.2496 529.38752 815.64672c-1.52576 1.52576-5.74464 5.7344-11.66336 7.24992-0.68608 0.32768-1.3824 0.60416-2.07872 0.82944l-172.9536 55.11168c-4.84352 1.536-9.70752 0.55296-12.86144-2.6112-3.16416-3.16416-4.1472-8.02816-2.63168-12.86144l55.12192-172.93312c0.23552-0.7168 0.512-1.41312 0.82944-2.07872 1.51552-5.92896 5.72416-10.1376 7.26016-11.66336L452.68992 614.4 242.33984 614.4c-8.47872 0-15.36-6.87104-15.36-15.36s6.88128-15.36 15.36-15.36l241.07008 0L721.80736 345.27232zM486.63552 804.9664l-85.5552-85.54496-22.94784 72.04864 36.46464 36.46464L486.63552 804.9664zM716.46208 400.50688c-4.9152-4.92544-12.89216-4.92544-17.80736 0L440.29952 658.85184c-4.9152 4.9152-4.9152 12.89216 0 17.8176 4.9152 4.9152 12.9024 4.9152 17.8176 0l258.34496-258.34496C721.38752 413.39904 721.38752 405.42208 716.46208 400.50688zM700.85632 892.33408c0 9.23648-7.50592 16.75264-16.7424 16.75264l-304.8448 0-27.53536 8.77568c-5.5296 1.76128-11.2128 2.65216-16.90624 2.65216-12.11392 0-23.37792-4.15744-32.59392-11.42784L143.98464 909.08672c-9.23648 0-16.76288-7.50592-16.76288-16.75264L127.22176 188.88704c0-9.23648 7.51616-16.75264 16.76288-16.75264l62.80192 0 0 26.5216c0 9.24672 7.49568 16.7424 16.75264 16.7424s16.75264-7.49568 16.75264-16.7424l0-26.5216 96.29696 0 0 26.5216c0 9.24672 7.49568 16.7424 16.75264 16.7424s16.75264-7.49568 16.75264-16.7424l0-26.5216 83.74272 0 0 26.5216c0 9.24672 7.49568 16.7424 16.75264 16.7424s16.75264-7.49568 16.75264-16.7424l0-26.5216 92.11904 0 0 26.5216c0 9.24672 7.49568 16.7424 16.7424 16.7424 9.25696 0 16.76288-7.49568 16.76288-16.7424l0-26.5216 71.17824 0c9.22624 0 16.7424 7.51616 16.7424 16.75264l0 116.00896 17.55136-17.55136 32.69632-32.69632 0-65.76128c0-36.93568-30.0544-66.99008-66.99008-66.99008l-71.17824 0L612.9664 81.41824c0-9.24672-7.49568-16.75264-16.76288-16.75264-9.23648 0-16.7424 7.49568-16.7424 16.75264l0 40.47872L487.3216 121.89696 487.3216 81.41824c0-9.24672-7.49568-16.75264-16.75264-16.75264s-16.75264 7.49568-16.75264 16.75264l0 40.47872-83.74272 0L370.0736 81.41824c0-9.24672-7.49568-16.75264-16.75264-16.75264s-16.75264 7.49568-16.75264 16.75264l0 40.47872-96.29696 0L240.27136 81.41824c0-9.24672-7.49568-16.75264-16.75264-16.75264s-16.75264 7.49568-16.75264 16.75264l0 40.47872-62.80192 0c-36.93568 0-67.00032 30.0544-67.00032 66.99008l0 703.4368c0 36.93568 30.06464 66.99008 67.00032 66.99008l540.13952 0c36.93568 0 66.99008-30.0544 66.99008-66.99008L751.09376 648.448l-50.24768 50.25792L700.84608 892.33408zM570.01984 322.56l-327.68 0c-8.47872 0-15.36 6.87104-15.36 15.36s6.88128 15.36 15.36 15.36l327.68 0c8.47872 0 15.36-6.87104 15.36-15.36S578.49856 322.56 570.01984 322.56zM570.01984 446.40256l-327.68 0c-8.47872 0-15.36 6.87104-15.36 15.36s6.88128 15.36 15.36 15.36l327.68 0c8.47872 0 15.36-6.87104 15.36-15.36S578.49856 446.40256 570.01984 446.40256z" p-id="8245"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@ -117,10 +117,10 @@ export const constantRoutes = [
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
path: 'editor',
|
||||
name: 'markdown',
|
||||
component: () => import('@/views/markdown/index'),
|
||||
meta: { title: '创建文档', icon: 'md' }
|
||||
// meta: { title: '创建文档', icon: 'md' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</label>
|
||||
</li>
|
||||
<li @click.prevent="newDocument">
|
||||
<a href="#" class="menuitem"><svg-icon icon-class="folder" /><span class="menuitem text">新建文档</span>
|
||||
<a href="#" class="menuitem"><svg-icon icon-class="md" /><span class="menuitem text">新建文档</span>
|
||||
</a>
|
||||
</li>
|
||||
<li @click.prevent="newFolder">
|
||||
@ -335,6 +335,16 @@ export default {
|
||||
{ iconClass: 'menu-download', label: '下载', operation: 'download' },
|
||||
{ iconClass: 'menu-remove', label: '删除', operation: 'remove' }
|
||||
],
|
||||
singleMenusEdit: [
|
||||
{ iconClass: 'menu-open', label: '打开', operation: 'open' },
|
||||
{ iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
|
||||
{ iconClass: 'menu-edit1', label: '编辑', operation: 'edit' },
|
||||
{ iconClass: 'menu-details', label: '详细信息', operation: 'details' },
|
||||
{ iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
|
||||
{ iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
|
||||
{ iconClass: 'menu-download', label: '下载', operation: 'download' },
|
||||
{ iconClass: 'menu-remove', label: '删除', operation: 'remove' }
|
||||
],
|
||||
multipleMenus: [
|
||||
{ iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
|
||||
{ iconClass: 'menu-download', label: '下载', operation: 'download' },
|
||||
@ -632,7 +642,7 @@ export default {
|
||||
},
|
||||
// 新建文档
|
||||
newDocument() {
|
||||
|
||||
this.$router.push(`/markdown/editor`)
|
||||
},
|
||||
newFolder() {
|
||||
this.newFolderName = '新建文件夹'
|
||||
@ -1012,7 +1022,11 @@ export default {
|
||||
// 更多操作(单选)
|
||||
moreClick(row, event) {
|
||||
this.menusIsMultiple = false
|
||||
this.menus = this.singleMenus
|
||||
if(row.contentType && row.contentType.includes("text")){
|
||||
this.menus = this.singleMenusEdit
|
||||
}else{
|
||||
this.menus = this.singleMenus
|
||||
}
|
||||
this.showOperationMenus(event)
|
||||
this.preliminaryRowData(row)
|
||||
this.showOperationMenus(event)
|
||||
@ -1024,7 +1038,11 @@ export default {
|
||||
this.menus = this.multipleRightMenus
|
||||
} else {
|
||||
this.menusIsMultiple = false
|
||||
this.menus = this.singleMenus
|
||||
if(row.contentType && row.contentType.includes("text")){
|
||||
this.menus = this.singleMenusEdit
|
||||
}else{
|
||||
this.menus = this.singleMenus
|
||||
}
|
||||
this.preliminaryRowData(row)
|
||||
}
|
||||
// 右击选择的数据
|
||||
@ -1108,6 +1126,10 @@ export default {
|
||||
console.log('operation', '收藏')
|
||||
this.favoriteOperating(true)
|
||||
break
|
||||
case 'edit':
|
||||
console.log('edit', '编辑')
|
||||
this.$router.push(`/markdown/editor?id=${this.rowContextData.id}`)
|
||||
break
|
||||
case 'open':
|
||||
console.log('open', '打开')
|
||||
this.fileClick(this.rowContextData)
|
||||
|
||||
@ -624,7 +624,7 @@
|
||||
}
|
||||
})
|
||||
if(isPushLink){
|
||||
this.$router.push(`/_m?path=${this.path}`)
|
||||
this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`)
|
||||
}
|
||||
setPath(this.path, this.pathList)
|
||||
this.getFileList()
|
||||
@ -762,14 +762,20 @@
|
||||
item2['index'] = this.pathList.length
|
||||
this.pathList[this.pathList.length - 1] = item1
|
||||
this.pathList.push(item2)
|
||||
this.$router.push(`/_m?path=${this.path}`)
|
||||
this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`)
|
||||
setPath(this.path, this.pathList)
|
||||
this.getFileList()
|
||||
} else {
|
||||
// 打开文件
|
||||
const fileIds = [row.id]
|
||||
const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
||||
window.open(url, '_blank')
|
||||
if(row.contentType.includes('text')){
|
||||
// let routeData = this.$router.resolve({path: '/public/p',query: {mark: row.id}})
|
||||
// window.open(routeData.href, '_blank');
|
||||
this.$router.push(`/public/p?mark=${row.id}`)
|
||||
}else{
|
||||
// 打开文件
|
||||
const fileIds = [row.id]
|
||||
const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
<el-input placeholder="请输入文档名称" v-model="filename">
|
||||
<template slot="append">.md</template>
|
||||
</el-input>
|
||||
<el-button class="release-button" type="primary" @click="submit">发布文章</el-button>
|
||||
<el-button v-if="!editStatus" class="release-button" type="primary" @click="add" :loading="adding">发布文章</el-button>
|
||||
<el-button v-if="editStatus" class="release-button" type="primary" @click="update" :loading="updating">更新文章</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
@ -13,7 +14,10 @@
|
||||
v-model="content"
|
||||
ref="md"
|
||||
@change="change"
|
||||
codeStyle="atelier-dune-dark"
|
||||
:style="{'height': clientHeight+'px'}"
|
||||
:imageFilter="imageFilter"
|
||||
@save="save"
|
||||
/>
|
||||
</el-main>
|
||||
</div>
|
||||
@ -24,49 +28,25 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
editStatus: false,
|
||||
content:"", // 输入的markdown
|
||||
html:'', // 及时转的html
|
||||
filename: '新建文档',
|
||||
clientHeight: document.documentElement.clientHeight - 155
|
||||
clientHeight: document.documentElement.clientHeight - 155,
|
||||
updating: false,
|
||||
adding: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
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]
|
||||
})
|
||||
}
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.clientHeight = document.documentElement.clientHeight - 155
|
||||
@ -75,14 +55,23 @@
|
||||
methods: {
|
||||
// 所有操作都会被解析重新渲染
|
||||
change(value, render){
|
||||
console.log(value)
|
||||
// render 为 markdown 解析后的结果[html]
|
||||
this.html = render;
|
||||
},
|
||||
// 提交
|
||||
submit(){
|
||||
console.log(this.content);
|
||||
console.log(this.html);
|
||||
save() {
|
||||
if(this.editStatus){
|
||||
this.update()
|
||||
}else{
|
||||
this.add()
|
||||
}
|
||||
},
|
||||
imageFilter() {
|
||||
console.log('imageFilter')
|
||||
return true
|
||||
},
|
||||
// add
|
||||
add(){
|
||||
this.adding = true
|
||||
if(this.filename){
|
||||
const filename = this.filename + ".md"
|
||||
markdownApi.addMarkdown({
|
||||
@ -91,7 +80,34 @@
|
||||
filename: filename,
|
||||
contentText: this.content
|
||||
}).then((res) => {
|
||||
console.log(res.data)
|
||||
this.adding = false
|
||||
this.$message({
|
||||
message: "发布成功",
|
||||
type: 'success',
|
||||
duration : 1000
|
||||
});
|
||||
this.$router.push(`/`)
|
||||
})
|
||||
}
|
||||
},
|
||||
// update
|
||||
update(){
|
||||
this.updating = true
|
||||
if(this.filename){
|
||||
const filename = this.filename + ".md"
|
||||
markdownApi.editMarkdown({
|
||||
fileId: this.$route.query.id,
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
filename: filename,
|
||||
contentText: this.content
|
||||
}).then(() => {
|
||||
this.updating = false
|
||||
this.$message({
|
||||
message: "更新成功",
|
||||
type: 'success',
|
||||
duration : 1000
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,17 +6,20 @@
|
||||
<el-row :gutter="0">
|
||||
<el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"><div>{{leftContent}}d</div></el-col>
|
||||
<el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
|
||||
<mavon-editor
|
||||
v-if="!showList"
|
||||
v-model="content"
|
||||
:subfield="false"
|
||||
:boxShadow="false"
|
||||
defaultOpen="preview"
|
||||
:navigation="toolbarsFlag"
|
||||
:toolbarsFlag="toolbarsFlag"
|
||||
:toolbars="toolbars"
|
||||
@navigationToggle="navigationToggle"
|
||||
/>
|
||||
<el-main>
|
||||
<mavon-editor
|
||||
v-if="!showList"
|
||||
v-model="content"
|
||||
:subfield="false"
|
||||
:boxShadow="false"
|
||||
defaultOpen="preview"
|
||||
:navigation="toolbarsFlag"
|
||||
:toolbarsFlag="toolbarsFlag"
|
||||
:toolbars="toolbars"
|
||||
:style="{'height': clientHeight+'px'}"
|
||||
@navigationToggle="navigationToggle"
|
||||
/>
|
||||
</el-main>
|
||||
</el-col>
|
||||
<el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6"></el-col>
|
||||
</el-row>
|
||||
@ -49,9 +52,10 @@
|
||||
toolbars:{
|
||||
navigation: true,
|
||||
},
|
||||
toolbarsFlag: false,
|
||||
toolbarsFlag: true,
|
||||
content:'',
|
||||
html:'',
|
||||
clientHeight: document.documentElement.clientHeight - 155,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -59,6 +63,10 @@
|
||||
this.showList = false
|
||||
}
|
||||
this.getMarkDown()
|
||||
const that = this
|
||||
window.onresize = function temp() {
|
||||
that.clientHeight = document.documentElement.clientHeight - 155
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user