typescript 如何在angular项目中配置monacoeditor自定义主题?

s4chpxco  于 2023-05-01  发布在  TypeScript
关注(0)|答案(1)|浏览(221)

感谢您的支持,基于monaco-editor提供的文档,我能够实现我的第一个里程碑i。e.使用defineTheme()在monaco-editor中添加超链接。这里是链接到我到现在为止
custome主题显示路径作为可点击的链接
然而,当我试图在我的Angular 项目中使用此代码,我无法看到链接上的样式.有人能帮忙把这段代码集成到angular中吗?
https://stackblitz.com/edit/ngx-monaco-editor-example-t5sbtn?file=app/app.module.ts

2hh7jdfx

2hh7jdfx1#

这是可能的,但很复杂。

首先设计需要创建自定义模板。您可以从Monaco编辑器Playground的示例Token和Colors中获得灵感。请记住,鼠标不会轻易有指针光标.
然后,你需要听你编辑器的点击

对于.html

<ngx-monaco-editor ... (onInit)="onInit($event)"></ngx-monaco-editor>

.ts

onInit(editor:any):void {
  editor.onMouseUp((event:any)=>{
      const {endColumn,endLineNumber,startColumn,startLineNumber} = event.target.range;
      const lines = editor.getModel().getLinesContent();

      // Check if the click is on the path (with a regex for example) 
      // and do what you want with that
  })
}

相关问题