monaco-editor 常用方法与事件

一、自定义语言和主题:

(参考例子:https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)

(若需要自定义注释和关键字等高亮显示颜色,参考:https://microsoft.github.io/monaco-editor/monarch.html)

@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);

                          }

               }

          }

     });

}

你可能感兴趣的:(monaco-editor 常用方法与事件)