{"_id":"@cnblogs/ngx-monaco-editor","_rev":"2-18990eec9dcdeaed03fcf197d291f3b0","name":"@cnblogs/ngx-monaco-editor","dist-tags":{"latest":"15.0.0"},"versions":{"15.0.0-beta1":{"name":"@cnblogs/ngx-monaco-editor","version":"15.0.0-beta1","keywords":["angular","angular 2+","angular 2","angular 4","angular 5","angular 6","angular 7","angular 8","angular 9","angular 10","angular 12","angular 13","monaco","monaco-editor","code","editor","reusable","component"],"author":{"name":"Atul Kumar"},"license":"MIT","_id":"@cnblogs/ngx-monaco-editor@15.0.0-beta1","maintainers":[{"name":"laggage","email":"laggage-la@outlook.com"},{"name":"hzdudu","email":"dudu@cnblogs.com"},{"name":"ikesnowy","email":"ikesnowy@outlook.com"}],"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"},{"name":"cnblogs-team","email":"contact@cnblogs.com"}],"homepage":"https://github.com/atularen/ngx-monaco-editor#readme","bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"dist":{"shasum":"6b9a9bdc00ebc733d1d92f7cec1b479a787dfdb1","tarball":"https://registry.npmjs.org/@cnblogs/ngx-monaco-editor/-/ngx-monaco-editor-15.0.0-beta1.tgz","fileCount":22,"integrity":"sha512-jPdpSkkKQE+kajYgyu1uSzKxUcc7dUgwA65FMoCPBCnNv6e/PkQ/VF/IeIkTsOx5r+i2BLt8qwY/5kZrwiX0KQ==","signatures":[{"sig":"MEYCIQCZJXFCS9whUDskAsEcb78YfIxkjrP0dfq9TaqwFtZBjwIhAJ6jNGVQgGBuqXYisn5MIHp4O8rg6yhUiHPFEiTfsoae","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNoZrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Xw/8Dxt8rHW54BYTxQK6hoIVgP06DdqyxnZhq+okLuuQvF27vkJM\r\nAlGCH7iIjai+86jQA/O3G0x5h2ezSqDY5RSZ00T7mUEnQegEVR5Makl3jcq0\r\n/z7EGOiZmnIOXGFcgc3+ukMxe9ixqV/ETiQJxuvW+VCf5EGtXclrKUkltD0V\r\n+QYu5zI0xJvRBDukDhvvYqUhQ6XpF1JdacYh5yLvTBdKlnPUKaobg7i7TSNS\r\nAi7ExZaL4+EADEblHtAZkx+fdd9mfYDpIOQm5QmEFDAN7G6gnLuYCnWCCkcK\r\nEFcv60ujd/QI/7uQW/Kgoz7+zq5Ae34aHWBdYjOPHa9klz6ZTz7f1aeBgTKw\r\ntcUuKNgLOnKm0b3C13eJ5O08TCB0Disx882kYC+xx1N0k/uTAPdSwxGM8D8i\r\n2yrFwG1Dyteb6ymE4FPBLyfJ/DhA2jNPv2Tw3LhBnuXxYCPOFEWNSTm2W2Vv\r\nYHUTlwveGUUoPKCVnNjS5GsFZTorm0QZQHZ252wqWsAzcZuOAWXsuQUAHlA0\r\nKnMhxEaXW4dawaw8E347DoDJ1peao1cPn/W29IIGEsa4wT9osgWODAkJ8zXT\r\n76PG6J+k/a81invau/gWqUK7VyaJ144NtLgGFir/4PuWu0852NENgN3EGFGt\r\njiMVBvlC2/7LXZJa5ogn+vhA6zhDlhsA1R0=\r\n=tELe\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/cnblogs-ngx-monaco-editor.mjs","module":"fesm2015/cnblogs-ngx-monaco-editor.mjs","esm2020":"esm2020/cnblogs-ngx-monaco-editor.mjs","exports":{".":{"node":"./fesm2015/cnblogs-ngx-monaco-editor.mjs","types":"./index.d.ts","es2015":"./fesm2015/cnblogs-ngx-monaco-editor.mjs","es2020":"./fesm2020/cnblogs-ngx-monaco-editor.mjs","default":"./fesm2020/cnblogs-ngx-monaco-editor.mjs","esm2020":"./esm2020/cnblogs-ngx-monaco-editor.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"8c829e383172e32191480c565c4a1f19248b7d99","private":false,"typings":"index.d.ts","_npmUser":{"name":"laggage","email":"laggage-la@outlook.com"},"fesm2015":"fesm2015/cnblogs-ngx-monaco-editor.mjs","fesm2020":"fesm2020/cnblogs-ngx-monaco-editor.mjs","repository":{"url":"git+https://github.com/atularen/ngx-monaco-editor.git","type":"git"},"_npmVersion":"8.1.2","description":"Monaco Code Editor for Angular","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"tslib":"^2.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^15.0.0","monaco-editor":">=0.24.0","@angular/common":"^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-monaco-editor_15.0.0-beta1_1681294955502_0.6017783907660879","host":"s3://npm-registry-packages"}},"15.0.0":{"name":"@cnblogs/ngx-monaco-editor","version":"15.0.0","keywords":["angular","angular 2+","angular 2","angular 4","angular 5","angular 6","angular 7","angular 8","angular 9","angular 10","angular 12","angular 13","monaco","monaco-editor","code","editor","reusable","component"],"author":{"name":"Atul Kumar"},"license":"MIT","_id":"@cnblogs/ngx-monaco-editor@15.0.0","maintainers":[{"name":"laggage","email":"laggage-la@outlook.com"},{"name":"hzdudu","email":"dudu@cnblogs.com"},{"name":"ikesnowy","email":"ikesnowy@outlook.com"}],"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"},{"name":"cnblogs-team","email":"contact@cnblogs.com"}],"homepage":"https://github.com/atularen/ngx-monaco-editor#readme","bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"dist":{"shasum":"60ae968ce17998e99901f29d049a1434ce1b6ecc","tarball":"https://registry.npmjs.org/@cnblogs/ngx-monaco-editor/-/ngx-monaco-editor-15.0.0.tgz","fileCount":22,"integrity":"sha512-FhpATdSwjmbreX+vqba1ei+s2vtJN78pQ4gjt2f21k5VTTkxPEKu91RILEV0DX1Wa5NS9/bzj5wLWm6TV2Ljjw==","signatures":[{"sig":"MEUCIQCUpwpjNQnS/RoxHPmt3dMOar+GHXtFdDUN3gO2a8EnwgIgF9mSRR6P8TGbRjd5qty5VOWij448eCbzofa1/0yOxMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNohqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtSg/9H+hopqiISnV9XdCvx3VeuBM0u+0pDkwYZGarBSPh8Je6Yz5U\r\nteCsLy8TSMAEWBBIqdIQ81R8OAMQss9Bsd3tXqrh3zJUqfXUJ7zZwgu25DKi\r\na/c5kj6fcX6q/QAw/w6XZRV08V0C9B87yl+y5e0xKLAWgXwa7wdxrKl4c6Uw\r\nw0U6tptEh2WmVet7PmhL0/az3MSi4bH47vKllD0Ma0bgH5qGjzAIMHfGORzS\r\neumcn2lGet+ywI7kFZELIYxWn+BIfTSYXcJHmL7W7RkIZAuSKVUBR/yIhZ92\r\njvu3UrEhVcIJoF6ZJSG1VRkWQpY0U7ur8wKdAoZoABqZYivSnjBA/Dn9VJ1W\r\njh+Pv3+GifvE3Cb4w70erP7t0efxGp2hFHiZned62QWrq4tQJZPzs5BFnppB\r\nvKTZZCc4dbrqfR0BqFR1ZPPwUVuU1GA8QJUlDdzLsk5L3qPDmezluOzTls05\r\nWH6eg9F5MunLv4x53mJrpHHpgaBWiSZQd7CTBq2TObual/2A8o8Co9ielXiq\r\nFp8pnZ3tuOBmukEsYqI+kXAemJ+DaxkUs+JIQbJNT23X5I8XgLu2kDmhFlQ6\r\nB1WbtFpWxLw67F6AKLDKlH/71tHKm1MQVg7zdZQOCVdoFaNDfldgVy3Cosp/\r\ns1Q/8LZfCaD65pp/V5WQzY3ZSZtbWrlJDKw=\r\n=fsBs\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/cnblogs-ngx-monaco-editor.mjs","module":"fesm2015/cnblogs-ngx-monaco-editor.mjs","esm2020":"esm2020/cnblogs-ngx-monaco-editor.mjs","exports":{".":{"node":"./fesm2015/cnblogs-ngx-monaco-editor.mjs","types":"./index.d.ts","es2015":"./fesm2015/cnblogs-ngx-monaco-editor.mjs","es2020":"./fesm2020/cnblogs-ngx-monaco-editor.mjs","default":"./fesm2020/cnblogs-ngx-monaco-editor.mjs","esm2020":"./esm2020/cnblogs-ngx-monaco-editor.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"1f47ea3548a2ce7880fa6f364907f32629d0353b","private":false,"typings":"index.d.ts","_npmUser":{"name":"laggage","email":"laggage-la@outlook.com"},"fesm2015":"fesm2015/cnblogs-ngx-monaco-editor.mjs","fesm2020":"fesm2020/cnblogs-ngx-monaco-editor.mjs","repository":{"url":"git+https://github.com/atularen/ngx-monaco-editor.git","type":"git"},"_npmVersion":"8.1.2","description":"Monaco Code Editor for Angular","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"tslib":"^2.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^15.0.0","monaco-editor":">=0.24.0","@angular/common":"^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-monaco-editor_15.0.0_1681295466354_0.9514860031847854","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-04-12T10:22:35.442Z","modified":"2024-12-16T01:19:49.461Z","15.0.0-beta1":"2023-04-12T10:22:35.715Z","15.0.0":"2023-04-12T10:31:06.538Z"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"author":{"name":"Atul Kumar"},"license":"MIT","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","keywords":["angular","angular 2+","angular 2","angular 4","angular 5","angular 6","angular 7","angular 8","angular 9","angular 10","angular 12","angular 13","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"url":"git+https://github.com/atularen/ngx-monaco-editor.git","type":"git"},"description":"Monaco Code Editor for Angular","contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"},{"name":"cnblogs-team","email":"contact@cnblogs.com"}],"maintainers":[{"email":"dudu@cnblogs.com","name":"hzdudu"},{"email":"ikesnowy@outlook.com","name":"ikesnowy"}],"readme":"# Monaco Editor Component for Angular 2 and above.\n\n - Angular <= 4: v3.x.x\n - Angular 5: v5.x.x\n - Angular 6: v6.x.x\n - Angular 7: v7.x.x\n - Angular 8: v8.x.x\n - Angular 9: v9.x.x\n - Angular 10: v10.x.x \n - Angular 12: v12.x.x\n\nUsing this Module you can utilize the Monaco Editor as an Angular Component. Feel free to contribute, raise feature requests and make it better.\n\nSupports all the options available in monaco-editor [Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\n\n## Setup\n\n### Installation\n\nInstall from npm repository:\n```\nnpm install monaco-editor ngx-monaco-editor --save\n ```\n \nFor angular version 6 use v6.x.x\n```\nnpm install ngx-monaco-editor@6.0.0 --save\n ```\n \nAdd the glob to assets in `.angular-cli.json` schema - `projects.[project-name].architect.build` (to make monaco-editor lib available to the app):\n```typescript\n{\n  \"options\": {\n    {\n      \"assets\": [\n        { \"glob\": \"**/*\", \"input\": \"node_modules/monaco-editor\", \"output\": \"assets/monaco-editor\" }\n      ],\n      ...\n    }\n    ...\n  },\n  ...\n}\n ```\n\n\nFor Angular 6 and below, add the glob to assets in `angular.json`\n```typescript\n{\n  \"apps\": [\n    {\n      \"assets\": [\n        { \"glob\": \"**/*\", \"input\": \"../node_modules/ngx-monaco-editor/assets/monaco\", \"output\": \"./assets/monaco/\" }\n      ],\n      ...\n    }\n    ...\n  ],\n  ...\n}\n ```\n\n### Sample\nInclude MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts): \n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { MonacoEditorModule } from 'ngx-monaco-editor';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot() // use forRoot() in main app module only.\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nCreate Editor options in component.(eg: app.component.ts)\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n}\n```\nInclude editor in html with options and ngModel bindings.(eg: app.component.html)\n```html\n<ngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\n```\n\nInclude diff-editor in html with options.(eg: app.component.html)\n```html\n<ngx-monaco-diff-editor [options]=\"options\" [originalModel]=\"originalModel\" [modifiedModel]=\"modifiedModel\"></ngx-monaco-diff-editor>\n```\n```typescript\nimport { Component } from '@angular/core';\nimport { DiffEditorModel } from 'ngx-monaco-editor';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  options = {\n    theme: 'vs-dark'\n  };\n  originalModel: DiffEditorModel = {\n    code: 'heLLo world!',\n    language: 'text/plain'\n  };\n\n  modifiedModel: DiffEditorModel = {\n    code: 'hello orlando!',\n    language: 'text/plain'\n  };\n}\n```\n\n### Styling\nTo match height of container element add height: 100% and wrap in container\n```html\n<div style=\"height: 500px\">\n    <ngx-monaco-editor style=\"height: 100%\" [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\n</div>\n```\nAdd class to editor tag. (eg. class=\"my-code-editor\")\n```html\n<ngx-monaco-editor class=\"my-code-editor\" [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\n```\nAdd styling in css/scss file:\n```scss\n.my-code-editor {\n  .editor-container {\n    height: calc(100vh - 100px);\n  }\n}\n```\nSet automaticLayout option to adjust editor size dynamically. Recommended when using in modal dialog or tabs where editor is not visible initially.\n\n### Events\nOutput event (onInit) expose editor instance that can be used for performing custom operations on the editor. \n```html\n<ngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor>\n```\n\n```typescript\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n  onInit(editor) {\n      let line = editor.getPosition();\n      console.log(line);\n    }\n}\n```\n\n## Configurations\n`forRoot()` method of MonacoEditorModule accepts config of type `NgxMonacoEditorConfig`.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\nimport { AppComponent } from './app.component';\n\nconst monacoConfig: NgxMonacoEditorConfig = {\n  baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'\n  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used\n  onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot(monacoConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### Configure JSON Defaults\n`onMonacoLoad` property of `NgxMonacoEditorConfig` can be used to configure JSON default.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\nimport { AppComponent } from './app.component';\n\nexport function onMonacoLoad() {\n\n  console.log((window as any).monaco);\n\n  const uri = monaco.Uri.parse('a://b/foo.json');\n  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n    validate: true,\n    schemas: [{\n      uri: 'http://myserver/foo-schema.json',\n      fileMatch: [uri.toString()],\n      schema: {\n        type: 'object',\n        properties: {\n          p1: {\n            enum: ['v1', 'v2']\n          },\n          p2: {\n            $ref: 'http://myserver/bar-schema.json'\n          }\n        }\n      }\n    }, {\n      uri: 'http://myserver/bar-schema.json',\n      fileMatch: [uri.toString()],\n      schema: {\n        type: 'object',\n        properties: {\n          q1: {\n            enum: ['x1', 'x2']\n          }\n        }\n      }\n    }]\n  });\n\n}\n\nconst monacoConfig: NgxMonacoEditorConfig = {\n  baseUrl: 'assets',\n  defaultOptions: { scrollBeyondLastLine: false },\n  onMonacoLoad\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot(monacoConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nNow pass model config of type `NgxEditorModel` to Editor Component\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `<ngx-monaco-editor [options]=\"options\" [model]=\"model\"></ngx-monaco-editor>`,\n  styles: []\n})\nexport class AppComponent {\n  options = {\n    theme: 'vs-dark'\n  };\n  \n  jsonCode = [\n    '{',\n    '    \"p1\": \"v3\",',\n    '    \"p2\": false',\n    '}'\n  ].join('\\n');\n\n  model: NgxEditorModel = {\n    value: this.jsonCode,\n    language: 'json',\n    uri: monaco.Uri.parse('a://b/foo.json')\n  };\n}\n```\n\n## Links\n[Monaco Editor](https://github.com/Microsoft/monaco-editor/)<br/>\n[Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\n\n## License\n\nMIT © [Atul Kumar](https://github.com/atularen)\n","readmeFilename":"README.md"}