@lesterchn/monaco-editor v0.1.1
@lesterchn/monaco-editor
- 已支持汉化
- 支持json/js/mysql语法
- worker目录 为webworker
- JSON 案列
import Vue from 'vue';
import { EditorWorker, JsonWorker, monaco } from '@lesterchn/monaco-editor'; import '@lesterchn/monaco-editor/dist/lib/style.css';
// @ts-ignore self.MonacoEnvironment = { getWorker: function (_, label) { if (label === 'json') { return new JsonWorker() } return new EditorWorker() }, }
/* @type {Vue} /
export const QryApiJsonEditor = Vue.extend({
name: 'QryApiJsonEditor',
props: {
readOnly: { type: Boolean, required: false },
apiJson: { type: Object, default: () => ({ "$schema": ${location.origin}/apiJson/v2.json, designConfig: {} }) },
},
render(h) {
return h('div', { class: 'qry-api-json-editor' });
},
created() {
// monaco.languages.registerDefinitionProvider()
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: [
{
uri: ${location.origin}/apiJson/v2.json,
schema: {
type: 'object',
description: '查询组件/查询配置/V2',
properties: {
queryCode: {
description: '查询代码(queryCode)',
type: 'string',
},
queryName: {
title: '查询名称(queryName)',
type: 'string'
},
version: {
title: '版本(version)',
description: '保留字段',
type: 'number',
exclusiveMinimum: 0
},
},
required:
"queryCode"
}
}
]
})
}, mounted() {
const $editor = monaco.editor.create(this.$el, { language: "json", fontSize: 20 });
this.$watch(() => JSON.stringify(this.apiJson, null, 2), (value) => {
$editor.setValue(value);
}, { immediate: true })} })