Monaco Editor

Markdown编辑器。

如何使用

安装依赖

yarn add @ng-util/monaco-editor

  • 1、在 app.config.ts 下注册 provideNuMonacoEditorConfig()

  • 2、在 json-schema 注册 withMonacoEditorWidget

关于更多 Monaco Editor 配置请参考 @ng-util/monaco-editor

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component, inject } from '@angular/core';

import { DelonFormModule, SFSchema } from '@delon/form';
import type { MonacoEditorWidgetSchema } from '@delon/form/widgets-third/monaco-editor';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-monaco-editor-simple',
  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`,
  standalone: true,
  imports: [DelonFormModule]
})
export class FormMonacoEditorSimpleComponent {
  private readonly msg = inject(NzMessageService);
  schema: SFSchema = {
    properties: {
      json: {
        type: 'string',
        title: 'JSON',
        default: `{"string": "abc","number": 1 }`,
        ui: {
          widget: 'monaco-editor',
          options: { language: 'json' }
        } as MonacoEditorWidgetSchema
      }
    }
  };

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

ui属性

成员说明类型默认值
[options]配置项说明,见官网monaco.editor.IStandaloneEditorConstructionOptions-
[delay]延迟加载时间number-
[change]编辑器内容发生改变时会触发该事件(value: string) => void-
[height]Height of monaco editorstring200px
[model]Model of monaco editorNuMonacoEditorModel-
(event)Event callbackEventEmitter<NuMonacoEditorEvent>-
Loading...