add mavon-editor for markdown file

2020-10-26 09:45:48 +08:00 · 2020-10-26 09:45:48 +08:00 · 43546ad2f6
commit 43546ad2f6
parent 9f858398ab
5 changed files with 188 additions and 121 deletions
--- a/filebrowser.exe
+++ b/filebrowser.exe
--- 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",
--- 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",
--- a/frontend/src/components/files/Editor.vue
+++ b/frontend/src/components/files/Editor.vue
@ -23,29 +23,45 @@
 			</span>
 		</div>

-    <form id="editor"></form>
+		<!-- <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'
 	
-export default {
+	// import mavonEditor from 'mavon-editor'
+
+	export default {
 		name: 'editor',
-  data: function () {
-    return {}
+		data: function() {
+			return {
+				isAceShow: true,
+				value: '',
+			}
 		},
 		computed: {
 			...mapState(['req', 'user']),
-    breadcrumbs () {
+			breadcrumbs() {
 				let parts = this.$route.path.split('/')

 				if (parts[0] === '') {
@ -59,7 +75,9 @@ export default {
 				let breadcrumbs = []

 				for (let i = 0; i < parts.length; i++) {
-        breadcrumbs.push({ name: decodeURIComponent(parts[i]) })
+					breadcrumbs.push({
+						name: decodeURIComponent(parts[i])
+					})
 				}

 				breadcrumbs.shift()
@ -75,16 +93,24 @@ export default {
 				return breadcrumbs
 			}
 		},
-  created () {
+		created() {
 			window.addEventListener('keydown', this.keyEvent)
 		},
-  beforeDestroy () {
+		beforeDestroy() {
 			window.removeEventListener('keydown', this.keyEvent)
 			this.editor.destroy();
 		},
-  mounted: function () {    
+		mounted: function() {
 			const fileContent = this.req.content || '';

+
+			//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,
@ -97,13 +123,18 @@ export default {
 				if (theme == 'dark') {
 					this.editor.setTheme("ace/theme/twilight");
 				}
+			}
+
+
 		},
 		methods: {
-    back () {
+			back() {
 				let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
+				this.$router.push({
+					path: uri
+				})
 			},
-    keyEvent (event) {
+			keyEvent(event) {
 				if (!event.ctrlKey && !event.metaKey) {
 					return
 				}
@ -115,12 +146,18 @@ export default {
 				event.preventDefault()
 				this.save()
 			},
-    async 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)
@ -128,5 +165,5 @@ export default {
 				}
 			}
 		}
-}
+	}
 </script>
--- 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)