monaco-editor 常用方法与事件
一、自定义语言和主题：
(若需要自定义注释和关键字等高亮显示颜色，参考：https://microsoft.github.io/monaco-editor/monarch.html）
<div id='div-editor' #editor class="monaco-editor"></div>
@ViewChild('editor') editorContent: ElementRef; // 编辑器Element
private editor: any; // 创建的编辑器
ngAfterViewInit() {
amdRequire.config({'vs/nls': {availableLanguages: {'*':'zh-cn'}}}); // 设置中文菜单等
amdRequire(['vs/editor/editor.main'], () => {
monaco.languages.register({id:'mySpecialLanguage'});
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
tokenizer: {
root: [
[/\(.*调试.*/, '调试'],
//其中逗号左侧为正则表达式 http://www.runoob.com/regexp/regexp-metachar.html，右侧为标识该匹配方式的名称
[/\(.*通知.*/, '通知'],
[/\(.*警告.*/, '警告'],
[/\(.*错误.*/, '错误'],
[/\(.*崩溃.*/, '崩溃'],
[/\(.*信息.*/, '信息'],
] }
});
monaco.editor.defineTheme('light', {
base:'vs', // 定义浅色主题
inherit:false,
rules: [
{token:'调试', foreground:'666666'}, // 左侧对应上面定义的名称，右侧自定义颜色或者样式
{token:'通知', foreground:'00b4ff'},
{token:'警告', foreground:'ffb400'},
{token:'错误', foreground:'ff0000'},
{token:'崩溃', foreground:'c30209'},
{token:'信息', foreground:'222222'},
],
colors: {
'editor.background':'#f4f4f4',
'editorLineNumber.foreground':'#222222',
'editor.lineHighlightBackground':'#f4f4f4',
}
});
monaco.editor.defineTheme('dark', {
base:'vs-dark', // 定义黑色主题
inherit:false,
rules: [
{token:'调试', foreground:'959595'},
{token:'通知', foreground:'00b4ff'},
{token:'警告', foreground:'fff000'},
{token:'错误', foreground:'ff0000'},
{token:'崩溃', foreground:'c30209'},
{token:'信息', foreground:'ffffff'},
],
colors: {
'editor.background':'#3b3b3b',
'editorLineNumber.foreground':'#ffffff',
'editor.lineHighlightBackground':'#3b3b3b',
}
});
// monaco.editor.setTheme(this.windowService.theme);
this.editor = monaco.editor.create(this.editorContent.nativeElement, {
language:'mySpecialLanguage',
theme:this.windowService.theme,
// mouseWheelZoom: true,
automaticLayout:true,
scrollBeyondLastLine:false,
// lineNumbersMinChars: 5,
lineHeight:24,
hideCursorInOverviewRuler:true,
scrollbar: {
useShadows:false,
vertical:'visible',
horizontal:'visible',
horizontalSliderSize:5,
verticalSliderSize:5,
horizontalScrollbarSize:15,
verticalScrollbarSize:15,
},
quickSuggestions:false,
overviewRulerBorder:false,
fontFamily:'Microsoft YaHei',
minimap: {
enabled:false
},
// readOnly: false
});
this.windowService.themeChange.subscribe(() => {
monaco.editor.setTheme(this.windowService.theme);
});
localStorage.setItem('settings', JSON.stringify(this.settings));
});
}
/**
* monaco添加当行内容方法 * @param text 内容
*/
private addContent(text: string): void {
if (!this.editor) { return; }
this.editor.updateOptions({ scrollbar: { horizontalHasArrows: false, horizontal: 'hidden', }, }); // 新增一条时横向滚动条设为不可见，否则可能占用编辑器位置，使得在横向滚动条位置新增内容出现undefined
const count = this.editor.getModel().getLineCount() || 0;
const range = new monaco.Range(count, 1, count, 1);
if (count > this.maxLen) {
this.editor.executeEdits('log-source', [{ identifier: 'event_id', range: new monaco.Range(1, 1, 2, 1), text: null, forceMoveMarkers: true }]); // 指定范围设定 text: null 可以等价于删除某行。
// this.editor.setValue(this.editor.getModel().getValueInRange(new monaco.Range(count - this.maxLen + 1, 1, count, 1))); }
this.editor.executeEdits('log-source', [{ identifier: 'event_id', range: range, text: text, forceMoveMarkers: true }]);
if (this.settings.isWrap) { this.isOpenWrap(); }
}
/*** monaco自动换行*/ isOpenWrap() {
if (this.settings.isWrap) {
this.editor.updateOptions({
wordWrap:'on',
// wordWrap: 'wordWrapColumn',
// wordWrapColumn: 80,
wrappingIndent:'indent',
scrollbar: {
horizontalHasArrows:false,
horizontal:'hidden',
},
// mouseWheelZoom: true,
});
} else {
this.editor.updateOptions({
wordWrap:'off',
});
}
}
private afterShowLog() {
this.divHeight =this.editorContent.nativeElement.clientHeight; // 获取编辑器可视区高度
if (!this.editor) {return; }
// 滚动到最后一行
if (this.settings.isBottom) {
const count =this.editor.getModel().getLineCount() ||0;
this.editor.revealLine(count);
}
// 屏蔽自动滚动后，监测滚动条是否发生变化，如果拖动到底部，则打开自动滚动.
if (!this.settings.isBottom) {
this.editor.onDidScrollChange((e) => {
if (e.scrollTop >0) {
if (this.divHeight + e.scrollTop === e.scrollHeight) {
this.settings.isBottom =true;
const count =this.editor.getModel().getLineCount() ||0;
this.editor.revealLine(count);
this.isLast =true;
this.isClickScroll =false;
} else {
this.isLast =false;
}
}
});
}
//
if (!this.isLast) {
this.editor.onMouseDown((e) => {
this.isLast =false;
if (this.settings.isBottom) {
if (e.target.type.toString() ==='11' && e.target.element.scrollHeight ===12) {
this.settings.isBottom =true; // 点击横向滚动条时不改变自动滚动状态
}else {
this.settings.isBottom =false;
if (e.target.type.toString() ==='11' && e.target.element.scrollHeight >12) {
this.isClickScroll =true;
// console.log('点击垂直滚动条');
}else {
this.isClickScroll =false;
// console.log('点击编辑区文字');
}
}
}
});
}
// 点击或拖动垂直滚动条 屏蔽自动滚动后三秒恢复自动滚动；点击文本区域，直接屏蔽自动滚动
this.editor.onMouseUp(() => {
if (!this.isLast) {
if (!this.settings.isBottom) {
if (this.isClickScroll) {
setTimeout(() => {
// console.log('3秒打开自动滚动');
this.settings.isBottom =true;
const count =this.editor.getModel().getLineCount() ||0;
this.editor.revealLine(count);
}, 3000);
}
}
}
});
}
