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)
.red{
background-color: red;
}
.green{
background-color: rgba(171,255,46,.85);
color: #fff;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
可以看到明显的装饰器效果
行号装饰器：
设置options下的marginClassName为对应的class选择器。
内容装饰器：
设置options下的className为对应的class选择器。
range是编辑器的范围对象，表示你装饰器在编辑器中生效的范围。
推荐大家一款用该插件做的数据访问、数据脱敏、权限管控、操作审计为一体的数据库安全访问审计工具SQLDEV，可以直接访问下载社区版体验。
1288
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
