You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
975 B
51 lines
975 B
# CodeMirror 6 editor for Angular
|
|
|
|
## Installation
|
|
|
|
Use the CodeFirst NPM registry for `@sandkasten` packages in your `~/.npmrc` file:
|
|
|
|
```env
|
|
@sandkasten:registry=https://codefirst.iut.uca.fr/git/api/packages/sandkasten/npm/
|
|
```
|
|
|
|
```bash
|
|
npm install @sandkasten/codemirror6-editor codemirror @codemirror/state @codemirror/view
|
|
```
|
|
|
|
Install the language support you need, for example with JavaScript:
|
|
|
|
```bash
|
|
npm install @codemirror/lang-javascript
|
|
```
|
|
|
|
Import the component in either the `app.module.ts` file or the component:
|
|
|
|
```typescript
|
|
import { CodeMirrorComponent } from 'codemirror6';
|
|
```
|
|
|
|
## Examples
|
|
|
|
A code editor with JavaScript syntax highlighting:
|
|
|
|
```html
|
|
<codemirror6-editor
|
|
[(ngModel)]="editorContent"
|
|
[extensions]="[
|
|
basicSetup,
|
|
javascript()
|
|
]"
|
|
></codemirror6-editor>
|
|
```
|
|
|
|
A read-only code output:
|
|
|
|
```html
|
|
<codemirror6-editor
|
|
[(ngModel)]="editorContent"
|
|
[extensions]="[
|
|
EditorState.readOnly.of(true)
|
|
]"
|
|
></codemirror6-editor>
|
|
```
|