nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mavon-editor for markdown file

Browse Source
This commit is contained in:
simzhangbest 2020-10-26 09:45:48 +08:00
parent 9f858398ab
commit 43546ad2f6
5 changed files with 188 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
filebrowser.exe Normal file
View File

Binary file not shown.

54
frontend/package-lock.json generated
View File

@ -5115,6 +5115,11 @@
"integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
"dev": true "dev": true
}, },
"cssfilter": {
"version": "0.0.10",
"resolved": "https://registry.npm.taobao.org/cssfilter/download/cssfilter-0.0.10.tgz",
"integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4="
},
"cssnano": { "cssnano": {
"version": "4.1.10", "version": "4.1.10",
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@ -7453,7 +7458,6 @@
"version": "4.5.3", "version": "4.5.3",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
"integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==", "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
"dev": true,
"requires": { "requires": {
"neo-async": "^2.6.0", "neo-async": "^2.6.0",
"optimist": "^0.6.1", "optimist": "^0.6.1",
@ -7464,8 +7468,7 @@
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
"dev": true
} }
} }
}, },
@ -7589,11 +7592,15 @@
"version": "9.17.1", "version": "9.17.1",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz",
"integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==", "integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==",
"dev": true,
"requires": { "requires": {
"handlebars": "^4.5.3" "handlebars": "^4.5.3"
} }
}, },
"highlight.js-async-webpack": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/highlight.js-async-webpack/download/highlight.js-async-webpack-1.0.4.tgz",
"integrity": "sha1-wGtnv5nwSQRdYrdW5YVbCRLsYWw="
},
"hmac-drbg": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -8896,6 +8903,16 @@
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz", "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
"integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=" "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
}, },
"mavon-editor": {
"version": "2.9.0",
"resolved": "https://registry.npm.taobao.org/mavon-editor/download/mavon-editor-2.9.0.tgz",
"integrity": "sha1-5Ru83N4YuSNjM6nOsS/tLYRUKQA=",
"requires": {
"highlight.js": "^9.11.0",
"highlight.js-async-webpack": "^1.0.4",
"xss": "^1.0.6"
}
},
"md5.js": { "md5.js": {
"version": "1.3.5", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -9299,8 +9316,7 @@
"neo-async": { "neo-async": {
"version": "2.6.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
"integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==", "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
"dev": true
}, },
"nice-try": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
@ -9764,7 +9780,6 @@
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
"dev": true,
"requires": { "requires": {
"minimist": "~0.0.1", "minimist": "~0.0.1",
"wordwrap": "~0.0.2" "wordwrap": "~0.0.2"
@ -9773,8 +9788,7 @@
"minimist": { "minimist": {
"version": "0.0.10", "version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
"dev": true
} }
} }
}, },
@ -12625,7 +12639,6 @@
"version": "3.7.3", "version": "3.7.3",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.3.tgz", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.3.tgz",
"integrity": "sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==", "integrity": "sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==",
"dev": true,
"optional": true, "optional": true,
"requires": { "requires": {
"commander": "~2.20.3", "commander": "~2.20.3",
@ -12636,14 +12649,12 @@
"version": "2.20.3", "version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true,
"optional": true "optional": true
}, },
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true "optional": true
} }
} }
@ -13520,8 +13531,7 @@
"wordwrap": { "wordwrap": {
"version": "0.0.3", "version": "0.0.3",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=", "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
"dev": true
}, },
"worker-farm": { "worker-farm": {
"version": "1.6.0", "version": "1.6.0",
@ -13632,6 +13642,22 @@
"async-limiter": "~1.0.0" "async-limiter": "~1.0.0"
} }
}, },
"xss": {
"version": "1.0.8",
"resolved": "https://registry.npm.taobao.org/xss/download/xss-1.0.8.tgz?cache=0&sync_timestamp=1595841948790&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxss%2Fdownload%2Fxss-1.0.8.tgz",
"integrity": "sha1-Mv64f+t0s9zT1AS3poq6vxBwBTU=",
"requires": {
"commander": "^2.20.3",
"cssfilter": "0.0.10"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.20.3.tgz?cache=0&sync_timestamp=1603599581184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.20.3.tgz",
"integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM="
}
}
},
"xtend": { "xtend": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",

1
frontend/package.json
View File

@ -15,6 +15,7 @@
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"material-design-icons": "^3.0.1", "material-design-icons": "^3.0.1",
"mavon-editor": "^2.9.0",
"moment": "^2.24.0", "moment": "^2.24.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"noty": "^3.2.0-beta", "noty": "^3.2.0-beta",

251
frontend/src/components/files/Editor.vue
View File

@ -1,132 +1,169 @@
<template> <template>
<div id="editor-container"> <div id="editor-container">
<div class="bar"> <div class="bar">
<button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action"> <button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
<div class="title"> <div class="title">
<span>{{ req.name }}</span> <span>{{ req.name }}</span>
</div> </div>
<button @click="save" v-show="user.perm.modify" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" id="save-button" class="action"> <button @click="save" v-show="user.perm.modify" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" id="save-button" class="action">
<i class="material-icons">save</i> <i class="material-icons">save</i>
</button> </button>
</div> </div>
<div id="breadcrumbs"> <div id="breadcrumbs">
<span><i class="material-icons">home</i></span> <span><i class="material-icons">home</i></span>
<span v-for="(link, index) in breadcrumbs" :key="index"> <span v-for="(link, index) in breadcrumbs" :key="index">
<span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span> <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
<span>{{ link.name }}</span> <span>{{ link.name }}</span>
</span> </span>
</div> </div>
<form id="editor"></form> <!-- <form id="editor" ></form> -->
</div>
<form id="editor" v-show="isAceShow"></form>
<div v-show="!isAceShow">
<mavon-editor id="mavon_editor" v-model="value"></mavon-editor>
</div>
</div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import {
import { files as api } from '@/api' mapState
import buttons from '@/utils/buttons' } from 'vuex'
import url from '@/utils/url' import {
files as api
} from '@/api'
import buttons from '@/utils/buttons'
import url from '@/utils/url'
import ace from 'ace-builds/src-min-noconflict/ace.js' import ace from 'ace-builds/src-min-noconflict/ace.js'
import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js' import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
import 'ace-builds/webpack-resolver' import 'ace-builds/webpack-resolver'
import { theme } from '@/utils/constants' import {
theme
} from '@/utils/constants'
// import mavonEditor from 'mavon-editor'
export default { export default {
name: 'editor', name: 'editor',
data: function () { data: function() {
return {} return {
}, isAceShow: true,
computed: { value: '',
...mapState(['req', 'user']), }
breadcrumbs () { },
let parts = this.$route.path.split('/') computed: {
...mapState(['req', 'user']),
breadcrumbs() {
let parts = this.$route.path.split('/')
if (parts[0] === '') { if (parts[0] === '') {
parts.shift() parts.shift()
} }
if (parts[parts.length - 1] === '') { if (parts[parts.length - 1] === '') {
parts.pop() parts.pop()
} }
let breadcrumbs = [] let breadcrumbs = []
for (let i = 0; i < parts.length; i++) { for (let i = 0; i < parts.length; i++) {
breadcrumbs.push({ name: decodeURIComponent(parts[i]) }) breadcrumbs.push({
} name: decodeURIComponent(parts[i])
})
}
breadcrumbs.shift() breadcrumbs.shift()
if (breadcrumbs.length > 3) { if (breadcrumbs.length > 3) {
while (breadcrumbs.length !== 4) { while (breadcrumbs.length !== 4) {
breadcrumbs.shift() breadcrumbs.shift()
} }
breadcrumbs[0].name = '...' breadcrumbs[0].name = '...'
} }
return breadcrumbs return breadcrumbs
} }
}, },
created () { created() {
window.addEventListener('keydown', this.keyEvent) window.addEventListener('keydown', this.keyEvent)
}, },
beforeDestroy () { beforeDestroy() {
window.removeEventListener('keydown', this.keyEvent) window.removeEventListener('keydown', this.keyEvent)
this.editor.destroy(); this.editor.destroy();
}, },
mounted: function () { mounted: function() {
const fileContent = this.req.content || ''; const fileContent = this.req.content || '';
this.editor = ace.edit('editor', {
value: fileContent,
showPrintMargin: false,
readOnly: this.req.type === 'textImmutable',
theme: 'ace/theme/chrome',
mode: modelist.getModeForPath(this.req.name).mode,
wrap: true
})
if (theme == 'dark') { //deal with md file alone
this.editor.setTheme("ace/theme/twilight"); if (modelist.getModeForPath(this.req.name).mode.split("/").pop() == "markdown") {
} console.log("is md file")
}, this.value = fileContent
methods: { this.isAceShow = false
back () { } else {
let uri = url.removeLastDir(this.$route.path) + '/' this.isAceShow = true
this.$router.push({ path: uri }) this.editor = ace.edit('editor', {
}, value: fileContent,
keyEvent (event) { showPrintMargin: false,
if (!event.ctrlKey && !event.metaKey) { readOnly: this.req.type === 'textImmutable',
return theme: 'ace/theme/chrome',
} mode: modelist.getModeForPath(this.req.name).mode,
wrap: true
})
if (String.fromCharCode(event.which).toLowerCase() !== 's') { if (theme == 'dark') {
return this.editor.setTheme("ace/theme/twilight");
} }
}
event.preventDefault()
this.save()
},
async save () {
const button = 'save'
buttons.loading('save')
try { },
await api.put(this.$route.path, this.editor.getValue()) methods: {
buttons.success(button) back() {
} catch (e) { let uri = url.removeLastDir(this.$route.path) + '/'
buttons.done(button) this.$router.push({
this.$showError(e) path: uri
} })
} },
} keyEvent(event) {
} if (!event.ctrlKey && !event.metaKey) {
return
}
if (String.fromCharCode(event.which).toLowerCase() !== 's') {
return
}
event.preventDefault()
this.save()
},
async save() {
const button = 'save'
buttons.loading('save')
try {
// await api.put(this.$route.path, this.editor.getValue())
if (this.isAceShow) {
await api.put(this.$route.path, this.editor.getValue())
} else {
await api.put(this.$route.path, this.value)
}
buttons.success(button)
} catch (e) {
buttons.done(button)
this.$showError(e)
}
}
}
}
</script> </script>

3
frontend/src/main.js
View File

@ -6,6 +6,9 @@ import Vue from '@/utils/vue'
import { recaptcha, loginPage } from '@/utils/constants' import { recaptcha, loginPage } from '@/utils/constants'
import { login, validateLogin } from '@/utils/auth' import { login, validateLogin } from '@/utils/auth'
import App from '@/App' import App from '@/App'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor);
sync(store, router) sync(store, router)