Monaco Editor 是一款开源的在线代码编辑器,它是 VSCode 的浏览器版本。
参考:https://blog.csdn.net/m0_37378152/article/details/127266631
Monaco Editor
//Editor.vue
<template>
<div>
<div ref="editor" style="height: 100%;" id="editor"></div>
</div>
</template>
<script>
// import { format } from 'sql-formatter'
const { format } = require("sql-formatter")
const monaco = require('monaco-editor');
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: String,
default: ''
}
},
data: function () {
return {
editor: null,
formatProvider: null,
databaseData: {
a: ['group', 'area'],
b: ['user', 'client']
},
tableData: {
user: ['age', 'gender'],
group: ['id', 'name']
},
}
},
mounted() {
this.initEditor()
},
methods: {
initEditor() {
this.editor = monaco.editor.create(document.getElementById("editor"), {
value: this.value || '--请输入sql,sql中如果有参数,参数用${参数名}表示',
language: "sql",//语言类型javascript\html\json\sql
automaticLayout: true,
theme: 'vs',//vs\vs-dark\dark
minimap: { // 关闭代码缩略图
enabled: false // 是否启用预览图
},
});
//监听编辑器内容发生改变
this.editor.onDidChangeModelContent((res) => {
this.$emit('change', this.editor.getValue())
})
//格式化
let _this = this;
this.formatProvider = monaco.languages.registerDocumentFormattingEditProvider('sql', {
provideDocumentFormattingEdits(model) {
return [{
text: _this.formatSql(1),
range: model.getFullModelRange()
}]
}
});
// 自动补全提示
this.suggestion = monaco.languages.registerCompletionItemProvider('sql', {
// 触发条件,也可以不写,不写的话只要输入满足配置的label就会提示;仅支持单字符
triggerCharacters: ['.', ' '],
provideCompletionItems: (model, position) => {
let suggestions = []
const { lineNumber, column } = position
const textBeforePointer = model.getValueInRange({
startLineNumber: lineNumber,
startColumn: 0,
endLineNumber: lineNumber,
endColumn: column,
})
const tokens = textBeforePointer.toLocaleLowerCase().trim().split(/\s+/)
const lastToken = tokens[tokens.length - 1] // 获取最后一段非空字符串
if (lastToken.endsWith('.')) {
// 提示该数据库下的表名
const tokenNoDot = lastToken.slice(0, lastToken.length - 1)
if (Object.keys(this.databaseData).includes(tokenNoDot)) {
suggestions = [...this.getTableSuggest(tokenNoDot)]
}
} else if (lastToken === '.') {
suggestions = []
} else if (textBeforePointer.endsWith(' ')) {
if (textBeforePointer.endsWith('select * from ')) {
// select * from 提示指定数据库的表名
suggestions = this.getTableSuggest(this.database)
} else if (lastToken === 'where') {
const lastToken2 = tokens[tokens.length - 2]
const lastToken3 = tokens[tokens.length - 3]
const lastToken4 = tokens[tokens.length - 4]
const lastToken5 = tokens[tokens.length - 5]
if (lastToken5 + lastToken4 + lastToken3 === 'select*from') {
// select * from tableName where 提示指定表的字段名
suggestions = [...this.getParamSuggest(lastToken2)]
} else {
suggestions = []
}
} else {
suggestions = []
}
} else {
// 提示数据库名和关键词
suggestions = [...this.getDBSuggest(), ...this.getSQLSuggest()]
}
return {
suggestions,
}
}
})
},
// 格式化代码
formatSql(needValue) {
this.clearMistake()
try {
this.setValue(format((this.editor).getValue()))
} catch (e) {
const { message } = e
const list = message.split(' ')
const line = list.indexOf('line')
const column = list.indexOf('column')
this.markMistake({
startLineNumber: Number(list[line + 1]),
endLineNumber: Number(list[line + 1]),
startColumn: Number(list[column + 1]),
endColumn: Number(list[column + 1])
}, 'Error', message)
}
if (needValue) {
return this.editor.getValue()
}
},
// 标记错误信息
markMistake(range, type, message) {
const { startLineNumber, endLineNumber, startColumn, endColumn } = range
monaco.editor.setModelMarkers(
this.editor.getModel(),
'eslint',
[{
startLineNumber,
endLineNumber,
startColumn,
endColumn,
severity: monaco.MarkerSeverity[type], // type可以是Error,Warning,Info
message
}]
)
},
// 清除错误信息
clearMistake() {
monaco.editor.setModelMarkers(
this.editor.getModel(),
'eslint',
[]
)
},
getSQLSuggest() {
const sqlKeywords = require('@/components/sqlKey')
return sqlKeywords.default.map((key) => ({
label: key,
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: key,
detail: 'keyword'
}))
},
// 表名
getTableSuggest(dbName) {
const tableNames = this.databaseData[dbName]
if (!tableNames) {
return []
}
return tableNames.map((name) => ({
label: name,
kind: monaco.languages.CompletionItemKind.Constant,
insertText: name,
detail: dbName
}))
},
// 字段名
getParamSuggest(tableName) {
const params = this.tableData[tableName]
if (!params) {
return []
}
return params.map((name) => ({
label: name,
kind: monaco.languages.CompletionItemKind.Constant,
insertText: name,
detail: 'param'
}))
},
// 数据库名
getDBSuggest() {
return Object.keys(this.databaseData).map((key) => ({
label: key,
kind: monaco.languages.CompletionItemKind.Enum,
insertText: key,
detail: 'database'
}))
},
// 父组件获取值
getValue() {
return this.editor.getValue()
},
// 父组件设置值
setValue(content) {
this.editor.setValue(content)
},
}
}
</script>
<style></style>
//sqlKey
export default [
"A",
"ABORT",
"ABS",
"ABSENT",
"ABSOLUTE",
"ACCESS",
"ACCORDING",
"ACOS",
"ACTION",
"ADA",
"ADD",
"ADMIN",
"AFTER",
"AGGREGATE",
"ALL",
"ALLOCATE",
"ALSO",
"ALTER",
"ALWAYS",
"ANALYSE",
"ANALYZE",
"AND",
"ANY",
"ARE",
"ARRAY",
"ARRAY_AGG",
"ARRAY_MAX_CARDINALITY",
"AS",
"ASC",
"ASENSITIVE",
"ASIN",
"ASSERTION",
"ASSIGNMENT",
"ASYMMETRIC",
"AT",
"ATAN",
"ATOMIC",
"ATTACH",
"ATTRIBUTE",
"ATTRIBUTES",
"AUTHORIZATION",
"AVG",
"BACKWARD",
"BASE64",
"BEFORE",
"BEGIN",
"BEGIN_FRAME",
"BEGIN_PARTITION",
"BERNOULLI",
"BETWEEN",
"BIGINT",
"BINARY",
"BIT",
"BIT_LENGTH",
"BLOB",
"BLOCKED",
"BOM",
"BOOLEAN",
"BOTH",
"BREADTH",
"BY",
"C",
"CACHE",
"CALL",
"CALLED",
"CARDINALITY",
"CASCADE",
"CASCADED",
"CASE",
"CAST",
"CATALOG",
"CATALOG_NAME",
"CEIL",
"CEILING",
"CHAIN",
"CHAINING",
"CHAR",
"CHARACTER",
"CHARACTERISTICS",
"CHARACTERS",
"CHARACTER_LENGTH",
"CHARACTER_SET_CATALOG",
"CHARACTER_SET_NAME",
"CHARACTER_SET_SCHEMA",
"CHAR_LENGTH",
"CHECK",
"CHECKPOINT",
"CLASS",
"CLASSIFIER",
"CLASS_ORIGIN",
"CLOB",
"CLOSE",
"CLUSTER",
"COALESCE",
"COBOL",
"COLLATE",
"COLLATION",
"COLLATION_CATALOG",
"COLLATION_NAME",
"COLLATION_SCHEMA",
"COLLECT",
"COLUMN",
"COLUMNS",
"COLUMN_NAME",
"COMMAND_FUNCTION",
"COMMAND_FUNCTION_CODE",
"COMMENT",
"COMMENTS",
"COMMIT",
"COMMITTED",
"COMPRESSION",
"CONCURRENTLY",
"CONDITION",
"CONDITIONAL",
"CONDITION_NUMBER",
"CONFIGURATION",
"CONFLICT",
"CONNECT",
"CONNECTION",
"CONNECTION_NAME",
"CONSTRAINT",
"CONSTRAINTS",
"CONSTRAINT_CATALOG",
"CONSTRAINT_NAME",
"CONSTRAINT_SCHEMA",
"CONSTRUCTOR",
"CONTAINS",
"CONTENT",
"CONTINUE",
"CONTROL",
"CONVERSION",
"CONVERT",
"COPY",
"CORR",
"CORRESPONDING",
"COS",
"COSH",
"COST",
"COUNT",
"COVAR_POP",
"COVAR_SAMP",
"CREATE",
"CROSS",
"CSV",
"CUBE",
"CUME_DIST",
"CURRENT",
"CURRENT_CATALOG",
"CURRENT_DATE",
"CURRENT_DEFAULT_TRANSFORM_GROUP",
"CURRENT_PATH",
"CURRENT_ROLE",
"CURRENT_ROW",
"CURRENT_SCHEMA",
"CURRENT_TIME",
"CURRENT_TIMESTAMP",
"CURRENT_TRANSFORM_GROUP_FOR_TYPE",
"CURRENT_USER",
"CURSOR",
"CURSOR_NAME",
"CYCLE",
"DATA",
"DATABASE",
"DATALINK",
"DATE",
"DATETIME_INTERVAL_CODE",
"DATETIME_INTERVAL_PRECISION",
"DAY",
"DB",
"DEALLOCATE",
"DEC",
"DECFLOAT",
"DECIMAL",
"DECLARE",
"DEFAULT",
"DEFAULTS",
"DEFERRABLE",
"DEFERRED",
"DEFINE",
"DEFINED",
"DEFINER",
"DEGREE",
"DELETE",
"DELIMITER",
"DELIMITERS",
"DENSE_RANK",
"DEPENDS",
"DEPTH",
"DEREF",
"DERIVED",
"DESC",
"DESCRIBE",
"DESCRIPTOR",
"DETACH",
"DETERMINISTIC",
"DIAGNOSTICS",
"DICTIONARY",
"DISABLE",
"DISCARD",
"DISCONNECT",
"DISPATCH",
"DISTINCT",
"DLNEWCOPY",
"DLPREVIOUSCOPY",
"DLURLCOMPLETE",
"DLURLCOMPLETEONLY",
"DLURLCOMPLETEWRITE",
"DLURLPATH",
"DLURLPATHONLY",
"DLURLPATHWRITE",
"DLURLSCHEME",
"DLURLSERVER",
"DLVALUE",
"DO",
"DOCUMENT",
"DOMAIN",
"DOUBLE",
"DROP",
"DYNAMIC",
"DYNAMIC_FUNCTION",
"DYNAMIC_FUNCTION_CODE",
"EACH",
"ELEMENT",
"ELSE",
"EMPTY",
"ENABLE",
"ENCODING",
"ENCRYPTED",
"END",
"END-EXEC",
"END_FRAME",
"END_PARTITION",
"ENFORCED",
"ENUM",
"EQUALS",
"ERROR",
"ESCAPE",
"EVENT",
"EVERY",
"EXCEPT",
"EXCEPTION",
"EXCLUDE",
"EXCLUDING",
"EXCLUSIVE",
"EXEC",
"EXECUTE",
"EXISTS",
"EXP",
"EXPLAIN",
"EXPRESSION",
"EXTENSION",
"EXTERNAL",
"EXTRACT",
"FALSE",
"FAMILY",
"FETCH",
"FILE",
"FILTER",
"FINAL",
"FINALIZE",
"FINISH",
"FIRST",
"FIRST_VALUE",
"FLAG",
"FLOAT",
"FLOOR",
"FOLLOWING",
"FOR",
"FORCE",
"FOREIGN",
"FORMAT",
"FORTRAN",
"FORWARD",
"FOUND",
"FRAME_ROW",
"FREE",
"FREEZE",
"FROM",
"FS",
"FULFILL",
"FULL",
"FUNCTION",
"FUNCTIONS",
"FUSION",
"G",
"GENERAL",
"GENERATED",
"GET",
"GLOBAL",
"GO",
"GOTO",
"GRANT",
"GRANTED",
"GREATEST",
"GROUP",
"GROUPING",
"GROUPS",
"HANDLER",
"HAVING",
"HEADER",
"HEX",
"HIERARCHY",
"HOLD",
"HOUR",
"ID",
"IDENTITY",
"IF",
"IGNORE",
"ILIKE",
"IMMEDIATE",
"IMMEDIATELY",
"IMMUTABLE",
"IMPLEMENTATION",
"IMPLICIT",
"IMPORT",
"IN",
"INCLUDE",
"INCLUDING",
"INCREMENT",
"INDENT",
"INDEX",
"INDEXES",
"INDICATOR",
"INHERIT",
"INHERITS",
"INITIAL",
"INITIALLY",
"INLINE",
"INNER",
"INOUT",
"INPUT",
"INSENSITIVE",
"INSERT",
"INSTANCE",
"INSTANTIABLE",
"INSTEAD",
"INT",
"INTEGER",
"INTEGRITY",
"INTERSECT",
"INTERSECTION",
"INTERVAL",
"INTO",
"INVOKER",
"IS",
"ISNULL",
"ISOLATION",
"JOIN",
"JSON_ARRAY",
"JSON_ARRAYAGG",
"JSON_EXISTS",
"JSON_OBJECT",
"JSON_OBJECTAGG",
"JSON_QUERY",
"JSON_TABLE",
"JSON_TABLE_PRIMITIVE",
"JSON_VALUE",
"K",
"KEEP",
"KEY",
"KEYS",
"KEY_MEMBER",
"KEY_TYPE",
"LABEL",
"LAG",
"LANGUAGE",
"LARGE",
"LAST",
"LAST_VALUE",
"LATERAL",
"LEAD",
"LEADING",
"LEAKPROOF",
"LEAST",
"LEFT",
"LENGTH",
"LEVEL",
"LIBRARY",
"LIKE",
"LIKE_REGEX",
"LIMIT",
"LINK",
"LISTAGG",
"LISTEN",
"LN",
"LOAD",
"LOCAL",
"LOCALTIME",
"LOCALTIMESTAMP",
"LOCATION",
"LOCATOR",
"LOCK",
"LOCKED",
"LOG",
"LOG10",
"LOGGED",
"LOWER",
"M",
"MAP",
"MAPPING",
"MATCH",
"MATCHED",
"MATCHES",
"MATCH_NUMBER",
"MATCH_RECOGNIZE",
"MATERIALIZED",
"MAX",
"MAXVALUE",
"MEASURES",
"MEMBER",
"MERGE",
"MESSAGE_LENGTH",
"MESSAGE_OCTET_LENGTH",
"MESSAGE_TEXT",
"METHOD",
"MIN",
"MINUTE",
"MINVALUE",
"MOD",
"MODE",
"MODIFIES",
"MODULE",
"MONTH",
"MORE",
"MOVE",
"MULTISET",
"MUMPS",
"NAME",
"NAMES",
"NAMESPACE",
"NATIONAL",
"NATURAL",
"NCHAR",
"NCLOB",
"NESTED",
"NESTING",
"NEW",
"NEXT",
"NFC",
"NFD",
"NFKC",
"NFKD",
"NIL",
"NO",
"NONE",
"NORMALIZE",
"NORMALIZED",
"NOT",
"NOTHING",
"NOTIFY",
"NOTNULL",
"NOWAIT",
"NTH_VALUE",
"NTILE",
"NULL",
"NULLABLE",
"NULLIF",
"NULLS",
"NULL_ORDERING",
"NUMBER",
"NUMERIC",
"OBJECT",
"OCCURRENCE",
"OCCURRENCES_REGEX",
"OCTETS",
"OCTET_LENGTH",
"OF",
"OFF",
"OFFSET",
"OIDS",
"OLD",
"OMIT",
"ON",
"ONE",
"ONLY",
"OPEN",
"OPERATOR",
"OPTION",
"OPTIONS",
"OR",
"ORDER",
"ORDERING",
"ORDINALITY",
"OTHERS",
"OUT",
"OUTER",
"OUTPUT",
"OVER",
"OVERFLOW",
"OVERLAPS",
"OVERLAY",
"OVERRIDING",
"OWNED",
"OWNER",
"P",
"PAD",
"PARALLEL",
"PARAMETER",
"PARAMETER_MODE",
"PARAMETER_NAME",
"PARAMETER_ORDINAL_POSITION",
"PARAMETER_SPECIFIC_CATALOG",
"PARAMETER_SPECIFIC_NAME",
"PARAMETER_SPECIFIC_SCHEMA",
"PARSER",
"PARTIAL",
"PARTITION",
"PASCAL",
"PASS",
"PASSING",
"PASSTHROUGH",
"PASSWORD",
"PAST",
"PATH",
"PATTERN",
"PER",
"PERCENT",
"PERCENTILE_CONT",
"PERCENTILE_DISC",
"PERCENT_RANK",
"PERIOD",
"PERMISSION",
"PERMUTE",
"PIPE",
"PLACING",
"PLAN",
"PLANS",
"PLI",
"POLICY",
"PORTION",
"POSITION",
"POSITION_REGEX",
"POWER",
"PRECEDES",
"PRECEDING",
"PRECISION",
"PREPARE",
"PREPARED",
"PRESERVE",
"PREV",
"PRIMARY",
"PRIOR",
"PRIVATE",
"PRIVILEGES",
"PROCEDURAL",
"PROCEDURE",
"PROCEDURES",
"PROGRAM",
"PRUNE",
"PTF",
"PUBLIC",
"PUBLICATION",
"QUOTE",
"QUOTES",
"RANGE",
"RANK",
"READ",
"READS",
"REAL",
"REASSIGN",
"RECHECK",
"RECOVERY",
"RECURSIVE",
"REF",
"REFERENCES",
"REFERENCING",
"REFRESH",
"REGR_AVGX",
"REGR_AVGY",
"REGR_COUNT",
"REGR_INTERCEPT",
"REGR_R2",
"REGR_SLOPE",
"REGR_SXX",
"REGR_SXY",
"REGR_SYY",
"REINDEX",
"RELATIVE",
"RELEASE",
"RENAME",
"REPEATABLE",
"REPLACE",
"REPLICA",
"REQUIRING",
"RESET",
"RESPECT",
"RESTART",
"RESTORE",
"RESTRICT",
"RESULT",
"RETURN",
"RETURNED_CARDINALITY",
"RETURNED_LENGTH",
"RETURNED_OCTET_LENGTH",
"RETURNED_SQLSTATE",
"RETURNING",
"RETURNS",
"REVOKE",
"RIGHT",
"ROLE",
"ROLLBACK",
"ROLLUP",
"ROUTINE",
"ROUTINES",
"ROUTINE_CATALOG",
"ROUTINE_NAME",
"ROUTINE_SCHEMA",
"ROW",
"ROWS",
"ROW_COUNT",
"ROW_NUMBER",
"RULE",
"RUNNING",
"SAVEPOINT",
"SCALAR",
"SCALE",
"SCHEMA",
"SCHEMAS",
"SCHEMA_NAME",
"SCOPE",
"SCOPE_CATALOG",
"SCOPE_NAME",
"SCOPE_SCHEMA",
"SCROLL",
"SEARCH",
"SECOND",
"SECTION",
"SECURITY",
"SEEK",
"SELECT",
"SELECTIVE",
"SELF",
"SEMANTICS",
"SENSITIVE",
"SEQUENCE",
"SEQUENCES",
"SERIALIZABLE",
"SERVER",
"SERVER_NAME",
"SESSION",
"SESSION_USER",
"SET",
"SETOF",
"SETS",
"SHARE",
"SHOW",
"SIMILAR",
"SIMPLE",
"SIN",
"SINH",
"SIZE",
"SKIP",
"SMALLINT",
"SNAPSHOT",
"SOME",
"SORT_DIRECTION",
"SOURCE",
"SPACE",
"SPECIFIC",
"SPECIFICTYPE",
"SPECIFIC_NAME",
"SQL",
"SQLCODE",
"SQLERROR",
"SQLEXCEPTION",
"SQLSTATE",
"SQLWARNING",
"SQRT",
"STABLE",
"STANDALONE",
"START",
"STATE",
"STATEMENT",
"STATIC",
"STATISTICS",
"STDDEV_POP",
"STDDEV_SAMP",
"STDIN",
"STDOUT",
"STORAGE",
"STORED",
"STRICT",
"STRING",
"STRIP",
"STRUCTURE",
"STYLE",
"SUBCLASS_ORIGIN",
"SUBMULTISET",
"SUBSCRIPTION",
"SUBSET",
"SUBSTRING",
"SUBSTRING_REGEX",
"SUCCEEDS",
"SUM",
"SUPPORT",
"SYMMETRIC",
"SYSID",
"SYSTEM",
"SYSTEM_TIME",
"SYSTEM_USER",
"T",
"TABLE",
"TABLES",
"TABLESAMPLE",
"TABLESPACE",
"TABLE_NAME",
"TAN",
"TANH",
"TEMP",
"TEMPLATE",
"TEMPORARY",
"TEXT",
"THEN",
"THROUGH",
"TIES",
"TIME",
"TIMESTAMP",
"TIMEZONE_HOUR",
"TIMEZONE_MINUTE",
"TO",
"TOKEN",
"TOP_LEVEL_COUNT",
"TRAILING",
"TRANSACTION",
"TRANSACTIONS_COMMITTED",
"TRANSACTIONS_ROLLED_BACK",
"TRANSACTION_ACTIVE",
"TRANSFORM",
"TRANSFORMS",
"TRANSLATE",
"TRANSLATE_REGEX",
"TRANSLATION",
"TREAT",
"TRIGGER",
"TRIGGER_CATALOG",
"TRIGGER_NAME",
"TRIGGER_SCHEMA",
"TRIM",
"TRIM_ARRAY",
"TRUE",
"TRUNCATE",
"TRUSTED",
"TYPE",
"TYPES",
"UESCAPE",
"UNBOUNDED",
"UNCOMMITTED",
"UNCONDITIONAL",
"UNDER",
"UNENCRYPTED",
"UNION",
"UNIQUE",
"UNKNOWN",
"UNLINK",
"UNLISTEN",
"UNLOGGED",
"UNMATCHED",
"UNNAMED",
"UNNEST",
"UNTIL",
"UNTYPED",
"UPDATE",
"UPPER",
"URI",
"USAGE",
"USER",
"USER_DEFINED_TYPE_CATALOG",
"USER_DEFINED_TYPE_CODE",
"USER_DEFINED_TYPE_NAME",
"USER_DEFINED_TYPE_SCHEMA",
"USING",
"UTF16",
"UTF32",
"UTF8",
"VACUUM",
"VALID",
"VALIDATE",
"VALIDATOR",
"VALUE",
"VALUES",
"VALUE_OF",
"VARBINARY",
"VARCHAR",
"VARIADIC",
"VARYING",
"VAR_POP",
"VAR_SAMP",
"VERBOSE",
"VERSION",
"VERSIONING",
"VIEW",
"VIEWS",
"VOLATILE",
"WHEN",
"WHENEVER",
"WHERE",
"WHITESPACE",
"WIDTH_BUCKET",
"WINDOW",
"WITH",
"WITHIN",
"WITHOUT",
"WORK",
"WRAPPER",
"WRITE",
"XML",
"XMLAGG",
"XMLATTRIBUTES",
"XMLBINARY",
"XMLCAST",
"XMLCOMMENT",
"XMLCONCAT",
"XMLDECLARATION",
"XMLDOCUMENT",
"XMLELEMENT",
"XMLEXISTS",
"XMLFOREST",
"XMLITERATE",
"XMLNAMESPACES",
"XMLPARSE",
"XMLPI",
"XMLQUERY",
"XMLROOT",
"XMLSCHEMA",
"XMLSERIALIZE",
"XMLTABLE",
"XMLTEXT",
"XMLVALIDATE",
"YEAR",
"YES",
"ZONE",
]