UsingthisModuleyoucanutilizetheMonacoEditorasanAngularComponent.Feelfreetocontribute,raisefeaturerequestsandmakeitbetter.
Supportsalltheoptionsavailableinmonaco-editorMonacoEditorOptions
SetupInstallationInstallfromnpmrepository:
npminstallmonaco-editorngx-monaco-editor--saveForangularversion6usev6.x.x
npminstallngx-monaco-editor@6.0.0--saveAddtheglobtoassetsin.angular-cli.jsonschema-projects.[project-name].architect.build(tomakemonaco-editorlibavailabletotheapp):
{"options":{{"assets":[{"glob":"**/*","input":"node_modules/monaco-editor","output":"assets/monaco-editor"}],...}...},...}ForAngular6andbelow,addtheglobtoassetsinangular.json
{"apps":[{"assets":[{"glob":"**/*","input":"../node_modules/ngx-monaco-editor/assets/monaco","output":"./assets/monaco/"}],...}...],...}SampleIncludeMonacoEditorModuleinMainModuleandFeatureModuleswhereyouwanttousetheeditorcomponent.(eg:app.module.ts):
import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{FormsModule}from'@angular/forms';import{AppComponent}from'./app.component';import{MonacoEditorModule}from'ngx-monaco-editor';@NgModule({declarations:[AppComponent],imports:[BrowserModule,FormsModule,MonacoEditorModule.forRoot()//useforRoot()inmainappmoduleonly.],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}CreateEditoroptionsincomponent.(eg:app.component.ts)
import{Component}from'@angular/core';@Component({selector:'app-root',templateUrl:'./app.component.html'})exportclassAppComponent{editorOptions={theme:'vs-dark',language:'javascript'};code:string='functionx(){\nconsole.log("Helloworld!");\n}';}IncludeeditorinhtmlwithoptionsandngModelbindings.(eg:app.component.html)
<ngx-monaco-editor[options]="editorOptions"[(ngModel)]="code"></ngx-monaco-editor>Includediff-editorinhtmlwithoptions.(eg:app.component.html)
<ngx-monaco-diff-editor[options]="options"[originalModel]="originalModel"[modifiedModel]="modifiedModel"></ngx-monaco-diff-editor>import{Component}from'@angular/core';import{DiffEditorModel}from'ngx-monaco-editor';@Component({selector:'app-root',templateUrl:'./app.component.html'})exportclassAppComponent{options={theme:'vs-dark'};originalModel:DiffEditorModel={code:'heLLoworld!',language:'text/plain'};modifiedModel:DiffEditorModel={code:'helloorlando!',language:'text/plain'};}StylingTomatchheightofcontainerelementaddheight:100%andwrapincontainer
<divstyle="height:500px"><ngx-monaco-editorstyle="height:100%"[options]="editorOptions"[(ngModel)]="code"></ngx-monaco-editor></div>Addclasstoeditortag.(eg.class="my-code-editor")
<ngx-monaco-editorclass="my-code-editor"[options]="editorOptions"[(ngModel)]="code"></ngx-monaco-editor>Addstylingincss/scssfile:
.my-code-editor{.editor-container{height:calc(100vh-100px);}}SetautomaticLayoutoptiontoadjusteditorsizedynamically.Recommendedwhenusinginmodaldialogortabswhereeditorisnotvisibleinitially.
EventsOutputevent(onInit)exposeeditorinstancethatcanbeusedforperformingcustomoperationsontheeditor.
<ngx-monaco-editor[options]="editorOptions"[(ngModel)]="code"(onInit)="onInit($event)"></ngx-monaco-editor>exportclassAppComponent{editorOptions={theme:'vs-dark',language:'javascript'};code:string='functionx(){\nconsole.log("Helloworld!");\n}';onInit(editor){letline=editor.getPosition();console.log(line);}}ConfigurationsforRoot()methodofMonacoEditorModuleacceptsconfigoftypeNgxMonacoEditorConfig.
import{NgModule}from'@angular/core';import{FormsModule}from'@angular/forms';import{BrowserModule}from'@angular/platform-browser';import{MonacoEditorModule,NgxMonacoEditorConfig}from'ngx-monaco-editor';import{AppComponent}from'./app.component';constmonacoConfig:NgxMonacoEditorConfig={baseUrl:'app-name/assets',//configurebasepathcotainingmonaco-editordirectoryafterbuilddefault:'./assets'defaultOptions:{scrollBeyondLastLine:false},//passdefaultoptionstobeusedonMonacoLoad:()=>{console.log((<any>window).monaco);}//heremonacoobjectwillbeavailableaswindow.monacousethisfunctiontoextendmonacoeditorfunctionalities.};@NgModule({declarations:[AppComponent],imports:[BrowserModule,FormsModule,MonacoEditorModule.forRoot(monacoConfig)],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}ConfigureJSONDefaultsonMonacoLoadpropertyofNgxMonacoEditorConfigcanbeusedtoconfigureJSONdefault.
import{NgModule}from'@angular/core';import{FormsModule}from'@angular/forms';import{BrowserModule}from'@angular/platform-browser';import{MonacoEditorModule,NgxMonacoEditorConfig}from'ngx-monaco-editor';import{AppComponent}from'./app.component';exportfunctiononMonacoLoad(){console.log((windowasany).monaco);consturi=monaco.Uri.parse('a://b/foo.json');monaco.languages.json.jsonDefaults.setDiagnosticsOptions({validate:true,schemas:[{uri:'https://myserver/foo-schema.json',fileMatch:[uri.toString()],schema:{type:'object',properties:{p1:{enum:['v1','v2']},p2:{$ref:'https://myserver/bar-schema.json'}}}},{uri:'https://myserver/bar-schema.json',fileMatch:[uri.toString()],schema:{type:'object',properties:{q1:{enum:['x1','x2']}}}}]});}constmonacoConfig:NgxMonacoEditorConfig={baseUrl:'assets',defaultOptions:{scrollBeyondLastLine:false},onMonacoLoad};@NgModule({declarations:[AppComponent],imports:[BrowserModule,FormsModule,MonacoEditorModule.forRoot(monacoConfig)],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}NowpassmodelconfigoftypeNgxEditorModeltoEditorComponent
@Component({selector:'app-root',template:`<ngx-monaco-editor[options]="options"[model]="model"></ngx-monaco-editor>`,styles:[]})exportclassAppComponent{options={theme:'vs-dark'};jsonCode=['{','"p1":"v3",','"p2":false','}'].join('\n');model:NgxEditorModel={value:this.jsonCode,language:'json',uri:monaco.Uri.parse('a://b/foo.json')};}LinksMonacoEditorMonacoEditorOptions
LicenseMIT©AtulKumar
评论