Skip to content

Commit e526e08

Browse files
GroupguanfangGroupguanfang
committed
add ace editor component
1 parent e75b590 commit e526e08

17 files changed

+1191
-3239
lines changed

‎.htaccess

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# 请将伪静态规则或自定义Apache配置填写到此处

‎.well-known/acme-challenge/IGmX6yBxfalfCnyJVvlkwrkCaW1qEWKj55keXWvT6ZI

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
IGmX6yBxfalfCnyJVvlkwrkCaW1qEWKj55keXWvT6ZI.AzbqyCtjs2kyFQqEH1YtaioEqYu-9pR6qvJcgXozrjk

‎dist/.user.ini

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
open_basedir=/www/wwwroot/Editor/dist/:/tmp/

‎dist/404.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<html>
2+
<head><title>404 Not Found</title></head>
3+
<body>
4+
<center><h1>404 Not Found</h1></center>
5+
<hr><center>nginx</center>
6+
</body>
7+
</html>

‎package-lock.json

+975-3,078
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@vicons/material": "^0.12.0",
15+
"ace-builds": "^1.14.0",
1516
"axios": "1.0.0",
1617
"codemirror": "^5.65.9",
1718
"codemirror-editor-vue3": "^2.1.7",
@@ -21,7 +22,8 @@
2122
"pinia-plugin-persist": "^1.0.0",
2223
"prettier": "^2.7.1",
2324
"vue": "^3.2.38",
24-
"vue-router": "^4.1.5"
25+
"vue-router": "^4.1.5",
26+
"vue3-ace-editor": "^2.2.2"
2527
},
2628
"devDependencies": {
2729
"@types/node": "^16.11.56",

‎src/App.vue

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
<template>
2-
<div id="root">
3-
<NConfigProvider :theme="darkTheme" style="height: 100vh">
1+
<template> <NConfigProvider :theme="darkTheme">
42
<NMessageProvider>
53
<n-dialog-provider>
64
<router-view />
75
</n-dialog-provider>
86
</NMessageProvider>
97
</NConfigProvider>
10-
</div>
118
</template>
129

1310
<script setup lang="ts">

‎src/api/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import md5 from "md5"
5454
export async function SaveFile(path:any,data:any):Promise<any> {
5555
const config = {
5656
host: "/apis",
57-
token: "899loiW5aLbLIRmWEqQZAw9RDK1c782W"
57+
token: "6dXXHsN8wwEyyOpqjvCcaMySkehmKKvM"
5858
}
5959
const time = Math.round(new Date().getTime()/1000).toString()
6060
const token = md5(time + md5(config.token))

‎src/assets/main.less

+4-5
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@ body {
1313
padding: 0;
1414
margin: 0;
1515
}
16-
#app,
17-
#root,
18-
body {
19-
height: 100vh;
20-
}
2116
.padding {
2217
padding: @public;
2318
}
@@ -28,3 +23,7 @@ h1 {
2823
margin: 0;
2924
padding: 0;
3025
}
26+
#editor .CodeMirror * {
27+
font-family: "JetBrains Mono",v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
28+
font-size: var(--fontSize);
29+
}

‎src/components/ace.vue

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<script setup lang="ts">
2+
import ace from "ace-builds"
3+
import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'
4+
ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
5+
import { VAceEditor } from 'vue3-ace-editor'
6+
7+
8+
import { ref, reactive, onMounted, watch } from "vue"
9+
import { useRoute } from "vue-router"
10+
import { GetFile, SaveFile } from "../api"
11+
import { useMessage } from "naive-ui"
12+
const route = useRoute()
13+
const message = useMessage()
14+
15+
const code = ref('')
16+
const lang = ref('')
17+
18+
const parser = () => {
19+
let path:any = route.query.path
20+
path = path.split('/')
21+
path = path[path.length - 1]
22+
if (path.search('.') != -1) {
23+
path = path.split('.')
24+
return path[path.length - 1]
25+
} else {
26+
return null
27+
}
28+
}
29+
30+
import javascript from 'ace-builds/src-noconflict/mode-javascript'
31+
import typescript from 'ace-builds/src-noconflict/mode-typescript'
32+
import html from 'ace-builds/src-noconflict/mode-html_elixir'
33+
import json from 'ace-builds/src-noconflict/mode-json'
34+
import css from 'ace-builds/src-noconflict/mode-css'
35+
import less from 'ace-builds/src-noconflict/mode-less'
36+
37+
38+
if (parser() === 'ts') {
39+
ace.config.setModuleUrl('ace/mode/typescript', typescript)
40+
lang.value = 'typescript'
41+
} else if (parser() === 'js') {
42+
ace.config.setModuleUrl('ace/mode/javascript', javascript)
43+
lang.value = 'javascript'
44+
} else if (parser() === 'vue' || parser() === 'html') {
45+
ace.config.setModuleUrl('ace/mode/html', html)
46+
lang.value = 'html'
47+
} else if (parser() === 'json') {
48+
ace.config.setModuleUrl('ace/mode/json', json)
49+
lang.value = 'json'
50+
} else if (parser() === 'css') {
51+
ace.config.setModuleUrl('ace/mode/css', css)
52+
lang.value = 'css'
53+
} else if (parser() === 'less') {
54+
ace.config.setModuleUrl('ace/mode/less', less)
55+
lang.value = 'less'
56+
}
57+
58+
onMounted(async () => {
59+
const data = await GetFile(route.query.path)
60+
console.log(data)
61+
code.value = data.data.data
62+
})
63+
64+
const save = async () => {
65+
const request = await SaveFile(route.query.path,code.value)
66+
message.success(request.data.msg)
67+
}
68+
</script>
69+
70+
<template>
71+
<div class="container">
72+
<v-ace-editor
73+
v-model:value="code"
74+
:lang="lang"
75+
theme="monokai"
76+
style="height: 100%;font-size: 14px"
77+
/>
78+
<div class="operation">
79+
<n-button @click="save">保存</n-button>
80+
</div>
81+
</div>
82+
</template>
83+
84+
<style lang="less" scoped>
85+
.container {
86+
position: absolute;
87+
width: 100%;
88+
height: 100%;
89+
}
90+
.operation {
91+
position: fixed;
92+
width: 100%;
93+
bottom: 0;
94+
z-index: 999;
95+
}
96+
</style>

‎src/components/editor.vue

+32-1
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,24 @@ import { useEditing } from "../stores/editing"
2626
import "codemirror/mode/javascript/javascript.js"
2727
import "codemirror/mode/htmlmixed/htmlmixed.js"
2828
import "codemirror/mode/markdown/markdown.js"
29+
import "codemirror/mode/vue/vue.js"
30+
import 'codemirror/addon/lint/lint.css'
31+
import 'codemirror/lib/codemirror.css'
32+
import 'codemirror/theme/panda-syntax.css'
33+
import 'codemirror/mode/javascript/javascript'
34+
import 'codemirror/addon/lint/json-lint'
35+
// 折叠代码
36+
import 'codemirror/addon/fold/foldgutter.css';
37+
import 'codemirror/addon/fold/foldcode.js';
38+
import 'codemirror/addon/fold/foldgutter.js';
39+
import 'codemirror/addon/fold/brace-fold.js';
40+
import 'codemirror/addon/fold/xml-fold.js';
41+
import 'codemirror/addon/fold/indent-fold.js';
42+
import 'codemirror/addon/fold/markdown-fold.js';
43+
import 'codemirror/addon/fold/comment-fold.js'
2944
import "codemirror/theme/monokai.css"
30-
import { ref, onMounted } from "vue"
45+
// inport "codemirror/addon/edit/closetag.js"
46+
import { ref, onMounted, watch } from "vue"
3147
import { useRoute } from "vue-router"
3248
import { GetFile, SaveFile } from "../api"
3349
import { useMessage } from "naive-ui"
@@ -37,6 +53,10 @@ const editing = useEditing()
3753
3854
// 字体大小
3955
const fontSize = ref(editing.fontSize)
56+
const onUpdate = () => {
57+
editing.updateFontSize(fontSize.value)
58+
}
59+
watch(fontSize,onUpdate)
4060
4161
const code = ref(``)
4262
let cmOptions:any = ref({
@@ -70,8 +90,19 @@ const save = async () => {
7090
onMounted(async () => {
7191
if (parser() == 'js') {
7292
cmOptions.value.mode = 'javascript'
93+
cmOptions.value.lint = true
7394
} else if (parser() == 'md') {
7495
cmOptions.value.mode = 'markdown'
96+
} else if (parser() == 'json') {
97+
cmOptions.value.mode = 'application/json'
98+
cmOptions.value.lint = true
99+
} else if (parser() == 'ts') {
100+
cmOptions.value.mode = 'javascript'
101+
} else if (parser() == 'vue') {
102+
cmOptions.value.mode = 'vue'
103+
} else if (parser() == 'html') {
104+
cmOptions.value.mode = 'text/html'
105+
import("codemirror/addon/edit/closetag.js")
75106
}
76107
console.log(parser())
77108
const data = await GetFile(route.query.path)

‎src/router/index.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ const router = createRouter({
1414
component: () => import("../views/edit.vue"),
1515
},
1616
],
17-
});
17+
})
18+
19+
router.beforeEach((to, from) => {
20+
if (to.path === '/edit') {
21+
document.querySelector('body').style = 'height: auto;overflow: hidden'
22+
} else {
23+
document.querySelector('body').style = 'height: 100vh;overflow: auto'
24+
}
25+
})
1826

1927
export default router;

‎src/stores/counter.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ export const useCounterStore:any = defineStore('counter', {
3333
},
3434
persist: {
3535
enabled: true,
36-
storage: localStorage,
36+
strategies: [
37+
{
38+
paths: ['count','history'],
39+
storage: localStorage
40+
}
41+
]
3742
},
3843
})

‎src/stores/editing.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export const useEditing:any = defineStore('editing',{
1313
},
1414
persist: {
1515
enabled: true,
16-
storage: localStorage,
16+
strategies: [
17+
{
18+
storage: localStorage,
19+
paths: ['fontSize']
20+
}
21+
],
1722
},
1823
})

‎src/utils/axios.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import axios from "axios"
22
import md5 from "md5"
33
const config = {
44
host: "/apis",
5-
token: "899loiW5aLbLIRmWEqQZAw9RDK1c782W"
5+
token: "6dXXHsN8wwEyyOpqjvCcaMySkehmKKvM"
66
}
77

88

@@ -19,4 +19,4 @@ const request = axios.create({
1919
method: "post"
2020
})
2121

22-
export default request
22+
export default request

‎src/views/edit.vue

+2-9
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,5 @@
33
</template>
44

55
<script setup lang="ts" allowJs="true">
6-
import Editor from "../components/editor.vue"
7-
</script>
8-
9-
<style lang="less">
10-
#edit {
11-
height: 100vh;
12-
overflow: hidden;
13-
}
14-
</style>
6+
import Editor from "../components/ace.vue"
7+
</script>

0 commit comments

Comments
 (0)