diff --git a/filebrowser.exe b/filebrowser.exe
new file mode 100644
index 00000000..e1d14ff9
Binary files /dev/null and b/filebrowser.exe differ
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1c67b00b..c7c71e4f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -5115,6 +5115,11 @@
       "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
       "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": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@@ -7453,7 +7458,6 @@
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
       "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
-      "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
         "optimist": "^0.6.1",
@@ -7464,8 +7468,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -7589,11 +7592,15 @@
       "version": "9.17.1",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz",
       "integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==",
-      "dev": true,
       "requires": {
         "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": {
       "version": "1.0.1",
       "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",
       "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": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -9299,8 +9316,7 @@
     "neo-async": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
-      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
-      "dev": true
+      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
     },
     "nice-try": {
       "version": "1.0.5",
@@ -9764,7 +9780,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
       "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "dev": true,
       "requires": {
         "minimist": "~0.0.1",
         "wordwrap": "~0.0.2"
@@ -9773,8 +9788,7 @@
         "minimist": {
           "version": "0.0.10",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
-          "dev": true
+          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
         }
       }
     },
@@ -12625,7 +12639,6 @@
       "version": "3.7.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.3.tgz",
       "integrity": "sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==",
-      "dev": true,
       "optional": true,
       "requires": {
         "commander": "~2.20.3",
@@ -12636,14 +12649,12 @@
           "version": "2.20.3",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true,
           "optional": true
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
           "optional": true
         }
       }
@@ -13520,8 +13531,7 @@
     "wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-      "dev": true
+      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
     },
     "worker-farm": {
       "version": "1.6.0",
@@ -13632,6 +13642,22 @@
         "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": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0aea1e0d..0343a9c9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "material-design-icons": "^3.0.1",
+    "mavon-editor": "^2.9.0",
     "moment": "^2.24.0",
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",
diff --git a/frontend/src/components/files/Editor.vue b/frontend/src/components/files/Editor.vue
index 76ca8bd2..d7df13ac 100644
--- a/frontend/src/components/files/Editor.vue
+++ b/frontend/src/components/files/Editor.vue
@@ -1,132 +1,169 @@
 <template>
-  <div id="editor-container">
-    <div class="bar">
-      <button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
-        <i class="material-icons">close</i>
-      </button>
+	<div id="editor-container">
+		<div class="bar">
+			<button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
+				<i class="material-icons">close</i>
+			</button>
 
-      <div class="title">
-        <span>{{ req.name }}</span>
-      </div>
+			<div class="title">
+				<span>{{ req.name }}</span>
+			</div>
 
-      <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>
-      </button>
-    </div>
+			<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>
+			</button>
+		</div>
 
-    <div id="breadcrumbs">
-      <span><i class="material-icons">home</i></span>
+		<div id="breadcrumbs">
+			<span><i class="material-icons">home</i></span>
 
-      <span v-for="(link, index) in breadcrumbs" :key="index">
-        <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
-        <span>{{ link.name }}</span>
-      </span>
-    </div>
+			<span v-for="(link, index) in breadcrumbs" :key="index">
+				<span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
+				<span>{{ link.name }}</span>
+			</span>
+		</div>
 
-    <form id="editor"></form>
-  </div>
+		<!-- <form id="editor" ></form> -->
+
+		<form id="editor" v-show="isAceShow"></form>
+		<div v-show="!isAceShow">
+                       <mavon-editor id="mavon_editor" v-model="value"></mavon-editor>
+		</div>
+	</div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { files as api } from '@/api'
-import buttons from '@/utils/buttons'
-import url from '@/utils/url'
+	import {
+		mapState
+	} from 'vuex'
+	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 modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
-import 'ace-builds/webpack-resolver'
-import { theme } from '@/utils/constants'
+	import ace from 'ace-builds/src-min-noconflict/ace.js'
+	import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
+	import 'ace-builds/webpack-resolver'
+	import {
+		theme
+	} from '@/utils/constants'
+	
+	// import mavonEditor from 'mavon-editor'
 
-export default {
-  name: 'editor',
-  data: function () {
-    return {}
-  },
-  computed: {
-    ...mapState(['req', 'user']),
-    breadcrumbs () {
-      let parts = this.$route.path.split('/')
+	export default {
+		name: 'editor',
+		data: function() {
+			return {
+				isAceShow: true,
+				value: '',
+			}
+		},
+		computed: {
+			...mapState(['req', 'user']),
+			breadcrumbs() {
+				let parts = this.$route.path.split('/')
 
-      if (parts[0] === '') {
-        parts.shift()
-      }
+				if (parts[0] === '') {
+					parts.shift()
+				}
 
-      if (parts[parts.length - 1] === '') {
-        parts.pop()
-      }
+				if (parts[parts.length - 1] === '') {
+					parts.pop()
+				}
 
-      let breadcrumbs = []
+				let breadcrumbs = []
 
-      for (let i = 0; i < parts.length; i++) {
-        breadcrumbs.push({ name: decodeURIComponent(parts[i]) })
-      }
+				for (let i = 0; i < parts.length; i++) {
+					breadcrumbs.push({
+						name: decodeURIComponent(parts[i])
+					})
+				}
 
-      breadcrumbs.shift()
+				breadcrumbs.shift()
 
-      if (breadcrumbs.length > 3) {
-        while (breadcrumbs.length !== 4) {
-          breadcrumbs.shift()
-        }
+				if (breadcrumbs.length > 3) {
+					while (breadcrumbs.length !== 4) {
+						breadcrumbs.shift()
+					}
 
-        breadcrumbs[0].name = '...'
-      }
+					breadcrumbs[0].name = '...'
+				}
 
-      return breadcrumbs
-    }
-  },
-  created () {
-    window.addEventListener('keydown', this.keyEvent)
-  },
-  beforeDestroy () {
-    window.removeEventListener('keydown', this.keyEvent)
-    this.editor.destroy();
-  },
-  mounted: function () {    
-    const fileContent = this.req.content || '';
+				return breadcrumbs
+			}
+		},
+		created() {
+			window.addEventListener('keydown', this.keyEvent)
+		},
+		beforeDestroy() {
+			window.removeEventListener('keydown', this.keyEvent)
+			this.editor.destroy();
+		},
+		mounted: function() {
+			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') {
-      this.editor.setTheme("ace/theme/twilight");
-    }
-  },
-  methods: {
-    back () {
-      let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
-    },
-    keyEvent (event) {
-      if (!event.ctrlKey && !event.metaKey) {
-        return
-      }
+			//deal with md file alone
+			if (modelist.getModeForPath(this.req.name).mode.split("/").pop() == "markdown") {
+				console.log("is md file")
+				this.value = fileContent
+				this.isAceShow = false
+			} else {
+				this.isAceShow = true
+				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 (String.fromCharCode(event.which).toLowerCase() !== 's') {
-        return
-      }
+				if (theme == 'dark') {
+					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())
-        buttons.success(button)
-      } catch (e) {
-        buttons.done(button)
-        this.$showError(e)
-      }
-    }
-  }
-}
+		},
+		methods: {
+			back() {
+				let uri = url.removeLastDir(this.$route.path) + '/'
+				this.$router.push({
+					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>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 520bb8d7..535831b5 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,6 +6,9 @@ import Vue from '@/utils/vue'
 import { recaptcha, loginPage } from '@/utils/constants'
 import { login, validateLogin } from '@/utils/auth'
 import App from '@/App'
+import mavonEditor from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+Vue.use(mavonEditor);
 
 sync(store, router)