monaco组件化

This commit is contained in:
fofolee 2022-03-31 11:29:34 +08:00
parent 2cda100a5d
commit cf612888fc
2 changed files with 76 additions and 53 deletions

View File

@ -0,0 +1,65 @@
<template>
<div id="monocaEditor"></div>
</template>
<script>
import * as monaco from "monaco-editor";
import { toRaw } from "vue";
import utoolsApi from "!raw-loader!../types/utools.api.d.ts";
import quickcommandApi from "!raw-loader!../types/quickcommand.api.d.ts";
import electronApi from "!raw-loader!../types/electron.d.ts";
import nodeApi from "!raw-loader!../types/node.api.d.ts";
import commonApi from "!raw-loader!../types/common.d.ts";
export default {
data() {
return {
editor: null,
};
},
mounted() {
this.initEditor();
},
methods: {
initEditor() {
this.editor = monaco.editor.create(
document.getElementById("monocaEditor"),
{
value: "",
language: "javascript",
automaticLayout: true,
foldingStrategy: "indentation",
autoClosingBrackets: true,
tabSize: 2,
minimap: {
enabled: false,
},
}
);
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: false,
});
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true,
allowJs: true,
lib: [],
});
monaco.languages.typescript.javascriptDefaults.addExtraLib(
quickcommandApi + utoolsApi + electronApi + nodeApi + commonApi,
"api.d.ts"
);
},
getEditorValue() {
return toRaw(this.editor).getValue();
},
setEditorLanguage(language) {
monaco.editor.setModelLanguage(this.editor.getModel(), language);
},
addEditorCommand(key, callback) {
this.editor.addCommand(key, callback);
},
},
};
</script>

View File

@ -85,8 +85,8 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div <MonocaEditor
id="monocaEditor" ref="editor"
style=" style="
position: fixed; position: fixed;
bottom: 1px; bottom: 1px;
@ -128,20 +128,14 @@
<script> <script>
import globalVars from "components/GlobalVars"; import globalVars from "components/GlobalVars";
import * as monaco from "monaco-editor"; import MonocaEditor from "components/MonocaEditor";
import { toRaw } from "vue";
import utoolsApi from "!raw-loader!../types/utools.api.d.ts";
import quickcommandApi from "!raw-loader!../types/quickcommand.api.d.ts";
import electronApi from "!raw-loader!../types/electron.d.ts";
import nodeApi from "!raw-loader!../types/node.api.d.ts";
import commonApi from "!raw-loader!../types/common.d.ts";
export default { export default {
components: { MonocaEditor },
data() { data() {
return { return {
options: Object.keys(globalVars.programs), options: Object.keys(globalVars.programs),
program: "quickcommand", program: "quickcommand",
editor: null,
customOptions: { bin: "", argv: "", ext: "" }, customOptions: { bin: "", argv: "", ext: "" },
scptarg: "", scptarg: "",
scriptCode: "", scriptCode: "",
@ -154,7 +148,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.initEditor(); this.bindKeys();
}, },
computed: {}, computed: {},
created() {}, created() {},
@ -164,45 +158,12 @@ export default {
}, },
}, },
methods: { methods: {
initEditor() { bindKeys() {
let that = this; let that = this;
this.editor = monaco.editor.create( // ctrl+b
document.getElementById("monocaEditor"), this.$refs.editor.addEditorCommand(2048 | 32, function () {
{ that.runCurrentCommand();
value: "",
language: "javascript",
automaticLayout: true,
foldingStrategy: "indentation",
autoClosingBrackets: true,
tabSize: 2,
minimap: {
enabled: false,
},
}
);
this.editor.addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB,
function () {
that.runCurrentCommand();
}
);
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: false,
}); });
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true,
allowJs: true,
lib: [],
});
monaco.languages.typescript.javascriptDefaults.addExtraLib(
quickcommandApi + utoolsApi + electronApi + nodeApi + commonApi,
"api.d.ts"
);
},
getEditorValue() {
return toRaw(this.editor).getValue();
}, },
matchLanguage() { matchLanguage() {
let language = Object.values(globalVars.programs).filter( let language = Object.values(globalVars.programs).filter(
@ -214,10 +175,7 @@ export default {
}, },
setLanguage(language) { setLanguage(language) {
let highlight = globalVars.programs[language].highlight; let highlight = globalVars.programs[language].highlight;
monaco.editor.setModelLanguage( this.$refs.editor.setEditorLanguage(highlight ? highlight : language);
this.editor.getModel(),
highlight ? highlight : language
);
}, },
showHelp() { showHelp() {
utools.createBrowserWindow("./helps/quickcommand.html", { utools.createBrowserWindow("./helps/quickcommand.html", {
@ -236,7 +194,7 @@ export default {
); );
}, },
async runCurrentCommand() { async runCurrentCommand() {
let cmd = this.getEditorValue(); let cmd = this.$refs.editor.getEditorValue();
cmd = window.special(cmd); cmd = window.special(cmd);
cmd = await this.replaceTempInputVals(cmd); cmd = await this.replaceTempInputVals(cmd);
let terminal = false; let terminal = false;