{"id":21822027,"url":"https://github.com/0plus1/ng2-monaco-editor","last_synced_at":"2025-04-14T03:52:05.734Z","repository":{"id":43614459,"uuid":"71527298","full_name":"0plus1/ng2-monaco-editor","owner":"0plus1","description":"Angular 2 component for Monaco editor","archived":false,"fork":false,"pushed_at":"2017-09-16T02:45:57.000Z","size":9,"stargazers_count":24,"open_issues_count":8,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-23T02:16:18.194Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0plus1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T03:43:10.000Z","updated_at":"2018-09-17T18:03:20.000Z","dependencies_parsed_at":"2022-09-07T10:22:15.706Z","dependency_job_id":null,"html_url":"https://github.com/0plus1/ng2-monaco-editor","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0plus1%2Fng2-monaco-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0plus1%2Fng2-monaco-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0plus1%2Fng2-monaco-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0plus1%2Fng2-monaco-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0plus1","download_url":"https://codeload.github.com/0plus1/ng2-monaco-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819354,"owners_count":21166474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-27T17:12:27.653Z","updated_at":"2025-04-14T03:52:05.712Z","avatar_url":"https://github.com/0plus1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular2 - Monaco editor component\r\n\r\n[Monaco Editor](https://github.com/Microsoft/monaco-editor/) Angular2 component.\r\nBased on [chrisber](https://gist.github.com/chrisber) [gist](https://gist.github.com/chrisber/ef567098216319784c0596c5dac8e3aa). \r\n\r\nComponent is being used as part of an application and thus tailored to suit those requirements, feel free to contribute and make it better, or just use it as an inspiration for your next project.\r\n\r\nThere are no tests, no builds, just the component.\r\n\r\n### Know issues (please read)\r\nDue to the way AMD is being used by Monaco, there is currently no graceful way to integrate Monaco into webpack [Relevant discussion on github](https://github.com/Microsoft/monaco-editor/issues/18#issuecomment-231788869). \r\n\r\nFor this reason, ng2-monaco-editor expects Monaco src files to be publicly accessible. This can be achieved in many ways, chrisber's gist suggests a simple symlink:\r\n\r\n`mkdir -p src/assets/monaco \u0026\u0026 cd src/assets/monaco \u0026\u0026 ln -s ../../../node_modules/monaco-editor/min/vs .`\r\n\r\nAnother way would be to rely on a webpack plugin:\r\n\r\n```typescript\r\nplugins: [\r\n     new CopyWebpackPlugin([\r\n         {\r\n             from: 'node_modules/monaco-editor/min/vs',\r\n             to: './src/assets/monaco',\r\n         }\r\n     ]),\r\n ],\r\n ```\r\n \r\n Whatever method you are willing to use, this component expects Monaco src files to be situated in **/src/assets/monaco**\r\n\r\n\r\n### Installation\r\n\r\n- `npm install monaco-editor --save`\r\n- `npm install ng2-monaco-editor --save`\r\n- Copy Monaco src into src/assets/monaco, please refer to Known issues section for detailed information.\r\n- Import MonacoEditorComponent in your app.module.ts `import { MonacoEditorComponent } from 'ng2-monaco-editor';`\r\n- Add to your declarations    \r\n\r\n### Sample\r\n\r\n```typescript\r\nimport { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'code-editor-page',\r\n  templateUrl: './code-editor-page.component.html',\r\n  styleUrls: ['./code-editor-page.component.css']\r\n})\r\nexport class CodeEditorPageComponent implements OnInit {\r\n\r\n  code: string = 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\r\n  language: string = 'javascript';\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n```\r\n\r\n```html\r\n\u003cmonaco-editor [(ngModel)]=\"code\" [language]=\"language\" \u003e\u003c/monaco-editor\u003e\r\n```\r\n\r\n### Options\r\n\r\nThis component exposes monaco options as well as language defaults.\r\nLanguage defaults are loaded according to whatever language you initialised the component. If you set language to javascript, all of  the language defaults will be automatically applied to javascript.\r\n\r\n#### Custom Options\r\nThis component exposes custom options that require more substantial changes to the component. This is currently an experimental feature.\r\n\r\n* customPreventCarriageReturn: Prevents any \"Enter\" key press to be registered. Useful for setting up single line editors. \r\n\r\nFollows an example.\r\n \r\n ```typescript\r\n import { Component, OnInit } from '@angular/core';\r\n \r\n @Component({\r\n   selector: 'code-editor-page',\r\n   templateUrl: './code-editor-page.component.html',\r\n   styleUrls: ['./code-editor-page.component.css']\r\n })\r\n export class CodeEditorPageComponent implements OnInit {\r\n \r\n    code: string = 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\r\n    language: string = 'javascript';\r\n    // Set language defaults for custom autocomplete\r\n    language_defaults: any = {\r\n        compilerOptions: {\r\n            noLib: true,\r\n            allowNonTsExtensions: true\r\n        },\r\n        extraLibs: [\r\n            {\r\n                definitions: 'declare class Facts {\\n    /**\\n    * Returns the next fact\\n     */\\n    static next():string\\n }',\r\n                definitions_name: 'filename/facts.d.ts'\r\n            }\r\n        ]\r\n    };\r\n    // Set Monaco Editor Options\r\n    monaco_options: any = {\r\n        lineNumbers: false,\r\n        roundedSelection: false,\r\n        scrollBeyondLastLine: false,\r\n        wrappingColumn: -1,\r\n        folding: false,\r\n        renderLineHighlight: false,\r\n        overviewRulerLanes: 0,\r\n        // theme: \"vs-dark\",\r\n        customPreventCarriageReturn: true,\r\n        scrollbar: {\r\n        vertical: 'hidden',\r\n        horizontal: 'auto',\r\n        useShadows: false\r\n    }\r\n    \r\n   constructor() {}\r\n \r\n   ngOnInit() {}\r\n \r\n }\r\n ```\r\n \r\n ```html\r\n \u003cmonaco-editor [(ngModel)]=\"code\" [language]=\"language\" [language_defaults]=\"language_defaults\" [options]=\"monaco_options\"\u003e\u003c/monaco-editor\u003e\r\n ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0plus1%2Fng2-monaco-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0plus1%2Fng2-monaco-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0plus1%2Fng2-monaco-editor/lists"}