添加monoca editor

This commit is contained in:
fofolee 2022-03-30 09:25:29 +08:00
parent 72d146ba3f
commit 7541449bf3
5 changed files with 242 additions and 239 deletions

318
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,18 +13,20 @@
"dependencies": { "dependencies": {
"@quasar/extras": "^1.0.0", "@quasar/extras": "^1.0.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"monaco-editor": "^0.33.0",
"monaco-editor-webpack-plugin": "^7.0.1",
"quasar": "^2.6.0", "quasar": "^2.6.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0" "vue-router": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.13.14", "@babel/eslint-parser": "^7.13.14",
"@quasar/app-webpack": "^3.0.0",
"eslint": "^8.10.0", "eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^8.5.0", "eslint-plugin-vue": "^8.5.0",
"eslint-webpack-plugin": "^3.1.1", "eslint-webpack-plugin": "^3.1.1",
"eslint-config-prettier": "^8.1.0", "prettier": "^2.5.1"
"prettier": "^2.5.1",
"@quasar/app-webpack": "^3.0.0"
}, },
"browserslist": [ "browserslist": [
"last 10 Chrome versions", "last 10 Chrome versions",
@ -42,4 +44,4 @@
"npm": ">= 6.13.4", "npm": ">= 6.13.4",
"yarn": ">= 1.21.1" "yarn": ">= 1.21.1"
} }
} }

View File

@ -10,7 +10,7 @@
const ESLintPlugin = require('eslint-webpack-plugin') const ESLintPlugin = require('eslint-webpack-plugin')
const MonacoEditorPlugin = require("monaco-editor-webpack-plugin");
const { configure } = require('quasar/wrappers'); const { configure } = require('quasar/wrappers');
@ -76,8 +76,9 @@ module.exports = configure(function (ctx) {
chainWebpack (chain) { chainWebpack (chain) {
chain.plugin('eslint-webpack-plugin') chain.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }]) .use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
} chain.plugin("monaco-editor-webpack-plugin")
.use(MonacoEditorPlugin);
},
}, },
// Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer

View File

@ -2,6 +2,7 @@
const programs = { const programs = {
quickcommand: { quickcommand: {
name: "quickcommand", name: "quickcommand",
highlight: "javascript",
bin: "", bin: "",
argv: "", argv: "",
ext: "", ext: "",
@ -23,6 +24,7 @@ const programs = {
}, },
cmd: { cmd: {
name: "cmd", name: "cmd",
highlight: "bat",
bin: "", bin: "",
argv: "", argv: "",
ext: "bat", ext: "bat",

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="q-pa-md q-gutter-sm"> <div class="q-pa-md">
<div class="row q-gutter-sm"> <div class="row q-gutter-sm">
<div class="col-3"> <div class="col-3">
<div style="max-width: 300px"> <div style="max-width: 300px">
@ -32,13 +32,29 @@
<div class="col"> <div class="col">
<div class="row q-gutter-sm" v-show="program === 'custom'"> <div class="row q-gutter-sm" v-show="program === 'custom'">
<div class="col"> <div class="col">
<q-input dense v-model="customOptions.bin" label="解释器路径" /> <q-input
dense
v-model="customOptions.bin"
stack-label
label="解释器路径"
/>
</div> </div>
<div class="col"> <div class="col">
<q-input dense v-model="customOptions.argv" label="解释器参数" /> <q-input
dense
v-model="customOptions.argv"
stack-label
label="解释器参数"
/>
</div> </div>
<div class="col"> <div class="col">
<q-input dense v-model="customOptions.ext" label="后缀,不含." /> <q-input
dense
v-model="customOptions.ext"
@blur="matchLanguage"
label="后缀,不含."
stack-label
/>
</div> </div>
</div> </div>
</div> </div>
@ -55,16 +71,13 @@
<q-btn <q-btn
color="primary" color="primary"
label="文档" label="文档"
v-show="program === 'quickcommand'" @click="showHelp"
/>
<q-btn
color="primary"
label="格式化"
v-show="program === 'quickcommand'" v-show="program === 'quickcommand'"
/> />
<q-btn <q-btn
color="primary" color="primary"
label="编码设置" label="编码设置"
@click="showCoding = true"
v-show="program !== 'quickcommand'" v-show="program !== 'quickcommand'"
/> />
<q-btn color="primary" label="运行" /> <q-btn color="primary" label="运行" />
@ -72,26 +85,131 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<textarea style="width: 100%; height: 85vh"></textarea> <div
id="monocaEditor"
style="
position: fixed;
bottom: 1px;
left: 1px;
right: 1px;
top: 70px;
border-radius: 4px;
border: 2px solid #3376cd;
"
/>
</div> </div>
<q-dialog v-model="showCoding" persistent>
<q-card style="min-width: 350px">
<q-card-section>
<div class="text-h5" align="center">编码设置</div>
</q-card-section>
<q-card-section class="q-gutter-sm">
<q-input
outlined
v-model="scriptCode"
label="脚本编码"
hint="未出现乱码问题请留空"
hide-hint
autofocus
@keyup.enter="showCoding = false"
/>
<q-input
outlined
v-model="outputCode"
label="输出编码"
hint="未出现乱码问题请留空"
hide-hint
@keyup.enter="showCoding = false"
/>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn color="primary" label="帮助" @click="showSupportEncodings()" />
<q-btn color="primary" label="确定" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</div> </div>
</template> </template>
<script> <script>
import GlobalVars from "components/GlobalVars"; import GlobalVars from "components/GlobalVars";
import * as monaco from "monaco-editor";
export default { export default {
data() { data() {
return { return {
options: Object.keys(GlobalVars.programs), options: Object.keys(GlobalVars.programs),
program: "quickcommand", program: "quickcommand",
editor: "", editor: null,
customOptions: { bin: "", argv: "", ext: "" }, customOptions: { bin: "", argv: "", ext: "" },
scptarg: "" scptarg: "",
showCoding: false,
scriptCode: "",
outputCode: "",
}; };
}, },
mounted() {
this.initEditor();
},
computed: {}, computed: {},
created() {}, created() {},
methods: {}, watch: {
program(val) {
this.setLanguage(val);
},
},
methods: {
initEditor() {
this.editor = monaco.editor.create(
document.getElementById("monocaEditor"),
{
value: "",
language: "javascript",
automaticLayout: true,
foldingStrategy: "indentation",
autoClosingBrackets: true,
tabSize: 2,
minimap: {
enabled: false,
},
}
);
this.editor.onDidChangeModelContent((e) => {
console.log(e);
});
},
getValue() {
this.editor.getValue();
},
matchLanguage() {
let language = Object.values(GlobalVars.programs).filter(
(program) => program.ext === this.customOptions.ext
);
if (language.length) {
this.setLanguage(language[0].name);
}
},
setLanguage(language) {
let highlight = GlobalVars.programs[language].highlight;
monaco.editor.setModelLanguage(
this.editor.getModel(),
highlight ? highlight : language
);
},
showHelp() {
utools.createBrowserWindow("./helps/quickcommand.html", {
width: 1280,
height: 920,
});
},
showSupportEncodings() {
utools.ubrowser
.goto(
"https://github.com/ashtuchkin/iconv-lite/wiki/Supported-Encodings"
)
.run({ width: 1280, height: 920 });
},
},
}; };
</script> </script>