scttcper / Ngx Codemirror
Licence: mit
Codemirror Wrapper for Angular
Stars: β 192
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Ngx Codemirror
Code Mirror Themes
π A large collection of Code Mirror themes for your coding pleasure
Stars: β 87 (-54.69%)
Mutual labels: codemirror
React Codemirror
CodeMirror component for React. @codemirror https://uiwjs.github.io/react-codemirror/
Stars: β 142 (-26.04%)
Mutual labels: codemirror
Hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Stars: β 1,258 (+555.21%)
Mutual labels: codemirror
Qlens
QLens is an electron app which dynamically generates GraphQL Schemas and Mongo Schema visualization. QLens significantly cuts development time by automating the formation of their GraphQL schemas based on information fetched from their non-relational database.
Stars: β 110 (-42.71%)
Mutual labels: codemirror
Noty
Autosaving sticky note with support for multiple notes without needing multiple windows.
Stars: β 321 (+67.19%)
Mutual labels: codemirror
Kodeweave
HTML/CSS/JS and Markdown Playground For Web Designers and Developers
Stars: β 87 (-54.69%)
Mutual labels: codemirror
Editor.md
The open source embeddable online markdown editor (component).
Stars: β 11,741 (+6015.1%)
Mutual labels: codemirror
Codemirror Swiftui
CodeMirror-SwiftUI is a lightweight wrapper of CodeMirror for macOS and iOS packaged for SwiftUI.
Stars: β 30 (-84.37%)
Mutual labels: codemirror
React Codemirror2
Codemirror integrated components for React
Stars: β 1,240 (+545.83%)
Mutual labels: codemirror
Flok
Web-based P2P collaborative editor for live coding sounds and images
Stars: β 119 (-38.02%)
Mutual labels: codemirror
Md2pdf
Offline markdown to pdf, choose -> edit -> transform π₯
Stars: β 632 (+229.17%)
Mutual labels: codemirror
Codemirror Graphql
GraphQL mode and helpers for CodeMirror.
Stars: β 147 (-23.44%)
Mutual labels: codemirror
Angular Admin
πAdmin client for surmon.me blog powered by @angular and Bootstrap4
Stars: β 352 (+83.33%)
Mutual labels: codemirror
Saite
Interactive document creation for exploratory graphics and visualizations. ε²γγ¦ (in bloom). Built on top of hanami vega/vega-lite library with CodeMirror and self hosted ClojureScript
Stars: β 89 (-53.65%)
Mutual labels: codemirror
Vue Codemirror
β¨οΈ @codemirror component for @vuejs
Stars: β 2,115 (+1001.56%)
Mutual labels: codemirror
ngx-codemirror
DEMO: https://ngx-codemirror.vercel.app
Dependencies
Latest version available for each version of Angular
@ctrl/ngx-codemirror | Angular |
---|---|
1.3.10 | 6.x 7.x |
2.2.1 | 8.x |
3.1.3 | 9.x |
current | >= 10.x |
An Angular component wrapper for CodeMirror that extends ngModel. Based on JedWatson/react-codemirror
Used in:
tsquery playground: https://tsquery-playground.firebaseapp.com/
Install
codemirror
is a peer dependency and must also be installed
npm install @ctrl/ngx-codemirror codemirror
Use
Import CodemirrorModule
and FormsModule
and bring in the codemirror files for parsing the language you wish to use.
In your NgModule
:
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
// add to imports:
imports: [
BrowserModule,
FormsModule,
CodemirrorModule,
...
]
In your main.ts
or at the root of your application, see documentation:
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
Import the base css file and your theme
@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';
Use The Component
<ngx-codemirror
[(ngModel)]="content"
[options]="{
lineNumbers: true,
theme: 'material',
mode: 'markdown'
}"
></ngx-codemirror>
Inputs
All Inputs of ngModel and
-
options
- options passed to the CodeMirror instance see http://codemirror.net/doc/manual.html#config -
name
- name applied to the created textarea -
autoFocus
- setting applied to the created textarea -
preserveScrollPosition
- preserve previous scroll position after updating value
Outputs
All outputs of ngModel and
-
focusChange
- called when the editor is focused or loses focus -
scroll
- called when the editor is scrolled (not wrapped inside angular change detection must manually trigger change detection or run inside ngzone) -
cursorActivity
- called when the text cursor is moved -
drop
- called when file(s) are dropped
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].