添加事件
qianlishi
2 years ago
parent
dbbda1fbd2
commit
8348691e28
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="editor" class="main"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as monaco from "monaco-editor";
|
||||||
|
import createSqlCompleter from "./util/sql-completion";
|
||||||
|
import createJavascriptCompleter from "./util/javascript-completion";
|
||||||
|
import registerLanguage from "./util/log-language";
|
||||||
|
const global = {};
|
||||||
|
|
||||||
|
const getHints = model => {
|
||||||
|
let id = model.id.substring(6);
|
||||||
|
return (global[id] && global[id].hints) || [];
|
||||||
|
};
|
||||||
|
monaco.languages.registerCompletionItemProvider(
|
||||||
|
"sql",
|
||||||
|
createSqlCompleter(getHints)
|
||||||
|
);
|
||||||
|
monaco.languages.registerCompletionItemProvider(
|
||||||
|
"javascript",
|
||||||
|
createJavascriptCompleter(getHints)
|
||||||
|
);
|
||||||
|
registerLanguage(monaco);
|
||||||
|
/**
|
||||||
|
* monaco options
|
||||||
|
* https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
language: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
hints: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: "MonacoEditor",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editorInstance: null,
|
||||||
|
defaultOptions: {
|
||||||
|
theme: "vs-dark",
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value() {
|
||||||
|
if (this.value !== this.editorInstance.getValue()) {
|
||||||
|
this.editorInstance.setValue(this.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initEditor();
|
||||||
|
global[this.editorInstance._id] = this;
|
||||||
|
window.addEventListener("resize", this.layout);
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this.editorInstance.dispose();
|
||||||
|
global[this.editorInstance._id] = null;
|
||||||
|
window.removeEventListener("resize", this.layout);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
layout() {
|
||||||
|
this.editorInstance.layout();
|
||||||
|
},
|
||||||
|
undo() {
|
||||||
|
this.editorInstance.trigger("anyString", "undo");
|
||||||
|
this.onValueChange();
|
||||||
|
},
|
||||||
|
redo() {
|
||||||
|
this.editorInstance.trigger("anyString", "redo");
|
||||||
|
this.onValueChange();
|
||||||
|
},
|
||||||
|
getOptions() {
|
||||||
|
let props = { value: this.value };
|
||||||
|
this.language !== undefined && (props.language = this.language);
|
||||||
|
let options = Object.assign({}, this.defaultOptions, this.options, props);
|
||||||
|
return options;
|
||||||
|
},
|
||||||
|
onValueChange() {
|
||||||
|
this.$emit("input", this.editorInstance.getValue());
|
||||||
|
this.$emit("change", this.editorInstance.getValue());
|
||||||
|
},
|
||||||
|
initEditor() {
|
||||||
|
this.MonacoEnvironment = {
|
||||||
|
getWorkerUrl: function() {
|
||||||
|
return "./editor.worker.bundle.js";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.editorInstance = monaco.editor.create(
|
||||||
|
this.$refs.editor,
|
||||||
|
this.getOptions()
|
||||||
|
);
|
||||||
|
this.editorInstance.onContextMenu(e => {
|
||||||
|
this.$emit("contextmenu", e);
|
||||||
|
});
|
||||||
|
this.editorInstance.onDidChangeModelContent(() => {
|
||||||
|
this.onValueChange();
|
||||||
|
});
|
||||||
|
this.editorInstance.addCommand(
|
||||||
|
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
|
||||||
|
() => {
|
||||||
|
this.$emit("save", this.editorInstance.getValue());
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.main /deep/ .view-lines * {
|
||||||
|
font-family: Consolas, "Courier New", monospace !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import * as monaco from 'monaco-editor'
|
||||||
|
// js 有内置提示
|
||||||
|
function createCompleter(getExtraHints) {
|
||||||
|
const createSuggestions = function (model, textUntilPosition) {
|
||||||
|
let text = model.getValue();
|
||||||
|
textUntilPosition = textUntilPosition.replace(/[\*\[\]@\$\(\)]/g, "").replace(/(\s+|\.)/g, " ");
|
||||||
|
let arr = textUntilPosition.split(/[\s;]/);
|
||||||
|
let activeStr = arr[arr.length - 1];
|
||||||
|
let len = activeStr.length;
|
||||||
|
let rexp = new RegExp("([^\\w]|^)" + activeStr + "\\w*", "gim");
|
||||||
|
let match = text.match(rexp);
|
||||||
|
let mergeHints = Array.from(new Set([...getExtraHints(model)]))
|
||||||
|
.sort()
|
||||||
|
.filter(ele => {
|
||||||
|
let rexp = new RegExp(ele.substr(0, len), "gim");
|
||||||
|
return (match && match.length === 1 && ele === activeStr) ||
|
||||||
|
ele.length === 1 ? false : activeStr.match(rexp);
|
||||||
|
});
|
||||||
|
return mergeHints.map(ele => ({
|
||||||
|
label: ele,
|
||||||
|
kind: monaco.languages.CompletionItemKind.Text,
|
||||||
|
documentation: ele,
|
||||||
|
insertText: ele
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
provideCompletionItems(model, position) {
|
||||||
|
let textUntilPosition = model.getValueInRange({
|
||||||
|
startLineNumber: position.lineNumber,
|
||||||
|
startColumn: 1,
|
||||||
|
endLineNumber: position.lineNumber,
|
||||||
|
endColumn: position.column
|
||||||
|
});
|
||||||
|
return { suggestions: createSuggestions(model, textUntilPosition) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default createCompleter;
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
function registerLanguage(monaco) {
|
||||||
|
monaco.languages.register({
|
||||||
|
id: "log"
|
||||||
|
});
|
||||||
|
monaco.languages.setMonarchTokensProvider("log", {
|
||||||
|
tokenizer: {
|
||||||
|
root: [
|
||||||
|
[/(^[=a-zA-Z].*|\d\s.*)/, "log-normal"],
|
||||||
|
[/\sERROR\s.*/, "log-error"],
|
||||||
|
[/\sWARN\s.*/, "log-warn"],
|
||||||
|
[/\sINFO\s.*/, "log-info"],
|
||||||
|
[
|
||||||
|
/^([0-9]{4}||[0-9]{2})-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}(.[0-9]{3})?/,
|
||||||
|
"log-date",
|
||||||
|
],
|
||||||
|
[
|
||||||
|
/^[0-9]{2}\/[0-9]{2}\/[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}(.[0-9]{3})?/,
|
||||||
|
"log-date",
|
||||||
|
],
|
||||||
|
[/(^\*\*Waiting queue:.*)/, "log-info"],
|
||||||
|
[/(^\*\*result tips:.*)/, "log-info"],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
monaco.editor.defineTheme("log", {
|
||||||
|
base: "vs",
|
||||||
|
inherit: true,
|
||||||
|
rules: [{
|
||||||
|
token: "log-info",
|
||||||
|
foreground: "4b71ca"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
token: "log-error",
|
||||||
|
foreground: "ff0000",
|
||||||
|
fontStyle: "bold"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
token: "log-warn",
|
||||||
|
foreground: "FFA500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
token: "log-date",
|
||||||
|
foreground: "008800"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
token: "log-normal",
|
||||||
|
foreground: "808080"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
colors: {
|
||||||
|
"editor.lineHighlightBackground": "#ffffff",
|
||||||
|
"editorGutter.background": "#f7f7f7",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default registerLanguage;
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import * as monaco from 'monaco-editor'
|
||||||
|
const hints = [
|
||||||
|
"SELECT",
|
||||||
|
"INSERT",
|
||||||
|
"DELETE",
|
||||||
|
"UPDATE",
|
||||||
|
"CREATE TABLE",
|
||||||
|
"DROP TABLE",
|
||||||
|
"ALTER TABLE",
|
||||||
|
"CREATE VIEW",
|
||||||
|
"DROP VIEW",
|
||||||
|
"CREATE INDEX",
|
||||||
|
"DROP INDEX",
|
||||||
|
"CREATE PROCEDURE",
|
||||||
|
"DROP PROCEDURE",
|
||||||
|
"CREATE TRIGGER",
|
||||||
|
"DROP TRIGGER",
|
||||||
|
"CREATE SCHEMA",
|
||||||
|
"DROP SCHEMA",
|
||||||
|
"CREATE DOMAIN",
|
||||||
|
"ALTER DOMAIN",
|
||||||
|
"DROP DOMAIN",
|
||||||
|
"GRANT",
|
||||||
|
"DENY",
|
||||||
|
"REVOKE",
|
||||||
|
"COMMIT",
|
||||||
|
"ROLLBACK",
|
||||||
|
"SET TRANSACTION",
|
||||||
|
"DECLARE",
|
||||||
|
"EXPLAN",
|
||||||
|
"OPEN",
|
||||||
|
"FETCH",
|
||||||
|
"CLOSE",
|
||||||
|
"PREPARE",
|
||||||
|
"EXECUTE",
|
||||||
|
"DESCRIBE",
|
||||||
|
"FROM",
|
||||||
|
"ORDER BY"]
|
||||||
|
function createCompleter(getExtraHints) {
|
||||||
|
const createSuggestions = function (model, textUntilPosition) {
|
||||||
|
let text = model.getValue();
|
||||||
|
textUntilPosition = textUntilPosition.replace(/[\*\[\]@\$\(\)]/g, "").replace(/(\s+|\.)/g, " ");
|
||||||
|
let arr = textUntilPosition.split(/[\s;]/);
|
||||||
|
let activeStr = arr[arr.length - 1];
|
||||||
|
let len = activeStr.length;
|
||||||
|
let rexp = new RegExp("([^\\w]|^)" + activeStr + "\\w*", "gim");
|
||||||
|
let match = text.match(rexp);
|
||||||
|
let textHints = !match ? [] :
|
||||||
|
match.map(ele => {
|
||||||
|
let rexp = new RegExp(activeStr, "gim");
|
||||||
|
let search = ele.search(rexp);
|
||||||
|
return ele.substr(search);
|
||||||
|
});
|
||||||
|
let mergeHints = Array.from(new Set([...hints, ...textHints, ...getExtraHints(model)]))
|
||||||
|
.sort()
|
||||||
|
.filter(ele => {
|
||||||
|
let rexp = new RegExp(ele.substr(0, len), "gim");
|
||||||
|
return (match && match.length === 1 && ele === activeStr) ||
|
||||||
|
ele.length === 1 ? false : activeStr.match(rexp);
|
||||||
|
});
|
||||||
|
return mergeHints.map(ele => ({
|
||||||
|
label: ele,
|
||||||
|
kind: hints.indexOf(ele) > -1 ?
|
||||||
|
monaco.languages.CompletionItemKind.Keyword :
|
||||||
|
monaco.languages.CompletionItemKind.Text,
|
||||||
|
documentation: ele,
|
||||||
|
insertText: ele
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
provideCompletionItems(model, position) {
|
||||||
|
let textUntilPosition = model.getValueInRange({
|
||||||
|
startLineNumber: position.lineNumber,
|
||||||
|
startColumn: 1,
|
||||||
|
endLineNumber: position.lineNumber,
|
||||||
|
endColumn: position.column
|
||||||
|
});
|
||||||
|
return { suggestions: createSuggestions(model, textUntilPosition) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default createCompleter;
|
||||||
Loading…
Reference in New Issue