Question

我正在使用带有typescript的vuejs来创建一个基于Monaco Editor json validation的组件，到目前为止它工作正常并且正确呈现但是我有一个小问题，我无法提供自定义模式验证摩纳哥编辑，截至目前这是我的实现，但当我传递模式作为摩纳哥编辑器child.tsx文件的道具时，它无法工作，任何帮助都将受到高度赞赏。

Parent.tsx文件，我正在使用Monaco编辑器并定义了道具

data() {
        const id = 'foo.json';
        const validCardSchema = [{
            uri: 'http://myserver/foo-schema.json',
            fileMatch: [id],
            schema: {
                type: 'object',
                properties: {
                    p1: {
                        enum: ['v1', 'v2']
                    },
                    p2: {
                        $ref: 'http://myserver/bar-schema.json'
                    }
                }
            }
        }, {
            uri: 'http://myserver/bar-schema.json',
            fileMatch: [id],
            schema: {
                type: 'object',
                properties: {
                    q1: {
                        enum: ['x1', 'x2']
                    }
                }
            }
        }];

        return {
            jsonEditorText: JSON.stringify(editorCode),
            validCardSchema
        };
}

<TMonacoEditor
    width="400"
    height="400"
    language="json"
    style="border: none;"
    code={this.MonacoEditorText}
    onCodeChange={newVal => this.updateMonacoEditorText(newVal)} />

文件

child.tsx文件，其中定义了monaco编辑器功能

createMonaco() {
            debugger;

            this.editor = monaco.editor.create(this.$el, this.editorOptions);
            this.editor.onDidChangeModelContent(event =>
                this.$emit('codeChange', this.editor.getValue())
            );

            console.log(this.cardSchema);
            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                validate: true,
                schemas: this.cardSchema
            });

            this.monaco = monaco;

        }
    },
    render(h): VNode {
        return <div style={this.style} />;
    }

因此，即使我传递了在props模式中未定义的错误的json属性，上述条件也不会显示任何验证错误。

monaco.languages.json.jsonDefaults.setDiagnosticsOptions（{ 验证：是的， schemas：this.cardSchema }）;

VueJS：向Monaco Editor添加自定义模式验证

0 个答案: