美文网首页
monaco-editor 常用方法与事件

monaco-editor 常用方法与事件

作者: 李彩红_4da9 | 来源:发表于2018-12-05 13:10 被阅读0次

    一、自定义语言和主题:

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

    (若需要自定义注释和关键字等高亮显示颜色,参考: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);

                              }

                   }

              }

         });

    }

    相关文章

      网友评论

          本文标题:monaco-editor 常用方法与事件

          本文链接:https://www.haomeiwen.com/subject/ofjicqtx.html