替换编辑器

This commit is contained in:
qxz 2020-05-20 11:25:46 +08:00
parent 6a63ea8e85
commit 9a56b77320
4 changed files with 48 additions and 40 deletions

34
package-lock.json generated
View File

@ -2530,11 +2530,6 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"brace": {
"version": "0.11.1",
"resolved": "https://registry.npm.taobao.org/brace/download/brace-0.11.1.tgz",
"integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "http://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
@ -3273,6 +3268,11 @@
"resolved": "http://registry.npm.taobao.org/code-point-at/download/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"codemirror": {
"version": "5.53.2",
"resolved": "https://registry.npm.taobao.org/codemirror/download/codemirror-5.53.2.tgz",
"integrity": "sha1-l5kSHPjFCAnMpIcwTp3jp00z9Cg="
},
"collection-visit": {
"version": "1.0.0",
"resolved": "http://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz",
@ -4430,6 +4430,11 @@
"integrity": "sha1-AU7o+PZpxcWAI9pkuBecCDooxGw=",
"dev": true
},
"diff-match-patch": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.4.tgz",
"integrity": "sha1-asS1UjdGN2HE2vDcYD64aRJHRLE="
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "http://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz",
@ -12341,6 +12346,15 @@
"clipboard": "^2.0.0"
}
},
"vue-codemirror": {
"version": "4.0.6",
"resolved": "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz",
"integrity": "sha1-t4a7gNjXYqk6q45G95qBAG8EN8Q=",
"requires": {
"codemirror": "^5.41.0",
"diff-match-patch": "^1.0.0"
}
},
"vue-eslint-parser": {
"version": "7.0.0",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz",
@ -12589,14 +12603,6 @@
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
"dev": true
},
"vue2-ace-editor": {
"version": "0.0.15",
"resolved": "https://registry.npm.taobao.org/vue2-ace-editor/download/vue2-ace-editor-0.0.15.tgz",
"integrity": "sha1-VpsgjlSudxrh7dO4kCrELw7cdOM=",
"requires": {
"brace": "^0.11.0"
}
},
"vuex": {
"version": "3.4.0",
"resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.4.0.tgz",
@ -12677,7 +12683,7 @@
},
"webpack-bundle-analyzer": {
"version": "3.7.0",
"resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846510646&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
"resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846559504&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
"integrity": "sha1-hNpDTolEKJm4hNmtOORm0NsCpW8=",
"dev": true,
"requires": {

View File

@ -27,11 +27,11 @@
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-clipboard2": "^0.3.1",
"vue-codemirror": "^4.0.6",
"vue-i18n": "^8.17.3",
"vue-infinite-scroll": "^2.0.2",
"vue-lazyload": "^1.3.3",
"vue-router": "^3.1.6",
"vue2-ace-editor": "0.0.15",
"vuex": "^3.4.0"
},
"devDependencies": {

View File

@ -37,11 +37,11 @@
// en/zh-chs/zh-cht
languages: 'en',
render: {
head_md: false,
readme_md: false,
head_md: true,
readme_md: true,
// 是否显示文件/文件夹描述(默认不显示)
// Show file/folder description or not (not shown by default)
desc: false,
desc: true,
}
}
window.gdconfig = JSON.parse(JSON.stringify({ version: authConfig.version, themeOptions: themeOptions }));

View File

@ -1,24 +1,31 @@
<template>
<div class="content g2-content">
<editor
ref="myEditor"
v-model="content"
@init="editorInit"
lang="html"
theme="chrome"
width="100%"
height="600"
></editor>
<codemirror v-model="content" :options="cmOptions" />
</div>
</template>
<script>
import { get_file, decode64 } from "@utils/AcrouUtil";
import { codemirror } from 'vue-codemirror'
// import base style
import 'codemirror/lib/codemirror.css'
// import language js
import 'codemirror/mode/javascript/javascript.js'
// import theme style
import 'codemirror/theme/base16-dark.css'
export default {
data: function () {
return {
path: "",
content: ""
content: "",
cmOptions: {
tabSize: 4,
mode: 'text/javascript',
// theme: 'base16-dark',
lineNumbers: true,
line: true
}
};
},
activated () {
@ -33,7 +40,7 @@ export default {
}
},
components: {
editor: require("@/components/ace-editor")
codemirror
},
methods: {
render () {
@ -42,17 +49,12 @@ export default {
get_file({ path: path, file: {} }, data => {
this.content = data;
});
},
editorInit (editor) {
editor.setFontSize(18);
editor.session.setUseWrapMode(false);
require("brace/ext/language_tools"); //language extension prerequsite...
require("brace/mode/html");
require("brace/mode/javascript"); //language
require("brace/mode/less");
require("brace/theme/chrome");
require("brace/snippets/javascript"); //snippet
}
}
};
</script>
</script>
<style lang="scss">
.CodeMirror {
height: 650px;
}
</style>