monaco-editor 行号、内容装饰器

monaco-editor装饰器演示

monaco-editor演示网址

演示代码

将演示代码贴入演示地址对应的编辑框中

const editor = monaco.editor.create(document.getElementById('container'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript'
});

// 设置错误装饰
const errors = editor.createDecorationsCollection([{
    options:{
        className:'red'
    },
    // 装饰位置
    range:{
        startLineNumber:1,
        startColumn:1,
        endColumn:4,
        endLineNumber:1
    }
},])
//  设置行号装饰
const number = editor.createDecorationsCollection([
    {
    range:{
        // 装饰的行
        startLineNumber:1,
        startColumn:1,
        endColumn:1,
        endLineNumber:1
    },
    options:{
        // 行号装饰的class
        marginClassName:'green'
    }
 }
 ])

setTimeout(()=>{
errors.clear()
number.clear()
},3000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

.red{
    background-color: red;
}
.green{
    background-color: rgba(171,255,46,.85);
    color: #fff;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}
1
2
3
4
5
6
7
8
9

可以看到明显的装饰器效果

行号装饰器：
设置options下的marginClassName为对应的class选择器。
内容装饰器：
设置options下的className为对应的class选择器。

range是编辑器的范围对象，表示你装饰器在编辑器中生效的范围。

推荐大家一款用该插件做的数据访问、数据脱敏、权限管控、操作审计为一体的数据库安全访问审计工具SQLDEV，可以直接访问下载社区版体验。